색은 어떻게 표현될까? (RGB · HSL · OKLCH)

#ff6b35 가 무엇인가? 빨강 255 / 초록 107 / 파랑 53. 근데 왜 모니터마다 다르게 보일까? hsl(20 100% 60%) 와는 같은 색일까? 디자이너가 "OKLCH 로 가자" 라고 하면 무슨 의미일까? 이 가이드는 컴퓨터가 색을 어떻게 숫자로 표현하는지, RGB / HSL / OKLCH 의 차이, gamut (색역) 의 정체, 그리고 왜 OKLCH 가 현대 디자인 시스템의 새 default 가 되고 있는지 정리한다.

색은 원래 빛이다 (혹은 잉크 점)

모니터 픽셀은 빨강·초록·파랑 (R/G/B) 세 작은 LED 가 섞여 모든 색을 만든다. 인간 망막의 세 종류 colour cone 이 빨강·초록·파랑 에 민감하다는 사실에 정합. 세 채널의 강도 0-255 (8-bit) 조합으로 16,777,216 색.

프린트는 반대 — 종이는 흰색에서 시작해 잉크 (CMYK) 로 빛을 빼는 식. 이 가이드는 화면 색만 다룬다 (CMYK 는 프린트 전문 도구의 영역).

RGB / HEX — 가장 친숙하지만 인간 직관 X

#ff6b35    ← HEX (16진수 6자리)
rgb(255 107 53)  ← 같은 색의 CSS rgb 표기

255 = R 채널 최대
107 = G 채널 약 42%
 53 = B 채널 약 21%

직관적인 것 — 컴퓨터 입장. 인간이 "오렌지 좀 더 어둡게" 를 표현하려면 세 채널 다 조정해야. 색조 (hue) 와 밝기 (lightness) 가 독립적이지 않아 시각 조정 어렵다.

왜 16 진수?

각 채널 0-255 (1 byte) → 두 자리 hex (00-FF). # + 6 자리 = 정확히 3 bytes. 메모리 / 디스크 직렬화 효율. URL 안 안전 문자만 사용.

HSL — 인간 친화 첫 시도

hsl(20 100% 60%)
    │   │    │
    │   │    └─ Lightness (밝기) 0-100%
    │   └────── Saturation (채도) 0-100%
    └────────── Hue (색조) 0-360 degrees

Hue 는 색상환 (color wheel) 의 각도. 0° = 빨강, 120° = 초록, 240° = 파랑. Saturation 은 회색에서 순수 색으로의 강도. Lightness 는 검정에서 흰색으로의 위치.

HSL 의 함정 — 시각 lightness ≠ HSL L

hsl(60 100% 50%) (노랑) 과 hsl(240 100% 50%) (파랑) — L 값 동일 50%. 그러나 시각적으로 노랑은 훨씬 밝아 보인다. 인간 눈은 파장별로 민감도가 다르고 (휘도 곡선) HSL 은 이를 무시.

결과 — 디자인 시스템에서 "어떤 색이든 L 50% 면 같은 밝기" 가 성립 X. 컴포넌트 hover state 를 L 만 조정하면 색에 따라 효과 강도가 달라짐.

OKLCH — 인간 눈 정합 색 공간 (2020+)

Björn Ottosson 이 2020 년 발표. CSS Color 4 사양에 정식 채택. Tailwind v4·Radix·Tokens Studio 가 채택 시작.

oklch(70% 0.18 35)
       │    │   │
       │    │   └─ Hue (각도)
       │    └────── Chroma (채도, 0~~0.4)
       └─────────── Lightness (인지 밝기, 0-100%)

외관은 HSL 과 유사. 그러나 L 값이 인간 눈이 인지하는 실제 밝기. oklch(70% 0.18 60) (노랑) 과 oklch(70% 0.18 240) (파랑) — 시각적으로 같은 밝기.

이게 왜 강력한가:

• 일관된 hover/active state — 모든 컬러 토큰의 L 값을 -10% 하면 모든 색이 정확히 같은 정도로 어두워짐
• 접근성 콘트라스트 계산 직관적 — L 차이 = 인지 밝기 차이
• palette 자동 생성 — 같은 hue + 다른 L 로 shade/tint 일관 (색 팔레트 생성기 가 활용)
• 그라데이션 자연 — RGB 그라데이션의 흙탕물 중간색 회피 (CSS 그라디언트 생성기 의 in oklch 옵션)

Gamut (색역) — 모든 색이 화면에 표시되진 않음

Gamut 은 한 색 공간이 표현할 수 있는 색의 범위. 다른 표준:

