HEX, RGB, HSL 색상 코드의 차이는?

HEX는 #FF5733처럼 16진수로 표현하며 웹 개발에서 가장 널리 사용됩니다. RGB는 rgb(255, 87, 51)처럼 빨강, 초록, 파랑 값(0-255)으로 표현하며 모니터 디스플레이 원리와 동일합니다. HSL은 hsl(14, 100%, 60%)처럼 색상(Hue 0-360°), 채도(Saturation 0-100%), 밝기(Lightness 0-100%)로 표현하며 직관적인 색상 조절에 유리합니다.

CMYK와 RGB의 차이점은?

RGB는 빛의 삼원색(빨강, 초록, 파랑)을 혼합하는 가산혼합 방식으로, 모니터, TV 등 디스플레이에 사용됩니다. CMYK는 잉크의 사원색(시안, 마젠타, 노랑, 검정)을 혼합하는 감산혼합 방식으로, 인쇄물에 사용됩니다. 모니터에서 보이는 색상과 인쇄 결과가 다를 수 있어 인쇄 작업 시 CMYK 변환이 필수적입니다.

웹 접근성을 위한 색상 대비 기준은?

WCAG 2.1 기준으로 일반 텍스트는 배경과 최소 4.5:1, 큰 텍스트(18pt 이상)는 3:1의 명도 대비를 충족해야 합니다. AAA 등급은 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구합니다. 예를 들어 흰 배경(#FFFFFF)에 회색 텍스트는 #757575 이상 어두워야 AA 기준을 충족합니다.

색상 변환기

HEX, RGB, HSL, HSV, CMYK 등 다양한 색상 형식을 상호 변환합니다.

색상 미리보기

색상 값

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

HSV/HSB

hsv(217, 76%, 96%)

CMYK

cmyk(76%, 47%, 0%, 4%)

RGB

r59

g130

b246

HSL

H217°

S91%

L60%

색상 변환 가이드

색상 형식

HEX: 웹에서 가장 많이 사용 (#RRGGBB)
RGB: 빨강, 초록, 파랑 조합 (0-255)
HSL: 색상, 채도, 명도 (디자인 친화적)
CMYK: 인쇄용 색상 형식

활용 사례

• 웹 디자인 색상 코드 변환
• 디자인 툴 간 색상 공유
• 인쇄용 CMYK 값 확인
• 색상 팔레트 제작