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, 화면의 색

모니터는 빨강, 초록, 파랑 빛을 섞어 색을 냅니다. 세 값이 모두 0이면 빛이 없어 검정, 모두 255면 흰색입니다. 이렇게 빛을 더할수록 밝아지는 방식을 가산 혼합이라고 합니다. RGBA는 여기에 투명도(alpha) 한 값을 더한 것입니다.

HSL, 조절하기 쉬운 색

HSL은 사람이 색을 다루기 편하게 만든 형식입니다.

색상 (H)	0에서 360. 색상환의 각도입니다. 0은 빨강, 120은 초록, 240은 파랑.
채도 (S)	0%에서 100%. 0%는 회색, 100%는 가장 선명한 색.
명도 (L)	0%에서 100%. 0%는 검정, 50%는 순색, 100%는 흰색.

버튼의 기본색과 눌렀을 때 색을 만들 때, HSL에서 명도만 10% 정도 낮추면 자연스러운 어두운 버전이 나옵니다. HEX로는 세 값을 다 바꿔야 하지만 HSL로는 한 값만 조절하면 됩니다.

HSL과 HSV의 차이

이름이 비슷하지만 세 번째 값이 다릅니다. HSL의 L(명도)은 100%가 항상 흰색입니다. HSV의 V(Value)는 100%가 가장 밝은 순색이고 흰색이 되려면 채도도 0이어야 합니다. 포토샵 같은 그래픽 툴은 HSV를 씁니다.

CMYK, 인쇄의 색

인쇄는 흰 종이에 잉크를 얹어 빛을 빼는 방식입니다. 그래서 청록, 자홍, 노랑, 검정 잉크의 비율로 색을 표현합니다. 화면(RGB)에서 선명하게 보이던 색이 인쇄에서 탁하게 나오는 이유는 두 방식이 표현할 수 있는 색 범위가 다르기 때문입니다.

화면에서 고른 색을 인쇄에 그대로 쓰려면, 인쇄소에 최종 파일을 넘기기 전에 CMYK로 변환한 결과를 확인하세요. 형광색에 가까운 색은 특히 차이가 큽니다.

명암비와 접근성

글자색과 배경색의 밝기 차이가 작으면 읽기 어렵습니다. 웹 접근성 지침(WCAG)은 이 차이를 명암비로 수치화합니다.

기준	필요 명암비
본문 텍스트 (AA)	4.5 : 1 이상
큰 글자 (AA)	3 : 1 이상
본문 텍스트 (AAA)	7 : 1 이상

컬러 피커에서 색을 고르면 흰 배경과 검정 배경에서의 명암비를 자동으로 계산하고 AA, AAA 통과 여부를 표시합니다. 밝은 노랑이나 연한 회색을 흰 배경에 본문으로 쓰면 대부분 기준에 미달합니다.

색상 조합

보색	색상환에서 180도 반대. 강한 대비를 줄 때.
유사색	양옆 30도 안쪽. 잔잔하고 안정적인 배색.
3색조	120도씩 세 색. 균형 잡힌 다색 배색.

도구에서는 현재 색을 기준으로 이 조합들을 계산해 보여 줍니다. 각 색을 클릭하면 그 색으로 넘어가 다시 값을 확인할 수 있습니다.

자주 묻는 질문

#DB2777 앞의 #은 꼭 붙여야 하나요?

CSS에서는 붙여야 합니다. 도구에 입력할 때는 있어도 없어도 인식합니다.

rgb(219, 39, 119)와 rgba(219, 39, 119, 1)은 같나요?

alpha 값이 1이면 완전 불투명이라 결과 색은 같습니다. rgba는 반투명을 지정할 때 씁니다.

화면에서 색을 뽑는 스포이드가 안 보입니다.

EyeDropper 기능을 지원하는 브라우저에서만 버튼이 나타납니다. 지원하지 않으면 색상환 선택기나 HEX 직접 입력을 쓰면 됩니다.

입력한 색이 저장되나요?

최근 사용한 색은 이 브라우저에만 기록되며 서버로 전송되지 않습니다.

아래 도구에서 색을 고르면 HEX, RGB, HSL, HSV, CMYK 값이 한 번에 나오고, 명도 팔레트와 색상 조합, 명암비 등급까지 확인할 수 있습니다.

컬러 피커 바로 사용하기

화면 색은 모니터 설정에 따라 다르게 보일 수 있습니다.