HEX → OKLCH 변환기

OKLCH는 색을 지각 명도(L), 채도(C, 얼마나 선명한지), 색상 각도(H)로 나타냅니다. HSL과 달리 L이 같은 만큼 변하면 모든 색상에서 똑같이 밝아지거나 어두워 보여서, 팔레트, 호버 상태, 접근성 있는 명암비를 만들기에 가장 좋은 색 공간입니다. 이 변환기는 HEX, rgb(), hsl()을 CSS용 oklch()와 oklab()으로 바꾸고, OKLCH를 다시 HEX로 바꿉니다. sRGB 밖에 있는 색은 CSS Color 4 방식으로 안쪽으로 매핑하고, sRGB와 Display P3 색역에 들어가는지도 알려 줍니다.

사용 방법

1. 변환 방향을 고릅니다.
2. HEX, rgb(), hsl() 색상 또는 oklch(70% 0.2 150) 같은 oklch() 값을 입력합니다.
3. L, C, H와 oklab() 형태, 또는 색역 검사 결과가 있는 HEX를 확인합니다.
4. 색상이 많으면 일괄 입력란에 목록을 붙여 넣습니다.

계산식

선형 sRGB → LMS (3×3) → ∛ → OKLab (3×3) · C = √(a² + b²) · H = atan2(b, a)

행렬은 CSS Color 4와 같은 Ottosson의 행렬입니다. 색역 밖의 색은 명도 L과 색상 H를 고정한 채 단순 클리핑이 색을 ΔEOK 0.02 미만으로만 바꿀 때까지 채도를 낮추는 방식(CSS Color 4 알고리즘)으로 매핑합니다.

예시

순수한 빨강 #FF0000은 oklch(62.8% 0.2577 29.23), oklab(62.8% 0.2249 0.1258)이며 CSS Color 4 명세에 실린 값입니다. 반대로 oklch(70% 0.4 150)는 Display P3로도 표현할 수 없을 만큼 선명한 초록이어서, 색역 매핑하면 #00C248이 되고 채널을 그냥 자르면 더 밝고 거친 #00D600이 됩니다. oklch(70% 0.2 150)은 P3에는 들어가지만 sRGB에는 들어가지 않으며, 잘라 낸 값 #00BF54는 이미 허용 오차 안에 있습니다.