#FF6347, rgb(255,99,71), hsl(9,100%,64%) — 이 셋은 모두 토마토 레드라는 완전히 같은 색이지만 표현 방식이 전혀 다릅니다. 프론트엔드 엔지니어든, UI 디자이너든, CSS를 처음 배우는 분이든 반드시 만나게 되는 이 표기법들의 원리와 올바른 사용법을 이 글에서 체계적으로 정리합니다.
1. 색상 코드란 무엇인가? 왜 여러 색상 모델이 필요한가?
인간의 눈이 인식하는 가시광선 파장은 약 380 nm(보라색)에서 700 nm(빨간색)까지입니다. 컴퓨터는 이 연속적인 스펙트럼을 처리하기 위해 명확한 숫자 언어가 필요합니다. 색상 모델마다 접근 방식이 다르며, 빛의 물리 특성을 모방하는 것(RGB), 인쇄 잉크의 현실을 반영하는 것(CMYK), 인간의 시각적 감각에 맞게 설계된 것(HSL)이 있습니다. 어떤 미디어를 위해 디자인하느냐에 따라 어느 모델을 쓸지 결정됩니다.
핵심 정리：화면 표시에는 RGB/HEX/HSL, 인쇄에는 CMYK, 색 조정에는 HSL, CSS 붙여넣기에는 HEX.
2. RGB：빛의 가산 혼합, 모든 화면의 기반
RGB는 빨강(Red)·초록(Green)·파랑(Blue) 세 채널로 구성됩니다. 각 채널은 0~255(8비트 = 256단계)의 값을 가지며, 조합하면 256³ = 16,777,216가지 색을 표현할 수 있습니다. RGB는 가산 혼합: 세 빛을 모두 더하면 흰색, 모두 0이면 검정입니다. 물감을 섞을수록 어두워지는 것과는 반대로 빛의 물리 법칙에 충실합니다.
CSS에서는 rgb(255, 99, 71)로 씁니다. 투명도 포함 시：rgba(255, 99, 71, 0.5)（Alpha 0~1）. LCD, OLED, Micro-LED 등 거의 모든 화면 기술은 드라이버 레벨에서 RGB 3 채널로 각 픽셀의 발광 강도를 제어합니다.
3. HEX：개발자가 가장 많이 쓰는 16진수 색상 코드
HEX 색상 코드는 RGB를 16진수로 표현한 것입니다. #RRGGBB 형식에서 각 2자리가 하나의 채널을 나타냅니다. #FF6347의 경우：
FF(빨강) = 10진수 25563(초록) = 10진수 9947(파랑) = 10진수 71
각 채널의 두 자리가 동일하면 3자리로 축약 가능합니다：#F06 = #FF0066，#FFF = #FFFFFF(순백색). CSS는 8자리 HEX도 지원하며 마지막 2자리가 알파(투명도)를 나타냅니다. HEX는 간결하고 거의 모든 디자인 툴에서 한 번의 클릭으로 복사되어 CSS와 디자인 핸드오프에서 업계 표준입니다.
4. HSL과 HSB：인간 감각에 맞게 설계된 색상 모델
HSL은 Hue(색상)·Saturation(채도)·Lightness(명도)의 약자입니다：
- 색상(Hue)：색상환의 각도 0~360°. 0° = 빨강, 120° = 초록, 240° = 파랑.
- 채도(Saturation)：0%는 회색, 100%는 가장 선명한 순수 색.
- 명도(Lightness)：0%는 순검정, 50%가 자연스러운 발색, 100%는 순백색.
HSL의 최대 장점은 직관성입니다. "이 주황색을 조금 어둡게"하고 싶으면 Lightness를 낮추기만 하면 됩니다. RGB에서는 세 값을 동시에 조정해야 합니다. CSS는 HSL을 직접 지원합니다：hsl(9, 100%, 64%).
헷갈리기 쉬운 HSB(HSV)：HSB의 100% Brightness는 "가장 선명한 순수 색"이지만, HSL의 100% Lightness는 순백색입니다. Photoshop·Illustrator는 전통적으로 HSB를 사용하고, Figma와 CSS는 HSL을 사용합니다.
5. CMYK：인쇄 세계의 감산 혼합
CMYK는 시안(Cyan)·마젠타(Magenta)·노랑(Yellow)·검정(Key/Black)의 약자입니다. 잉크는 감산 혼합: 잉크가 특정 파장을 흡수하여 혼합할수록 더 어두워집니다. 이론상 CMY 세 가지를 섞으면 검정이 되지만 실제로는 탁한 갈색이 되므로, 독립된 검정(K) 채널을 추가하여 진정한 검정을 구현하고 잉크 사용량도 절감합니다. RGB는 CMYK보다 색역이 넓어 화면에서 보이는 형광 색은 인쇄 시 재현되지 않을 수 있으므로, 인쇄 전 색상 프로파일 변환 및 교정이 반드시 필요합니다.
6. 색상 모델 사용 상황 비교
| 모델 | 최적 용도 | 주요 장점 | 주요 한계 |
|---|---|---|---|
| RGB | 화면 표시·이미지 처리·프로그래밍 | 물리 현실에 가장 가깝고 정밀 | 감각적 조정이 어려움 |
| HEX | 프론트엔드·CSS·디자인 스펙 | 간결하고 붙여넣기 편함·업계 표준 | 값만 보고 색을 직관적으로 파악하기 어려움 |
| HSL | UI 조색·CSS 동적 테마 | 인간 감각에 가장 직관적 | 인쇄와 대응하려면 변환 필요 |
| CMYK | 인쇄물·그래픽 디자인 | 실제 인쇄 공정과 일치 | 화면 표시 부적합·색역 좁음 |
7. 색상 변환의 수학 원리
HEX → RGB：각 2자리 16진수를 10진수로 변환합니다. #1A2B3C：R = 0x1A = 26，G = 0x2B = 43，B = 0x3C = 60.
RGB → HSL：R·G·B를 255로 나눠 [0,1] 구간으로 정규화 → max, min 산출 → Lightness L = (max + min) / 2 → Saturation S = delta / (1 − |2L − 1|) → 최대값 채널에 따라 Hue(0~360°) 계산. 실무에서는 색상 변환 도구로 즉시 처리하는 것이 현실적입니다.
8. WCAG 대비도 기준과 접근성 디자인
WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경 색상의 최소 대비도를 규정합니다：
- AA (일반 텍스트)：대비도 ≥ 4.5:1
- AA (큰 텍스트, ≥ 18pt 또는 굵은 14pt)：대비도 ≥ 3:1
- AAA (최고 기준)：대비도 ≥ 7:1
계산식：(L1 + 0.05) / (L2 + 0.05)（L1 ≥ L2는 각 색의 상대 휘도）. 순검정(L=0)과 흰색(L=1)의 대비도는 21:1로 최대값. 남성 약 8%가 색각 이상이 있으므로, WCAG AA 달성은 현대 UI 디자인의 기본 요건입니다.
9. 실전 배색 전략
HSL로 팔레트 구성：브랜드 주색의 색상(H)을 고정하고 채도와 명도를 조정하면 텍스트용 다크·메인·배경용 라이트를 빠르게 파생시킬 수 있습니다. 예：메인 hsl(211, 80%, 45%) → 다크 hsl(211, 80%, 25%)·라이트 hsl(211, 80%, 92%).
색상환 관계 활용：보색(180° 차이)은 강한 대비로 강조에 적합；유사색(30~60° 차이)은 조화롭고 배경·보조색에 적합；삼각 배색(120° 간격)은 생동감 있는 UI에 적합. 색상만으로 정보를 전달하지 마세요 — 색각 이상 사용자를 위해 아이콘이나 텍스트 레이블을 반드시 함께 사용하세요.
10. 최신 CSS 색상 구문
CSS Color Level 4의 새로운 구문：color(display-p3 0.5 0.2 0.8)(광색역 Display P3 지원)、oklch(60% 0.18 255)(지각적으로 균일한 색 공간, 디자이너 커뮤니티에서 주목)、color-mix(in hsl, #FF6347 40%, #1E90FF)(CSS에서 직접 두 색상 혼합).
마무리
색상 코드는 단순한 문자열이 아니라 광학·지각 심리학·인쇄 공학·디지털 접근성 등 다양한 분야의 지식이 집약된 결과물입니다. RGB의 가산 혼합 원리를 이해하고, HSL의 직관적 논리를 익히고, WCAG 대비도 기준의 의미를 파악하면 색상 선택이 감에서 근거 있는 판단으로 바뀝니다. 색상 변환 도구는 단순한 계산기가 아니라, 당신의 디자인 언어를 정확하게 번역해 주는 파트너입니다.