OKLCH 색상이란 무엇인가

 (jakub.kr)
11P by GN⁺ | ★ favorite | 댓글 1개
  • 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 지시어로 폴백 값 설정 가능함 
    @layer base {  
  :root {  
    /* sRGB hex */  
    --color-gray-100: #fcfcfc;  
    --color-gray-200: #fafafa;  
    --color-gray-300: #f4f4f4;  

    @supports (color: oklch(0 0 0)) {  
      /* OKLCH */  
      --color-gray-100: oklch(0.991 0 0);  
      --color-gray-200: oklch(0.982 0 0);  
      --color-gray-300: oklch(0.955 0 0);  
    }  
  }  
}
  • 지원되는 브라우저에선 OKLCH, 미지원 브라우저에선 sRGB(hex) 색상이 적용됨

oklch.fyi 도구

  • oklch.fyi 는 OKLCH 색상 팔레트 생성, CSS 변수 변환 등 OKLCH 관련 기능을 제공하는 웹 도구임
  • 디자인 시스템, 테마 개발 등에서 OKLCH 색상 활용을 쉽게 도와줌

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견

  • “Better Gradients”라는 기능에 대해 의심이 생김. OKLCH는 극좌표 공간이며, 이 공간에서 Hue는 각도 역할을 함. 각기 다른 두 지점의 색상을 보간할 때는 원의 가장자리를 따라 이동하게 됨. 예를 들어 linear-gradient(in oklch, #f0f, #0f0) 코드를 쓰면 초록에서 보라로 이어지는 동안 눈에 띄게 색상 범위 밖으로 나가게 됨. 다른 방향으로 원을 돌리면 linear-gradient(in oklch longer hue, #f0f, #0f0)와 같이 청록이나 아쿠아를 지나감. 이러한 경로는 지각 기반 색상 공간이 sRGB나 인간이 지각 가능한 색상 영역의 경계, 즉 Gamut의 끝부분을 다루기에 정말 불편함을 보여줌. 실제로, 아주 살짝만 값이 달라져도 색상이 범위를 벗어남. 이를 해결하기 위해 여러 가지 알고리즘이 있으나 지각적 균일성은 희생됨. 예를 들어 그라디언트 상의 빨강이 유난히 어두워짐. 만약 더 좋은 그라디언트를 원하고 지각적 균일성이 중요하다면, 사실 Oklab 보간이 기본이어야 함. Oklab은 원을 가로질러 직선 경로로 보간하며, 필요하다면 회색도 지나감(linear-gradient(in oklab, #f0f, #0f0)). 이 방법이 자주 보는 sRGB 보간의 어두워짐 현상도 없애주고, magenta에서 lime까지 자연스런 그라디언트를 만듦. 참고로 Tailwind v4가 베타에서는 sRGB 대신 Oklch를 썼다가 최종 릴리즈 때는 Oklab을 더 안전한 기본값으로 선택함

    • 브라우저에서 sRGB로 색상을 보간하는 방법은 사실 버그와 같다고 생각함. sRGB는 로그 스케일의 인코딩이므로, 원래 명세상 색상 보간을 sRGB에서 직접 하지 말고 선형 RGB로 변환하여 보간해야 함

    • 이 글이 수정되었으니 내 코멘트는 무시해도 됨. 그래도 Oklab 보간을 기본으로 해야 한다는 데 동의함. 글에서도 “더 나은 그라디언트”에 대해, OKLCH의 hue가 원형이어서 예상치 못한 경로를 보일 수 있다고 했음. 이런 문제를 피하려면 많은 도구들이 OKLAB을 쓰고, Oklab은 직선 경로로 일관된 결과를 준다고 있음

    • 사실 CIE LAB도 같은 역할을 하면서 표준으로 이미 존재함 (CIE LAB 위키피디아)
      W3C의 검토 자료

    • 매우 유익한 설명을 듣게 되어 고마움. 내가 이 글을 쓴 사람임. 더 명확하게 설명할 수 있게 내용을 수정하겠음

    • 스펙트럼 반대편에 있는 두 색으로 그라디언트를 만드는 경우는 좀 극단적인 사례임. 어떻게 보여야 할지 정답도 없고, 실제로 디자인에서 그런 그라디언트가 필요할 일도 드물다고 생각함. 보통 디자인에서 그라디언트를 쓸 때는 중간 색상을 직접 고르게 됨

  • OKLCH와 관련해 oklch.com에서 직관을 쌓는 데 도움이 되었음. 단, hue 값이 HSL의 hue와 다르고, hue와 lightness 별로 chroma 최대치가 달라지는 점에 주의해야 함. 이건 버그가 아닌 사람 눈과 디스플레이 특성을 반영한 것임. HSL과 달리 HSL은 최대치가 항상 일정하나, 색 의미는 일관되지 않음. CSS의 OKLCH가 좋은 점은 수식 형태로 조작할 수 있는 것임. 예를 들어 oklch(from var(--accent) calc(l + .1) c h)처럼 쓸 수 있음. 하지만 실제로 수식을 잘 사용하려면 컬러 이론이 필요하거나 테스트를 해봐야 함. 예를 들어 그림자는 간단히 lightness만 바꾸면 된다고 생각했으나, 실제로 hue도 바뀌어야 함. OKLCH 그라디언트가 무조건 최고라는 것은 아님. 비슷한 hue를 쓸 때 색이 고르게 보이긴 하지만, 실제로 빛이 섞일 때 물리적으로 어떻게 변화하는지까지 신경 쓴다면 XYZ 색상 공간이 필요함. 관련해서 MDN color-mix 문서 참고하면 좋음. 참고로 ‘ok’는 진짜 단순히 OK라는 단어에서 온 것임. 의미상 기존 LCH가 문제(OK하지 않음)가 있었던 데서 비롯됨

    • CSS의 OKLCH에서 수식을 쓸 수 있다는 점이 좋다고 했지만, 사실 상대 색상 조작은 모든 CSS 색상 공간에서 쓸 수 있음. 예를 들어 background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));처럼 사용 가능함

    • OKLCH와 상대 컬러 덕분에 스타일시트에 하드코딩하는 색상 수를 많이 줄일 수 있었음
      예시 CSS 변수

  • 몇몇 비판점은 이미 언급되었지만 OKLCH와 CSS 적용 방법 소개로서 꽤 괜찮은 글이라고 생각함. 부연 질문으로, 최근 블로그 글에 날짜 표기를 하지 않는 트렌드에 대해 궁금해짐. 특히 “OKLCH는 새 색상 모델이다”라는 문구가 앞으로 빨리 구식이 될 거라 생각함. 메인 사이트에는 “2025년 8월”만 써놔서 날자 표기를 의도적으로 안 하는 것처럼 느껴짐
    관련 사이트

    • 정확히 설명할 순 없지만, 날짜 없는 글은 심각한 문제라고 생각함. 이런 경향이 요즘 트렌드인지는 모르겠으나, 날짜가 없으면 얼마든지 옛날 글로 착각할 수 있음. 가끔 댓글에 남아있는 타임스탬프로 글 연도를 추측하는데, 아예 댓글도 지원하지 않는 블로그도 많아서 재방문하고 싶은 마음이 사라짐. (OP 메인 페이지에 “디테일에 집착하지 않는다”고 써 놓았는데 디자인 미적 요소에만 집착하고 기능성은 놓친 것이 아이러니함)

    • 글에 날짜가 없는 경우, 나는 HTTP로 HTML 문서를 받으면서 Last-Modified 헤더를 참고하려고 함. 하지만 작성자가 날짜에 신경 안 쓰는 경우가 많음. 블로그라는 단어에서 알 수 있듯 본래는 [web]-log로서 타임스탬프가 핵심 요소임을 이해하지 않는 것 같음. 참고로 Last-Modified 값은 그 리소스(HTML)의 마지막 수정 시각을 나타냄. 서버가 캐시 구성을 안 하고 백엔드에서 매번 리렌더링하면 날짜가 항상 갱신되는 현상 발생
      이 문제 예시

    • 오래된 콘텐츠가 검색 엔진에서 등급이 떨어지는 것을 막으려는 SEO 목적이 큼. 참 번거로운 트릭임

    • 구글과 SEO 때문임

  • OKLCH 색상이 HSL과 비교해 일관된 파란색을 준다고 했지만, 실제로는 OKLCH의 밝기 변화가 녹색 쪽으로 크게 이동함. Perceptual intensity를 일정하게 맞추는 것은 확실한 장점이 있지만, 여기서 주장하는 효과가 과장되었다고 느껴짐

    • 이 색상의 Hue 차트를 보면 이유를 알 수 있음
      OKLCH 색상 차트
      밝기를 높이면 해당 색상의 Hue 밴드 한계치를 넘어, 디스플레이 상에서 재현 가능한 밝은 파란색의 한계 때문에 색이 Cyan(청록) 쪽으로 이동함. OKLCH는 그라디언트에서 밝기를 조정할 때 Hue 불변이 아니라 Saturation 불변임. 이런 효과가 좋은지는 미적 취향의 문제인데, 오랫동안 Hue가 일정하고 desaturated한 웹 컬러만 써왔기에 “어느 쪽 타협점을 고를지 선택할 수 있다”는 점이 신선함
      관련 해커뉴스 토론
      최근 과학계에서 더 깊은 파란색 LED도 발명됐으니, 10~20년 후엔 Display P3를 대체하는 기술이 오면 이런 Cyan 시프트 현상 없이 더 정확한 파랑 그라디언트를 표현할 수 있을 것이라고 기대함. 그 때까지는 디자인적으로 보기 좋은 게 정답임.
      참고로 앞으로의 색상 공간 설계는 Hue와 Saturation을 반드시 이분법적으로 선택하는 대신 디스플레이의 한계까지 Saturation 불변, 한계점에서 점진적으로 Hue 불변으로 전환하면 어떨까 생각함. 하지만 이것은 색상 프로파일(IDCv4) 제약상 매우 어려운 일임. 그래도 실험적인 DisplayCAL 타깃으로는 재미있을 듯함

    • 내 디스플레이에선 예시에서 green shift가 전혀 안 보임. 혹시 화면 캘리브레이션이 맞지 않은 건 아닌지 궁금함

    • 동의함. 색상이 완전히 파랑에서 시안(청록)으로 바뀜. 만약 OKLCH가 제대로 구현됐다면, 나는 절대 쓰고 싶지 않음. hue 계산에 뭔가 심각한 문제가 있어 보임. HSL/HSV는 지각적 lightness에 문제가 있지만 hue 자체는 항상 일정해서 보정이 필요 없음

    • 색상 과학을 잘 모르고 주관적인 의견일 수 있지만, OKLCH 색상의 오른쪽 끝은 최악이라도 blue-green(푸른-초록) 또는 그냥 light blue(연한 파랑) 정도로 느껴짐. 반면, HSL의 두 가장 밝은 쪽 색상은 blue로 보이지 않고, 차라리 오른쪽에서 두번째는 light purple(연보라), 맨 오른쪽은 거의 회색 같음. 캡션에서는 HSL의 어두운 쪽이 grayish라고 했지만 실제로는 OKLCH와 HSL 모두 leftmost(가장 어두운 쪽)는 파랑 느낌임. macOS Digital Color Meter로 찍어 보면, 오른쪽 끝의 OKLCH와 HSL 모두 green값이 거의 같음(226과 227, sRGB로는 228과 227)

  • 이 주제에 대해 더 좋은 글을 추천함
    Evil Martians의 OKLCH in CSS: Why quit RGB, HSL 글
    사용해 볼 수 있는 OKLCH 변환 툴
    이전 해커뉴스 토론(6개월 전, 30개 댓글)

  • OKLCH는 OKLab(지각 기반 균일 색 공간)을 기반으로 만들어졌으며, Lightness(명도), Chroma(채도), Hue(색상)을 조절하는 모델임. ‘OK’는 만든 사람이 “그럭저럭 잘 동작한다”고 답했던 것에서 따온 명칭임

    • OKLCH의 “OK”가 실제로는 “Ottossons kulör(스웨덴어로 Ottosson의 색)”의 축약이라고 예상함. 창시자가 겸손하게 OK라 했을 수 있음

  • 컬러와 텍스트/로고 작업을 할 때는 대비와 가독성도 꼭 고려해야 한다고 생각함
    APCA Contrast

    • 위 사이트는 최신 대비 알고리즘(APCA, 아직 출시 전 WCAG 3 표준의 공식 알고리즘)을 쓸 때 좋지만, 현재 많은 산업에서는 WCAG 2이 기준이므로 법적 요구사항에도 주의해야 함.
      대비 체크(WCAG 2)
      그 외에도 다양한 도구 존재함

  • 내 머릿속에서 OKLCH라는 이름이 "Oklachroma"로 자연스럽게 해석되었음

  • OKLab 색상 공간을 소개한 최초의 블로그 글이 있는데, 역사적 관점에서 흥미로움
    OKLab 원본 포스트

  • 왜 OKLCH 색상 공간으로 변환하는 공식이 문서화돼 있지 않은지 궁금함. 구글링을 해보면 Gist 하나 밖에 없고[0], Oklab에 대한 위키피디아는 있음[1]
    Gist 변환 공식 예시
    Oklab 위키피디아

    • 변환의 핵심은 Oklab과 sRGB 간의 매트릭스에 있음. OKLab-OKLCH 변환 자체는 좌표변환에 불과해, 위키피디아에도 나와 있음

    • OKLCH와 OKLab는 같은 색상 공간임. 다만 직교좌표(OKLab) vs. 극좌표(OKLCH)로 표현 방식이 다름

답변달기