HEX RGB HSL 차이와 변환하는 법 - CMYK, 명암비까지 한 번에

HEX RGB HSL 차이와 변환하는 법 - CMYK, 명암비까지 한 번에 색상 코드 가이드 HEX, RGB, HSL은 같은 색을 다르게 적은 것입니다 #DB2777, rgb(219, 39, 119), hsl(333, 71%, 51%)은 모두 같은 분홍색입니다. 형식별 차이와 변환하는 법을 정리했습니다. 빛의 삼원색이 겹쳐 화면 색을 만듭니다 컬러 피커 바로 사용하기 웹 디자인이나 문서 작업을 하다 보면 색을 #DB2777처럼 적기도 하고 rgb(219, 39, 119)처럼 적기도 합니다. 셋 다 같은 색을 가리키는 다른 표기법입니다. 각각 어떻게 읽고 언제 쓰는지 알아보겠습니다. 같은 색, 세 가지 표기 #DB2777 rgb(219, 39, 119) hsl(333, 71%, 51%) 형식 구성 주로 쓰는 곳 HEX 빨강, 초록, 파랑을 각각 16진수 두 자리로 CSS, 디자인 툴, 코드 RGB 빨강, 초록, 파랑 값 (각 0에서 255) 화면 색, 투명도(RGBA) 지정 HSL 색상, 채도, 명도 밝기나 채도만 미세 조정할 때 HSV 색상, 채도, 명도(Value) 그래픽 툴 색상 선택기 CMYK 청록, 자홍, 노랑, 검정 잉크 비율 인쇄물 HEX 읽는 법 HEX 코드는 #RRGGBB 구조입니다. 앞에서부터 두 자리씩 빨강, 초록, 파랑이며 각 값은 16진수로 00부터 FF까지입니다. 10진수로는 0부터 255입니다. #DB2777 DB = 빨강 219 / 27 = 초록 39 / 77 = 파랑 119 #FF0000 빨강만 최대. 순수한 빨강. #000000 모두 0. 검정. #FFFFFF 모두 최대. 흰색. #F00 세 자리 축약형. #FF0000과 같습니다. 각 자리를 두 번 반복한 값입니다. RGB...

컬러 피커 - HEX / RGB / HSL 변환, 명암비 확인, 팔레트 생성 (무료)

컬러 피커 - HEX / RGB / HSL 변환, 대비 확인, 팔레트 생성
COLOR PICKER 2026

컬러 피커

HEX, RGB, HSL, HSV, CMYK 동시 변환 / 명도 팔레트 / 명암비 확인

#DB2777
rgb(219, 39, 119)
HSL 조절
색상 (Hue)333
채도 (Saturation)71%
명도 (Lightness)51%
색상 값 (직접 입력 가능)
HEX
RGB
HSL
HSV
CMYK
명도 팔레트 클릭하면 그 색으로 이동
색상 조합
명암비 (WCAG)
흰 배경 위 텍스트
--
검정 배경 위 텍스트
--
본문 텍스트는 명암비 4.5 이상(AA), 큰 글자는 3 이상이면 접근성 기준을 만족합니다. AAA는 7 이상입니다.
최근 사용한 색
색을 고르면 여기에 기록됩니다
기능 설명
5가지 형식 동시 변환
HEX, RGB, HSL은 직접 입력해도 나머지 값이 즉시 바뀝니다. HSV, CMYK도 함께 표시됩니다.
HSL 슬라이더
색상, 채도, 명도를 따로 조절합니다. 채도와 명도만 바꾸면 색조는 유지됩니다.
명도 팔레트
같은 색조에서 밝기만 다른 10단계를 만들어 줍니다. 버튼 색, 배경 색 세트를 잡을 때 씁니다.
색상 조합
보색, 유사색, 3색조를 색상환 각도로 계산해 보여 줍니다. 클릭하면 그 색으로 이동합니다.
명암비 확인
흰 배경과 검정 배경에서의 대비를 계산하고 WCAG AA, AAA 통과 여부를 표시합니다.
화면에서 색 추출
지원하는 브라우저에서는 화면 어디든 클릭해 그 픽셀의 색을 가져올 수 있습니다.
모든 계산은 이 페이지 안에서만 이루어지며, 고른 색은 이 브라우저에만 기록되고 서버로 전송되지 않습니다.

댓글

이 블로그의 인기 게시물

이미지 도구