OKLCH 완벽 정리: 눈에 보이는 대로 작동하는 색상 포맷

OKLCH란

OKLCH는 Björn Ottosson이 2020년에 발표한 지각 색 공간 Oklab의 극좌표 형태입니다. 숫자 세 개로 이루어집니다. L은 지각 명도로 0(검정)부터 1 또는 100%(흰색)까지입니다. C는 크로마, 즉 색의 양으로 0(회색)부터 화면이 표시할 수 있는 가장 선명한 색의 약 0.37까지입니다. H는 0도부터 360도까지의 색조 각도입니다.

같은 색을 여러 포맷으로 쓰면 아래와 같습니다. 모든 값은 PickShade가 실시간으로 계산하므로 그대로 복사해 쓰면 됩니다.

OKLCH가 HSL보다 나은 이유

HSL의 명도는 공식일 뿐, 눈으로 느끼는 밝기가 아닙니다. hsl(60 100% 50%)은 밝은 노랑이고 hsl(240 100% 50%)은 어두운 파랑인데, 둘 다 명도가 50%라고 표시됩니다. HSL로 팔레트를 만들면 색조마다 일일이 손으로 보정해야 합니다.

OKLCH에서는 L이 같은 색이 같은 밝기로 보입니다. L과 C를 고정하고 H만 돌리면 균형 잡힌 색조 세트를, H와 C를 고정하고 L을 단계별로 바꾸면 깔끔한 셰이드 스케일을 얻을 수 있습니다. Tailwind CSS v4가 기본 팔레트 전체를 OKLCH로 정의한 이유가 바로 이것입니다.

명도로 대비도 예측할 수 있습니다. 배경과 L 차이가 대략 0.4 이상인 텍스트는 보통 읽기 쉽기 때문에, 접근성을 고려한 색 선택을 훨씬 쉽게 판단할 수 있습니다.

CSS 문법

명도는 퍼센트 또는 0부터 1까지의 숫자로 씁니다. 크로마는 숫자, 색조는 도 단위의 각도입니다. 투명도는 슬래시 뒤에 붙입니다.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

브라우저 지원

oklch()는 현재 모든 브라우저에서 작동합니다. Safari는 15.4부터, Chrome과 Edge는 111부터, Firefox는 113부터 지원합니다. 사용자의 90%를 훌쩍 넘는 범위입니다. 아주 오래된 브라우저까지 지원하려면 OKLCH 값 바로 앞 줄에 HEX 대체 값을 넣으세요.

color: #ff5733;
color: oklch(68% 0.21 33.7);

크로마 한계와 색역

OKLCH로는 어떤 화면도 표시할 수 없는 색까지 표현할 수 있습니다. 최대 크로마는 명도와 색조에 따라 달라집니다. 선명한 노랑은 명도가 높을 때만, 선명한 파랑은 명도가 낮을 때만 가능합니다. 값이 sRGB나 Display P3 색역을 벗어나면 브라우저가 색역 안으로 되돌리는데, 이때 색이 달라질 수 있습니다.

PickShade는 sRGB를 벗어난 색을 표시하고, 명도와 색조는 유지한 채 크로마만 낮춰 색역 안에 들어오는 가장 가까운 색을 알려 줍니다. CSS Color 4가 권장하는 방식과 같습니다.

HEX를 OKLCH로 변환하는 방법

변환은 HEX에서 sRGB로, sRGB에서 선형 광으로, 선형 sRGB에서 LMS 원뿔 세포 공간으로, 세제곱근을 거쳐 행렬로 Oklab을 구하고, 마지막으로 Oklab을 극좌표로 바꾸는 순서로 진행됩니다. 손으로 계산하면 틀리기 쉬우니 변환기에 색을 붙여 넣고 결과를 복사하세요.

자주 묻는 질문