Skip to content

OKLCH

About

  • OKLCH는 CSS Color Module 4 스펙에 추가된 새로운 컬러 선언 방법
    • oklch(45% 0.26 264 / 50%) : (Lightness Chroma Hue / Opacity)
  • OKLCH의 장점
    • rgb/hex에 비해서 읽기가 쉽다. hsl과 비슷하지만 밝기를 더 잘 인코딩
    • hsl과 달리 perceptual한 밝기를 사용하며, 콘트라스트가 예측 가능
    • wide-gamut P3 색상에 사용 가능 (애플장비 처럼 sRGB 모니터보다 더 많은 색상을 표시할 때)

OKLCH 색상이란 무엇인가

  • OKLCH 색상이란 무엇인가 | GeekNews
  • OKLCH는 인간의 시각 인지에 맞춘 최신 색상 모델로, 색상 간의 밝기, 채도, 색상 변화가 균일하게 느껴지는 특성을 가진 지각적 균등 색 모델
  • 구조는 Lightness(밝기), Chroma(채도), Hue(색상) 로 구성되며 기존 모델에 비해 일관된 색상 팔레트 구성이 가능함
  • 같은 밝기·채도를 유지하며 Hue만 변경해도 균일한 색 팔레트를 만들 수 있어 UI 디자인에 유리함
  • sRGB/HSL 대비 예측 가능한 명암 변화와 균일한 그라디언트를 제공하지만, 일부 경우 의도치 않은 색이 생성될 수 있음
  • Display-P3와 같은 최신 디스플레이에서 더욱 넓은 색상 표현이 가능하고, 최신 브라우저에서 CSS Color 4로 지원되며 sRGB 폴백 처리도 제공해 점점 웹 표준으로 자리 잡는 중

OKLCH 색상 모델 소개

  • OKLCH는 인지적 균일성(perceptually uniform) 을 목적으로 개발된 최신 색상 모델
  • 이 모델은 사람이 실제로 색을 인식하는 방식에 가깝게 동작하여, 디지털 디자인과 프론트엔드 개발에서 색상 다루기가 훨씬 편리해짐

색상 모델 기본 개념

  • 색상 모델은 색을 수학적으로 정의하고 표현하는 시스템임
  • 주로 사용되는 모델 예시: RGB, HSL, LCH, OKLCH, LAB, XYZ
  • 각각의 모델은 색상 표현 및 조작의 용이성을 결정함

색상 표기 방법 예시

  • oklch(0.55 0.18 260)
  • hsl(220 100% 50%)
  • rgb(0, 128, 255)
  • lch(60% 60 260)
  • lab(50 -10 -50)
  • color(xyz 0.18 0.19 0.6)
  • #1E90FF

Gamut(색 공간 범위)

  • Gamut은 해당 색상 모델이 표현할 수 있는 전체 색상 범위를 의미함
  • 대표적인 gamut: sRGB(웹 기본), Display-P3(최신 기기 지원)
  • 색 공간은 gamut 범위 외에도 white point, transfer function 등 다양한 속성을 가짐

OKLCH 구조

OKLCH와 LCH는 모두 Lightness, Chroma, Hue라는 세 가지 값으로 구성됨. OKLCH는 OKLab 색상 공간을 기반으로 함.

  • Lightness(명도/밝기) : 0~1 또는 0%~100%로 표현, 밝기의 균일한 변화를 보장함
  • Chroma(채도) : 색상의 강도, HSL의 Saturation(채도) 와 유사함
  • Hue(색상) : 0~360도 각도로 색상 표현

OKLCH의 장점과 활용

  • 일관된 밝기
    • OKLCH에서는 같은 밝기 및 채도 값에 hue만 다르게 하여 색상을 지정하면, 모든 색상이 유사한 밝기로 느껴짐
    • 기존의 sRGB나 HSL로는 색상별로 밝기나 채도가 일관되지 않게 보일 수 있음
    • 따라서 OKLCH는 지각적으로 균등한 색상 팔레트 제작이 쉬움
  • 예측 가능한 색상 명도 단계
    • OKLCH에서 밝기를 변화시키면, hue(색상)나 chroma(채도)의 변화 없이 다양한 색상 단계 생성이 가능함
    • HSL 등에서는 밝기가 변하면 색조가 변하는 드리프트 현상이 일어남
    • OKLCH는 밝기만 조정해도 일관된 색상 명도 단계 만들기가 가능함
  • 그라디언트(Gradients) 처리 방식
    • sRGB에서는 빨강, 초록, 파랑 값 간 보간이라 중간 지점이 탁해지거나 밝기 변화가 심함
    • OKLCH는 Lightness, Chroma, Hue 축을 따라 보간해 더 자연스러운 그라디언트 구현이 가능함
    • 단, Hue 값이 원형 구조이기 때문에, 예기치 못한 색상 변이가 생길 수 있음
    • 이를 방지하기 위해 OKLab로 직선 보간(interpolation)하여 더 예측 가능한 결과를 얻을 수 있음

색 공간 지원

  • sRGB로는 최신 디스플레이가 표현하는 넓은 색 공간 일부를 커버하지 못함
  • OKLCH를 사용하면 Display-P3 등 넓은 색 영역 지원 기기에서 더 선명한 색상 표현 가능
  • sRGB만 지원하는 기기에선 최대한 비슷한 색상으로 매핑됨

최대 Chroma(채도) 값

  • OKLCH는 실제 스크린이 표현할 수 있는 범위 밖의 색상도 수학적으로 지정 가능함
  • 예를 들어 oklch(0.7 0.4 40)와 같이 너무 큰 chroma 값은 실제 표시 불가능해 가까운 색상으로 클리핑됨
  • 최대 chroma 개념을 이해하고, 빛깔, 밝기, 선정 색 공간(sRGB, Display-P3)에 따라 적절한 값 설정이 중요함

브라우저 지원 및 폴백

  • OKLCH 색상은 CSS Color Module Level 4에서 도입되어, 최신 브라우저에서 대부분 지원됨
  • 구형 브라우저에서는 지원되지 않을 수 있어, @supports CSS 지시어로 폴백 값 설정 가능함

See also

Favorite site