웹 기술이 발전함에 따라 CSS를 이용한 색 표현 기술 또한 발전하고 있다. 이제 정적인 색 하나를 표현하는 것을 넘어, 색을 재사용하거나 변화를 주는 등, 더 동적으로 사용하고 있다. 그리고 sRGB를 넘어 DCI-P3 색영역을 지원하는 모니터가 출시하고 있어, 더 다양한 색을 지정할 필요 또한 생겼다.

Lab & LCH

Lab는 CIE XYZ(또는 CIE 1931 XYZ로, CIE RGB 색 공간을 선형변환하여 만들어짐)를 비선형 변환하여 만들어진 색 공간으로, XYZ 색 공간보다 균일한 색 체계를 목표로 한다. 여기서 '균일'하다는 것은, 색 공간에서 같은 거리만큼 떨어진 색채는 인간의 눈에 같은 크기만큼의 색 차이로 인지되는 것을 뜻한다. 이를 위해 휘도(밝기)를 L축으로 독립하고, 두 축 a, b의 조합을 통해 색을 표현한다. a는 초록색~빨간색의 정도를, b는 파란색~노란색의 정도를 나타낸다.

LCH는 Lab에서의 a, b 데카르트 좌표계를 C, H 극좌표계로 나타낸 것이다. 여기서 C는 채도, H는 색조를 나타낸다.

LCH는 푸른색 영역(색조 270도~360도 사이의 영역)에서의 채도 변경이 의도치 않은 색조 변경을 일으키는 문제가 있다. 이것은 흰색에서 푸른색으로의 그라데이션을 만들어봐도 쉽게 확인할 수 있다.

OKLab & OKLCH

OKLab와 OKLCH는 앞서 언급한 Lab와 LCH의 문제를 해결하기 위해 2020년에 만들어졌다.

OKLCH는 RGB나 HEX에 비해 사람이 읽기 더 쉽고, 기존 sRGB 색영역을 넘어 DCI-P3 및 그 밖의 색상에도 사용할 수 있다.

HSL(hue, saturation, lightness)과 비슷하게 작동하지만 HSL은 색조 변경 시 밝기가 변하는 문제가 있다. OKLCH는 인지가능한 밝기와 예측가능한 대비를 통해 더 좋은 접근성을 갖는다.

OKLCH on CSS

CSS에서 oklch()는 OKLCH 색상 공간에서 주어진 색을 표현한다. 표기법은 oklch(L C H \[/ A\]) 이다.

oklch(40% 0.2 30)

oklch(60% 0.3 20 / .5)

L은 인지된 밝기를 나타낸다. 0~100%의 값을 가지며, 0%는 검정(가장 어두움)을, 100%는 흰색(가장 밝음)을 나타낸다. "인지된"이란 뜻은, HSL의 L과 달리 예측가능한 대비를 가짐을 의미한다.

C는 채도를 나타낸다. 0이상의 값을 가지며 이론상 최대값은 없다. 하지만 색영역에 따라 실질적 최대값은 존재하며, sRGB 및 DCI-P3 환경에선 0.37 정도가 최대값이 된다.

H는 색조를 나타낸다. 0~360의 값을 가진다.

A는 투명도를 나타낸다. 0~1의 값 또는 이에 대응되는 0~100% 값을 가진다.

oklch()는 아직 지원이 제한적이지만 폴리필이 있고, Palette Generator와 Color Picker & Converter도 있다.

한편, 현재 Safari가 oklch를 지원하긴 하지만 색 영역 매핑에 부정확한 클리핑을 제공하고 있다. 따라서 이 문제가 해결될 때까지는 수동 매핑이 권장된다.

DCI-P3

현재 우리가 사용하는 모니터 대부분은 sRGB라고 부르는 영역 내의 색만 표현할 수 있다. 하지만 일부 최신 모니터는 조금 더 넓은 색 영역인 DCI-P3을 지원하며, 미래에는 DCI-P3가 더 보편화될 것으로 보인다. 그런데 rgb(), hsl(), hex로는 DCI-P3 색상을 지정할 수 없다. color(display-p3 1 0 0) 형식을 사용할 수는 있지만 가독성 문제를 갖고 있다. oklch()는 적절한 해결책이 될 수 있다.

CSS 색상 조작

HSL이 고정된 색을 지정하는 것에는 큰 문제가 없을지라도, 색 변경 및 비교에는 적절하지 않다.

HSL의 문제는 원통형 색 공간을 가진다는 것이다. 우리가 인지하는 색 영역은 저렇지 않다. 각 색 공간을 흑백처리한 그림을 보면, HSL은 색조의 변경에 따라 밝기가 달라짐을 알 수 있다.

다가오는 CSS Color 5에서는 하나의 색을 가져와 각 속성을 수정하여 다른 색으로 변경할 수 있다. 여러 색상 형식을 사용하는 것도 좋지만, 코드의 유지보수성을 위해 하나의 색상 형식으로 통일하는 것이 좋을 수 있다. 이때, 색 변경의 측면에서 보면 색조가 대비 및 채도와 독립적인 OKLCH가 적합하다.