색상 모델이란
디지털 색상을 표현하는 방법은 여러 가지가 있으며, 각 모델은 목적에 따라 장단점이 다릅니다. 웹 개발에서 가장 자주 사용하는 세 가지 모델인 HEX, RGB, HSL의 원리와 활용 상황을 이해하면 코드 작성과 디자인 협업이 훨씬 효율적입니다.
HEX(16진수) 색상
HEX는 RGB 값을 16진수 문자열로 표현한 형식입니다. #RRGGBB 형태로 각각 빨강(R), 초록(G), 파랑(B)의 강도를 00~FF(0~255)로 나타냅니다. 예를 들어 #3b82f6은 R=59, G=130, B=246입니다.
HEX의 특징으로 디자인 도구(Figma, Sketch, Adobe XD)와 CSS에서 가장 널리 사용되며, 3자리 단축형(#fff = #ffffff)이 가능합니다. 6자리 뒤에 2자리 추가로 투명도를 지정할 수도 있습니다(#3b82f680 = 50% 투명도). 단, HEX만 보고 색상을 직관적으로 파악하기는 어렵습니다.
RGB 색상
RGB는 빛의 삼원색(Red, Green, Blue)을 각각 0~255의 정수 또는 0%~100%의 비율로 표현합니다. rgb(59, 130, 246) 또는 rgba(59, 130, 246, 0.5)처럼 투명도(alpha)를 포함할 수 있습니다.
RGB의 장점은 프로그래밍에서 수치 연산이 직관적이라는 점입니다. Canvas API, WebGL, 이미지 처리 등에서 픽셀 단위 색상 조작 시 활용됩니다. 단, 사람이 색조나 밝기를 직접 조절하기에는 직관적이지 않습니다.
HSL 색상
HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 색상을 표현합니다. hsl(217, 91%, 60%)처럼 사용합니다. Hue는 0~360도의 색상환 각도, Saturation은 0%(무채색)~100%(순색), Lightness는 0%(검정)~100%(흰색)입니다.
HSL의 가장 큰 장점은 직관성입니다. "이 색에서 밝기만 20% 높이고 싶다"거나 "같은 색조의 5단계 팔레트를 만들고 싶다"는 요구를 HSL로 쉽게 구현할 수 있습니다.
/* HSL로 버튼 상태 정의 */
:root {
--brand-hue: 217;
--brand-s: 91%;
}
.btn {
background: hsl(var(--brand-hue), var(--brand-s), 60%);
}
.btn:hover {
background: hsl(var(--brand-hue), var(--brand-s), 55%); /* 밝기만 조절 */
}
.btn:disabled {
background: hsl(var(--brand-hue), 30%, 70%); /* 채도 낮춤 */
}WCAG 접근성 대비 기준
WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경 색상 간 대비 비율 기준을 제시합니다. 대비 비율은 두 색상의 상대적 밝기(relative luminance) 차이로 계산하며, 1:1(동일)부터 21:1(흰색과 검정)까지의 범위를 가집니다.
WCAG 2.1 기준: AA 레벨은 일반 텍스트 4.5:1 이상, 큰 텍스트(18pt 이상) 3:1 이상이 필요합니다. AAA 레벨은 일반 텍스트 7:1 이상을 요구합니다.
실무 팁으로, 흰 배경에 사용할 텍스트 색상은 L(lightness) 값 50% 이하여야 대체로 AA를 통과합니다. 브랜드 컬러가 이 기준을 통과하지 못한다면 텍스트에는 더 어두운 변형을 사용하거나, 아이콘/장식 요소에만 밝은 색상을 적용하는 전략을 사용합니다.
다크모드 구현 전략
CSS 변수(Custom Properties)와 HSL을 조합하면 다크모드를 효율적으로 구현할 수 있습니다.
:root {
--bg: hsl(0, 0%, 100%);
--text: hsl(0, 0%, 10%);
--accent: hsl(217, 91%, 60%);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(0, 0%, 10%);
--text: hsl(0, 0%, 95%);
--accent: hsl(217, 91%, 70%); /* 다크모드에서 살짝 밝게 */
}
}다크모드에서 색상을 단순히 반전하면 채도가 너무 높아 눈이 피로할 수 있습니다. 일반적으로 다크모드에서는 채도를 10~15% 낮추고 밝기를 5~10% 높이는 방식으로 조정합니다.
CSS 최신 색상 함수
CSS Color Level 4 및 5에서 새로운 색상 함수들이 도입되었습니다. oklch()는 인간의 시각적 균일성을 반영한 색상 모델로, 동일한 L(밝기) 값에서 모든 색상이 동일하게 밝게 보이도록 설계되었습니다. color-mix()는 두 색상을 특정 비율로 혼합하는 함수입니다.
이 함수들은 2024년 기준 주요 브라우저에서 지원되지만, 아직 폴백 처리가 필요한 경우도 있습니다. 새 프로젝트에서는 점진적으로 도입을 검토해 볼 수 있습니다.
색상 모델 선택 가이드
디자인 도구에서 색상을 받아 CSS에 적용할 때는 HEX를 그대로 사용하세요. 조작이 필요 없는 정적 색상에 적합합니다. 버튼 상태, 테마 팔레트, 다크모드 등 색상을 프로그래밍적으로 조작해야 할 때는 HSL이 최적입니다. Canvas API, WebGL, 이미지 프로세싱 등 픽셀 수준 작업에서는 RGB를 사용합니다.
자주 묻는 질문
HEX 6자리와 8자리의 차이는 무엇인가요?
6자리 HEX는 RGB만 포함하고, 8자리는 마지막 2자리에 투명도(alpha)를 추가합니다. #3b82f680에서 80은 16진수로 128, 즉 약 50% 투명도입니다. CSS에서는 rgba()나 hsl()의 alpha 매개변수를 사용하는 방법도 있습니다.
HSL의 L(lightness)과 brightness는 같은 개념인가요?
아닙니다. HSL의 L(lightness)은 0%가 검정, 50%가 순색(포화), 100%가 흰색입니다. HSV/HSB의 V(value)/B(brightness)는 0%가 검정, 100%가 순색(포화) 또는 흰색입니다. 동일한 색상에서 두 모델의 수치가 달라 혼동하기 쉽습니다. 포토샵은 HSB, CSS는 HSL을 사용합니다.
브랜드 컬러가 WCAG를 통과하지 못하면 어떻게 해야 하나요?
배경 위에 브랜드 컬러 텍스트를 사용하지 않는 방법이 가장 간단합니다. 버튼 배경이나 장식 요소에는 브랜드 컬러를 사용하고, 버튼 위 텍스트는 흰색이나 어두운 색으로 설정하세요. 브랜드 컬러를 텍스트에 반드시 써야 한다면 배경을 더 밝게 조정하거나 브랜드 컬러를 어둡게 변형한 버전을 텍스트 전용으로 사용합니다.
도구 활용
HEX, RGB, HSL 색상을 즉시 변환하고 색상 조화 팔레트를 생성하려면 색상 변환기를 사용하세요. WCAG 대비 비율 확인과 Tailwind CSS 근접 색상 찾기도 지원합니다.