OKLCH 컬러 피커

OKLCH는 밝기·채도·색상이 눈이 기대하는 대로 움직이도록 CSS Color 4가 도입한 색 공간입니다. 나머지 둘을 고정한 채 색상만 돌리면 체감 밝기가 그대로 유지되는데, HSL에서 같은 일을 하면 그렇지 않습니다. 이 피커는 세 채널과 알파를 모두 조절할 수 있게 하고, oklch() 문자열, sRGB 헥스·rgb·hsl 등가값, 밑에 깔린 OKLab의 a/b 좌표, 그리고 요청한 색이 sRGB 모니터가 표시할 수 있는 범위 밖일 때의 경고를 함께 보여 줍니다.

HSL과의 차이는 미묘하지 않고, 한 가지 비교로 분명해집니다. 순수한 노랑과 순수한 파랑은 HSL에서 둘 다 밝기 50%에 있습니다. HSL 색상환을 돌려 만든 팔레트에서 어떤 칸은 눈부시고 어떤 칸은 사라져 버리는 이유가 이것입니다. OKLCH에서 같은 두 색은 밝기 0.97과 0.45에 놓입니다. 실제로 보이는 것과 맞아떨어지는 숫자입니다. 이 척도는 기하가 아니라 지각에 기준을 두고 있고, 중간 회색 #808080이 0.50이 아니라 0.60 근처로 나오는 이유도 같습니다. sRGB의 중간값은 절반보다 밝습니다.

밝기는 0에서 1, 색상은 0에서 360이고, 채도에는 고정된 최댓값이 없습니다. 채도는 회색으로부터의 절대적인 거리이고, 그중 얼마를 디스플레이가 실제로 재현할 수 있는지는 디스플레이에 달려 있습니다. 색역 경고가 나오는 근원이 이것입니다. sRGB가 닿을 수 없는 채도를 요청해도 브라우저는 실패하지 않습니다. 보여 줄 수 있는 색으로 사상(mapping)하는데, CSS 명세는 밝기와 색상은 유지한 채 채도를 낮추는 방식으로 하라고 정합니다. 그래서 돌아오는 색은 덜 선명하지만 밝기와 색상은 맞습니다. 광색역 화면은 표준 화면보다 요청한 것에 더 가깝게 보여 주므로, 진하게 포화된 OKLCH 색은 모든 방문자에게 같은 색이 아닙니다.

실무적인 소득은 색 단계(scale)를 만들 때 나옵니다. 색상과 채도를 정하고 밝기만 균등하게 단계를 주면, 간격이 고르게 보이는 램프가 나옵니다. 헥스로 손수 맞추면 한참 씨름해도 여전히 울퉁불퉁해지는 바로 그 작업입니다. 여러 색상에 걸쳐 밝기를 일정하게 유지하면 시각적 무게가 동등한 범주형 팔레트가 나오는데, 차트 범례에 정확히 필요한 것이자 HSL이 내어 줄 수 없는 것입니다.