• sRGB (1996) — 30 년 표준. 거의 모든 화면 보장. 그러나 가시 광선의 약 35% 만 커버.
• Display P3 (2010+) — sRGB 보다 약 25% 넓음. 최신 애플 디스플레이·HDR TV 가 지원. 특히 빨강·초록의 vivid 함이 ↑.
• Rec. 2020 — Display P3 보다 더 넓음. 8K TV· HDR 영상 표준. 일반 화면은 아직 X.

OKLCH 의 chroma 값이 sRGB gamut 밖이면 — 사용자 화면이 P3 지원 시 vivid 노출, 미지원 시 가장 가까운 sRGB 색으로 clamp.

P3 컬러 CSS 사용

/* sRGB only */
.button { background: oklch(60% 0.2 25); }

/* P3 지원 시 더 vivid */
.button {
  background: oklch(60% 0.2 25);
  background: oklch(60% 0.3 25) display-p3;
}

/* @media query 로 P3 감지 */
@media (color-gamut: p3) {
  .button { background: oklch(60% 0.3 25); }
}

변환 — 한 색 공간을 다른 색 공간으로

HEX ↔ RGB 는 단순 진법 변환. RGB ↔ HSL 도 결정적 공식. RGB ↔ OKLCH 는 더 복잡 — gamma correction + Lab 색 공간 경유:

sRGB → linear RGB (gamma 2.2 역변환)
linear RGB → CIE XYZ
XYZ → OKLab (Lab 변환)
OKLab → OKLCH (rectangular → polar)

직접 시도 — 컬러 변환 가 HEX / RGB / HSL / OKLCH 모두 양방향 변환. 같은 색의 다른 표기를 나란히 보면 각 공간의 특징 체감.

접근성 콘트라스트 — luminance 차이

WCAG 콘트라스트 비율 (4.5:1 등) 계산의 핵심 = relative luminance. RGB 채널을 gamma 보정한 후 가중 합:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B
    (R/G/B 는 gamma 보정된 0-1 값)

G 채널 weight (0.7152) 가 압도적 — 인간 눈이 초록에 가장 민감. 그래서 같은 RGB 값이라도 G 가 많은 색이 밝게 보임.

색 대비 검사기 가 두 색의 비율 + WCAG AA/AAA 통과 여부 즉시 표시. OKLCH 의 L 값과 WCAG luminance 는 다른 지표지만 둘 다 "인지 밝기" 를 목표 — 대부분의 경우 일관.

실용 — 어떤 공간을 언제 쓰나

흔한 실수

1. RGB 그라데이션의 회색 중간색

linear-gradient(to right, red, blue) — RGB 보간이라 가운데가 어두운 회색. in oklch 추가 시 자연 보간:

background: linear-gradient(in oklch to right, red, blue);

2. HSL L 50% = 같은 밝기 가정

앞서 본 노랑 vs 파랑. 디자인 시스템 토큰을 HSL 로 만들면 hover state 효과가 색에 따라 다른 강도. OKLCH 로 가면 해결.

3. CSS color-mix 의 색 공간

color-mix(in srgb, red 50%, blue)   /* 회색 중간 */
color-mix(in oklch, red 50%, blue)  /* 자연 보라 */

color-mix() 의 첫 인자가 보간 공간. OKLCH 권장.

4. dark mode 의 단순 invert

filter: invert(1) 으로 다크 만들면 — RGB 반전이라 브랜드 색이 보색이 됨. 디자인 토큰 별도 다크 set 이 표준.

5. 채도 끝까지 (HSL S 100%) 의 fatigue

S 100% 는 거의 모든 색에서 눈 부담. UI 색은 보통 S 50-80% 가 안전 — 또는 OKLCH 에서 chroma 0.1-0.2 범위.

참고 자료

• CSS Color Module Level 4 — W3C
• Oklab/OKLCH 원조 글 — Björn Ottosson (2020)
• WCAG 2.1 Relative Luminance — W3C
• Display P3 색역 — WebKit Blog

요약

• RGB / HEX — 컴퓨터 친화, 인간 직관 X. 가장 호환성 ↑.
• HSL — hue/sat/lightness 분리로 직관적. 그러나 시각 lightness ≠ HSL L (노랑 vs 파랑).
• OKLCH — 인간 눈 정합 인지 lightness. 디자인 시스템·그라데이션 ·palette 의 새 default.
• Gamut: sRGB → Display P3 → Rec. 2020. P3 화면은 더 vivid.
• 접근성은 WCAG relative luminance 기준 — OKLCH L 과 비슷한 목표 지만 다른 공식.
• 실험 — 컬러 변환 / 색 팔레트 생성기 / 색 대비 검사기 / CSS 그라디언트 생성기.