OKLCH로 더 나은 색상 시스템 만들기

우리가 오랫동안 사용해온 HEX, RGB, HSL은 모니터를 위한 색상 모델입니다. 하지만 사람의 눈이 색을 인식하는 방식과는 차이가 있어서 "지각적으로 균일하지 않다"는 문제가 있습니다. OKLCH는 이 문제를 해결하는 현대적인 CSS 색상 함수입니다.

기존 색상 모델의 문제점

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색을 표현합니다. 얼핏 직관적으로 보이지만, 실제로 동일한 L 값이라도 색조에 따라 밝기가 다르게 느껴집니다.

예를 들어 노란색 hsl(60, 100%, 50%)과 파란색 hsl(240, 100%, 50%)는 L값이 같아도 노란색이 훨씬 밝게 보입니다.

이런 불균일함은 버튼 hover 상태, 다크모드 색상 팔레트 설계 시 예측 불가능한 결과를 낳습니다.

OKLCH란?

OKLCH는 L(밝기, Lightness), C(채도, Chroma), H(색조, Hue) 세 가지 축으로 색을 표현합니다. OKLab 색상 공간을 기반으로 하며, 사람의 시각적 인식과 수학적 값의 변화가 일치하도록 설계되었습니다.

/* oklch(밝기 채도 색조) */
.button {
  background-color: oklch(65% 0.25 290); /* 보라색 계열 */
  color: oklch(99% 0 0);                 /* 거의 흰색 */
}

항목	HSL	OKLCH
지각 균일성	❌ 낮음	✅ 높음
밝기 예측성	❌ 색조마다 다름	✅ 항상 일관
다크모드 설계	😓 어려움	😊 쉬움
브라우저 지원	✅ 전부	✅ 모던 브라우저

다크모드 색상 시스템에 적용하기

OKLCH의 진가는 CSS 변수와 함께 쓸 때 드러납니다. L 값만 조정하면 자동으로 밝기가 일관되게 바뀝니다.

:root {
  --primary:    oklch(65% 0.25 290);
  --bg:         oklch(98% 0.01 240);
  --text:       oklch(25% 0.05 240);
  --surface:    oklch(99% 0.005 240);
}

[data-theme="dark"] {
  /* L 값만 뒤집으면 됩니다 */
  --primary:    oklch(70% 0.25 290);  /* 조금 더 밝게 */
  --bg:         oklch(15% 0.01 240);
  --text:       oklch(88% 0.03 240);
  --surface:    oklch(22% 0.01 240);
}

HSL로 같은 작업을 하면 각 색조별로 다른 L 값을 실험해가며 맞춰야 하지만, OKLCH는 수학적으로 균일하기 때문에 공식처럼 적용할 수 있습니다.

채도(Chroma) 다루기

OKLCH의 C(Chroma)는 색의 선명함을 나타냅니다. 0에 가까울수록 무채색, 높을수록 선명합니다. 단, 채도의 최대값은 색조마다 다릅니다 — 이 점이 HSL의 S와 다릅니다.

/* 같은 보라색 계열에서 채도 변화 */
.muted   { color: oklch(65% 0.05 290); } /* 흐린 보라 */
.normal  { color: oklch(65% 0.15 290); } /* 보통 보라 */
.vivid   { color: oklch(65% 0.30 290); } /* 선명한 보라 */

실전 팁: 색상 팔레트 한 줄로 만들기

OKLCH와 CSS calc()를 조합하면 반복 없는 팔레트를 만들 수 있습니다.

:root {
  --hue: 290;  /* 이것만 바꾸면 전체 팔레트 색조 변경 */

  --color-100: oklch(95% 0.05 var(--hue));
  --color-300: oklch(80% 0.15 var(--hue));
  --color-500: oklch(65% 0.25 var(--hue));
  --color-700: oklch(45% 0.20 var(--hue));
  --color-900: oklch(25% 0.10 var(--hue));
}