HEX 색상 코드란?

HEX 색상 코드는 #RRGGBB 형식으로 빨강, 초록, 파랑의 16진수 값을 조합하여 색상을 표현합니다. 예: #FF0000은 빨간색입니다.

RGB와 HSL의 차이는?

RGB는 빨강/초록/파랑의 강도로 색상을 표현하고, HSL은 색상(Hue)/채도(Saturation)/명도(Lightness)로 표현합니다. HSL이 사람이 인식하는 방식에 더 가깝습니다.

색상 코드 변환 | 도구모음

색상 변환기 — 디자이너가 준 HEX를 코드로 옮기는 풀스택 워크플로

"디자이너가 Figma에서 건넨 #3B82F6을 Tailwind 커스텀 색상으로 등록하려면 RGB인지 HSL인지?" 이런 질문은 프론트엔드 개발자라면 하루에 한 번은 마주칩니다. 색상 코드 체계는 sRGB(IEC 61966-2-1) 색 공간을 기반으로 하며, 웹에서 사용하는 HEX, RGB, HSL은 모두 이 sRGB 감마 커브 위의 좌표를 서로 다른 방식으로 표기한 것입니다. 이 도구는 세 표기를 실시간 양방향으로 변환하고, CSS 코드까지 바로 복사할 수 있어 디자인-개발 핸드오프에서 가장 자주 꺼내 쓰게 됩니다.

색상 모델별 기술 원리

HEX는 #RRGGBB 형식으로, 각 채널을 00~FF(0~255) 16진수로 표기합니다. CSS Level 4부터는 8자리 #RRGGBBAA(알파 포함)도 표준입니다.RGB는 빨강·초록·파랑 세 채널을 0~255 정수로 지정하며, CSS에서 rgb(59, 130, 246) 또는 rgba(59, 130, 246, 0.5)로 사용합니다.HSL은 색상(Hue, 0~360도), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 구성되는데, 사람이 "이 색을 좀 더 밝게" 같은 직관적 조절을 할 때 가장 편리합니다. 변환 공식의 핵심은 RGB → HSL에서 max(R,G,B) - min(R,G,B)로 채도를 구하고, 어느 채널이 최대인지에 따라 Hue 각도를 산출하는 것입니다.

모델	형식	범위	주 용도
HEX	#RRGGBB	00~FF x 3	CSS 단축 표기, 디자인 핸드오프
RGB	rgb(R, G, B)	0~255 x 3	Canvas API, WebGL, 이미지 처리
HSL	hsl(H, S%, L%)	0~360, 0~100%	테마 변형, 다크모드, 팔레트 생성
HWB	hwb(H W% B%)	0~360, 0~100%	CSS Level 4 신규
LAB / LCH	lab(L a b)	지각 균일	색차 계산, 접근성 분석

구체 예시 — 자주 쓰는 변환 패턴

/* Tailwind blue-500 */
HEX : #3B82F6
RGB : rgb(59, 130, 246)
HSL : hsl(217, 91%, 60%)

/* 같은 색의 다크모드 변형 — 명도만 40%로 */
HSL : hsl(217, 91%, 40%)  →  HEX #1D4ED8  (blue-700과 근사)

/* 반투명 오버레이 */
RGBA: rgba(0, 0, 0, 0.45)  →  HEX #00000073

/* WCAG 상대 휘도 공식 (sRGB → 선형) */
Rsrgb = R / 255
Rlin  = Rsrgb <= 0.04045
          ? Rsrgb / 12.92
          : ((Rsrgb + 0.055) / 1.055) ^ 2.4
L = 0.2126·Rlin + 0.7152·Glin + 0.0722·Blin

실무 시나리오 4가지

디자인 시스템 구축 — Figma 토큰을 --color-primary: hsl(217, 91%, 60%)로 등록하고 hover/active는 명도만 바꿔 파생.
다크모드 전환 — prefers-color-scheme: dark일 때 HSL 명도를 뒤집어 자동 팔레트 생성. L 50% 기준 대칭이 기본 전략.
접근성 감사 — WCAG 2.1 SC 1.4.3이 요구하는 4.5:1 대비비를 맞추려면 상대 휘도(relative luminance) 계산이 필수. sRGB 감마 역변환 후 가중합으로 L을 구합니다.
Canvas/WebGL 텍스처 — getImageData()가 돌려주는 Uint8ClampedArray는 RGBA 순서이므로, HEX 문자열에서 바로 변환해 픽셀 조작에 활용.

디버깅 경험 — "색이 왜 다르게 보여요?"

Figma에서 받은 #FF6B35를 그대로 CSS에 넣었는데 "실물 인쇄랑 다르다"는 클레임을 받은 적 있습니다. 원인은 색 공간 차이: 모니터는 sRGB, 인쇄는 CMYK(ISO 12647-2)라서 색역(gamut)이 다릅니다. 특히 채도 높은 오렌지·네온 계열은 CMYK 색역을 벗어나 탁하게 인쇄됩니다. 웹 전용이면 sRGB만 신경 쓰면 되지만, 오프라인 인쇄물까지 이어지는 프로젝트에서는 Display P3(color(display-p3 1 0.42 0.21), CSS Color Level 4)도 고려해야 합니다. 또 하나 흔한 함정 — CSS에서 opacity: 0.5와 rgba(r,g,b,0.5)는 자식 요소 상속 여부가 다릅니다. 오버레이를 만들 때 opacity를 쓰면 텍스트까지 투명해져서 당황하는 일이 생기죠.

접근성과 대비비 — WCAG 2.1 핵심 요구사항

WCAG 2.1 Success Criterion 1.4.3(Level AA)은 일반 텍스트에 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 볼드)에 3:1 대비비를 요구합니다. 대비비 공식은 (L1 + 0.05) / (L2 + 0.05)이며, L1과 L2는 상대 휘도입니다. 실무에서 가장 많이 실수하는 패턴은 회색 배경 위에 회색 텍스트를 올리는 것인데,#6B7280(gray-500) 텍스트를 #F9FAFB(gray-50) 배경에 놓으면 대비비 약 4.6:1로 AA를 간신히 통과하지만, #9CA3AF(gray-400)로 올리면 3.0:1로 실패합니다.

참고 자료

W3C CSS Color Module Level 4 — HEX, RGB, HSL, HWB, LAB, LCH 명세
IEC 61966-2-1 — sRGB 색 공간 표준
WCAG 2.1 SC 1.4.3 — Contrast (Minimum), Level AA
MDN Web Docs — CSS color_value 레퍼런스
Lea Verou — contrast-ratio.com (대비비 계산기 원리)

색상 코드 변환