색상 코드 변환 가이드
색상 코드란?
디지털 환경에서 색상을 정확하게 표현하기 위해 숫자와 문자로 이루어진 코드 체계를 사용합니다. 웹 디자인, 그래픽 디자인, 앱 개발 등 다양한 분야에서 색상 코드는 필수적인 요소입니다. 대표적인 색상 코드 형식으로 HEX, RGB, HSL이 있으며, 각각 고유한 장점과 활용 방법이 있습니다.
HEX (16진수 색상 코드)
HEX는 Hexadecimal의 약자로, 16진수를 사용하여 색상을 표현합니다. #기호 뒤에 6자리의 16진수(0-9, A-F)로 구성되며, 앞 2자리는 빨강(R), 중간 2자리는 초록(G), 마지막 2자리는 파랑(B)을 나타냅니다.
| HEX 코드 | 색상 | 설명 |
|---|---|---|
| #FF0000 | 빨강 | R=255, G=0, B=0 |
| #00FF00 | 초록 | R=0, G=255, B=0 |
| #0000FF | 파랑 | R=0, G=0, B=255 |
| #FFFFFF | 흰색 | R=255, G=255, B=255 |
| #000000 | 검정 | R=0, G=0, B=0 |
| #808080 | 회색 | R=128, G=128, B=128 |
HEX는 CSS에서 가장 많이 사용되는 색상 형식으로, 간결하고 복사/붙여넣기가 편리합니다. 3자리 축약형(#RGB)도 지원되며, 각 자리를 두 번 반복하여 6자리로 확장됩니다.
RGB (빛의 삼원색)
RGB는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛의 삼원색을 혼합하여 색상을 만드는 가산 혼합 방식입니다. 각 채널은 0부터 255까지의 정수값을 가지며, 세 값이 모두 0이면 검정, 모두 255이면 흰색입니다.
- rgb(255, 0, 0) → 순수한 빨강
- rgb(0, 255, 0) → 순수한 초록
- rgb(255, 255, 0) → 노랑 (빨강 + 초록)
- rgb(255, 0, 255) → 마젠타 (빨강 + 파랑)
- rgb(0, 255, 255) → 시안 (초록 + 파랑)
RGB는 모니터, TV 등 빛을 발하는 디스플레이 장치의 기본 색상 모델이며, 프로그래밍에서 색상을 수학적으로 조작할 때 직관적입니다.
HSL (색상·채도·명도)
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색을 표현하는 방식으로, 사람이 색을 인지하는 방식과 가장 유사합니다.
- Hue (색상): 0°~360°의 색상환 각도. 0°=빨강, 120°=초록, 240°=파랑
- Saturation (채도): 0%=무채색(회색), 100%=가장 선명한 색상
- Lightness (명도): 0%=검정, 50%=원래 색상, 100%=흰색
HSL의 최대 장점은 색상의 변형이 직관적이라는 것입니다. 같은 Hue에서 Saturation을 줄이면 파스텔 톤, Lightness를 줄이면 어두운 톤을 쉽게 만들 수 있어 디자인 시스템에서 색상 팔레트를 구성할 때 매우 유용합니다.
변환 공식
RGB → HEX
각 RGB 채널 값(0-255)을 16진수(00-FF)로 변환하여 이어붙입니다.
- R=255 → FF, G=128 → 80, B=0 → 00 → #FF8000 (주황색)
RGB → HSL
- R, G, B를 0~1 범위로 정규화
- 최대값(max)과 최소값(min)을 구함
- L = (max + min) / 2
- S = delta가 0이면 0, 아니면 delta / (1 - |2L - 1|)
- H = max가 R이면 60 × ((G-B)/delta mod 6), G이면 60 × ((B-R)/delta + 2), B이면 60 × ((R-G)/delta + 4)
HSL → RGB
- C = (1 - |2L - 1|) × S
- X = C × (1 - |(H/60) mod 2 - 1|)
- m = L - C/2
- H 범위에 따라 (R', G', B')를 결정하고 m을 더함
색상 이론 기초
색상환(Color Wheel): 빨강 → 주황 → 노랑 → 초록 → 파랑 → 보라 → 빨강으로 이어지는 원형 배열입니다.
| 조합 방식 | 설명 | 예시 |
|---|---|---|
| 보색 (Complementary) | 색상환 반대편 (H+180°) | 빨강 ↔ 시안 |
| 유사색 (Analogous) | 색상환 이웃 (H±30°) | 빨강-주황-노랑 |
| 삼원색 (Triadic) | 색상환 120° 간격 | 빨강-초록-파랑 |
| 분할보색 (Split-complementary) | 보색의 양쪽 이웃 | 빨강-청록-연두 |
웹 디자인에서의 실전 활용
- 브랜드 색상 정의: 메인 색상을 HEX로 정하고, HSL 변환 후 명도/채도를 조절하여 보조 색상 팔레트를 생성합니다.
- 다크 모드 대응: HSL에서 L값을 반전시키면 다크 모드용 색상을 쉽게 계산할 수 있습니다.
- 접근성 검사: 배경색과 텍스트색의 명도 대비를 계산하여 WCAG 기준(4.5:1 이상)을 충족하는지 확인합니다.
- CSS 변수 활용:
--primary: hsl(220, 90%, 56%)처럼 HSL로 정의하면 밝기 변형을 CSS calc()로 간편하게 계산할 수 있습니다. - 그라데이션 설계: HSL 색상환을 따라 H값을 점진적으로 변화시키면 자연스러운 무지개 그라데이션을 만들 수 있습니다.
참고
- W3C CSS Color Module Level 4 명세
- WCAG 2.1 색상 대비 기준 (AA: 4.5:1, AAA: 7:1)
- sRGB 색공간 (웹 표준 색공간)
※ 이 변환기는 sRGB 색공간 기준이며, CMYK(인쇄용) 변환은 지원하지 않습니다.