OKLCH는 TailwindCSS 4, shadcn/ui 등 최신 프론트엔드 생태계에서 도입하고 있는 OKLab 기반의 색상 표현입니다.
OKLCH는 CSS에서 다음과 같이 작성될 수 있으며 명도(Lightness), 채도(Chroma), 색조(Hue)를 이용해 oklch(l c h) 형태로 표현됩니다.
color: oklch(0.7 0.15 200);이는 기존의 HSL, LCH 방식과 유사하지만 큰 차이점이 존재합니다.
특징
시각적으로 일관된 밝기와 채도를 제공
OKLCH에서 동일한 명도 값을 가진 색상은 실제로도 비슷한 밝기로 보입니다.
hls()
아래는 hsl()을 사용해 같은 명도와 채도를 적용한 색상입니다.
시각적으로 같은 명도와 채도가 적용되지 않아 접근성 문제가 발생할 수 있습니다.
좌: hsl(260 100 50), 우: hsl(100 100 50)
oklch()
아래는 oklch를 사용해 같은 명도와 채도를 적용한 색상입니다.
채도와 명도가 일치할 경우, 시각적으로 비슷한 밝기와 채도를 제공합니다.
좌: oklch(0.49 0.3 280), 우: oklch(0.49 0.3 140)
이처럼 OKLCH를 사용하면, 모든 색상을 디자이너가 직접 결정하고 접근성이나 다크/라이트 모드를 일일이 고려해야 했던 기존 방식과 달리,
밝기와 채도에 대한 규칙만 정하면 필요한 몇 가지 색상만으로도 디자인 시스템에 필요한 다양한 색상을 쉽게 생성할 수 있습니다.
더 넓은 색 영역 지원
최근 디스플레이는 sRGB를 넘어 P3, HDR 등 더 넓은 색역을 지원합니다.
기존의 sRGB 기반 색상 시스템만으로는 최신 디스플레이의 색을 온전히 표현할 수 없기 때문에, OKLCH는 더 나은 선택이 될 수 있습니다.
CSS 지원
OKLCH는 위의 장점들과 함께 CSS에서 네이티브로 사용할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility
