색상 포맷 설명: HEX, RGB, HSL 변환 가이드
화면의 모든 픽셀은 숫자로 정의됩니다. 하지만 같은 색상을 HEX, RGB, HSL, HSB 등 여러 포맷으로 표현할 수 있습니다. 이러한 포맷과 각각을 언제 사용해야 하는지 이해하면 더 효율적인 개발자이자 디자이너가 될 수 있습니다.
색상 모델
RGB (Red, Green, Blue)
RGB는 화면이 작동하는 방식에 기반한 가산 색상 모델입니다. 각 픽셀은 다양한 강도의 빨강, 초록, 파랑 빛의 조합입니다.
color: rgb(59, 130, 246); /* 불투명 파랑 */
color: rgba(59, 130, 246, 0.5); /* 50% 투명 파랑 */
각 채널의 범위는 0 (없음)에서 255 (최대 강도)입니다:
rgb(0, 0, 0)= 검정 (빛 없음)rgb(255, 255, 255)= 흰색 (모든 빛)rgb(255, 0, 0)= 순수한 빨강
RGB 사용 시점: 프로그래밍 방식의 색상 조작, 캔버스 작업, 이미지 처리. RGB는 하드웨어에 직접 매핑되어 계산이 간단합니다.
HEX (16진수)
HEX는 단순히 16진수 표기법으로 작성된 RGB입니다. 각 문자 쌍이 하나의 채널을 나타냅니다 (00-FF):
color: #3B82F6; /* rgb(59, 130, 246)과 같은 파랑 */
color: #3B82F680; /* 50% 알파 포함 (8자리 hex) */
변환은 직접적입니다: 3B = 59, 82 = 130, F6 = 246.
단축형: 각 쌍이 동일한 숫자일 때 줄일 수 있습니다: #AABBCC → #ABC
HEX 사용 시점: CSS 스타일시트 (가장 일반적인 포맷), 디자인 전달, 브랜드 가이드라인. HEX는 간결하고 보편적으로 이해됩니다.
HSL (Hue, Saturation, Lightness)
HSL은 인간이 인지하는 방식으로 색상을 표현합니다. 빛 채널을 혼합하는 대신 속성으로 색상을 설명합니다:
- 색조(Hue): 색상 휠에서의 각도 (0-360°). 0° = 빨강, 120° = 초록, 240° = 파랑
- 채도(Saturation): 색상이 얼마나 선명한지 (0% = 회색, 100% = 완전한 색상)
- 명도(Lightness): 색상이 얼마나 밝은지 (0% = 검정, 50% = 순수한 색상, 100% = 흰색)
color: hsl(217, 91%, 60%); /* 같은 파랑 */
color: hsla(217, 91%, 60%, 0.5); /* 알파 포함 */
HSL 사용 시점: 색상 팔레트 생성, 프로그래밍 방식의 색상 조정 (예: 명도 조정으로 호버 상태 만들기), 접근 가능한 색상 디자인. HSL은 색상에 대한 인간의 추론에 가장 직관적인 포맷입니다.
HSB/HSV (Hue, Saturation, Brightness/Value)
HSB는 HSL과 유사하지만 밝기를 다르게 정의합니다. 최대 밝기에서 순수한 색상을 얻고, 최소에서 검정을 얻습니다. 이 모델은 Figma, Sketch, Photoshop과 같은 디자인 도구에서 사용됩니다.
HSL과의 주요 차이점: HSL에서 명도 50%가 순수한 색상을 제공합니다. HSB에서 밝기 100%가 순수한 색상을 제공합니다. 이로 인해 HSB가 일부 작업에 더 직관적이지만 CSS에서 덜 유용합니다 (CSS는 HSB를 네이티브로 지원하지 않습니다).
포맷 간 변환
포맷 간 변환은 간단한 수학을 포함합니다. 주요 관계는 다음과 같습니다:
HEX에서 RGB로
hex 문자열을 쌍으로 분할하고 각각을 10진수로 변환합니다:
#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)
RGB에서 HSL로
알고리즘은 RGB 값을 0-1로 정규화하고, 최대 및 최소 채널을 찾은 다음, 지배적인 채널을 기반으로 색조를 계산하고, 범위에서 채도를, 평균에서 명도를 계산합니다.
이러한 변환을 수동으로 구현하기보다는 색상 변환기를 사용하여 어떤 포맷 간이든 즉시 변환하세요.
실용적 활용
HSL로 색상 팔레트 구축
HSL은 일관된 팔레트 생성에 뛰어납니다. 색조를 일정하게 유지하고 채도와 명도를 변경하세요:
:root {
--blue-100: hsl(217, 91%, 95%); /* 가장 밝음 */
--blue-200: hsl(217, 91%, 85%);
--blue-300: hsl(217, 91%, 75%);
--blue-400: hsl(217, 91%, 65%);
--blue-500: hsl(217, 91%, 60%); /* 기본 */
--blue-600: hsl(217, 91%, 50%);
--blue-700: hsl(217, 91%, 40%);
--blue-800: hsl(217, 91%, 30%);
--blue-900: hsl(217, 91%, 20%); /* 가장 어두움 */
}
이 접근 방식은 지각적으로 일관된 단계를 보장합니다. 직접 전체 팔레트를 만드시나요? 색상 팔레트 생성기가 이 과정을 자동화합니다.
호버 및 포커스 상태
HSL에서 인터랙티브 상태를 만드는 것은 간단합니다:
.button {
background: hsl(217, 91%, 60%);
}
.button:hover {
background: hsl(217, 91%, 55%); /* 5% 더 어둡게 */
}
.button:active {
background: hsl(217, 91%, 50%); /* 10% 더 어둡게 */
}
접근성과 대비
WCAG 2.1은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 대비 비율을 요구합니다. HSL의 명도 구성요소는 충분한 대비를 보장하는 직관적인 방법을 제공합니다:
- 밝은 배경 (명도 > 90%)은 어두운 텍스트 (명도 < 30%)와 잘 어울립니다
- 어두운 배경 (명도 < 20%)은 밝은 텍스트 (명도 > 80%)와 잘 어울립니다
최신 CSS 색상 함수
CSS는 이제 강력한 색상 조작 함수를 지원합니다:
/* 상대 색상 구문 (CSS Color Level 4) */
.element {
--base: hsl(217 91% 60%);
background: hsl(from var(--base) h s calc(l - 10%));
}
/* oklch - 지각적으로 균일한 색상 공간 */
color: oklch(0.7 0.15 250);
oklch 포맷은 지각적으로 균일하기 때문에 채택이 증가하고 있습니다 — 동일한 수치 변화가 동일한 인지 변화를 만들며, HSL에서 10% 명도 변화가 다른 색조 값에서 다르게 보이는 것과 다릅니다.
자주 묻는 질문
CSS에서 어떤 색상 포맷을 사용해야 하나요?
대부분의 프로젝트에서 단순한 색상에는 HEX를, 변형을 만들거나 프로그래밍 방식으로 색상을 조작해야 할 때는 HSL을 사용하세요. HEX는 가장 간결하고 널리 인식되는 포맷입니다. HSL은 색상 시스템을 구축할 때 더 읽기 쉽습니다. 최신 CSS는 모든 포맷을 상호 교환적으로 지원합니다.
HSL과 HSB의 차이점은 무엇인가요?
HSL과 HSB 모두 색조와 채도를 사용하지만 밝기를 다르게 정의합니다. HSL에서 명도 0%는 검정, 50%는 순수한 색상, 100%는 흰색입니다. HSB에서 밝기 0%는 검정, 100%는 순수한 색상입니다 (밝기만으로는 흰색에 도달하는 경로가 없음). CSS는 HSL을 네이티브로 지원하며, HSB는 주로 Figma와 Photoshop 같은 디자인 도구에서 사용됩니다.
관련 리소스
- 색상 변환기 — HEX, RGB, HSL, HSB 간 즉시 변환
- 색상 팔레트 생성기 — 조화로운 색상 팔레트 생성
- CSS 그래디언트 가이드 — CSS로 아름다운 그래디언트 만들기