아직도 새로운 color model 이 도입되는군요

shadcn/ui 강의를 보다 보니 tailwindcss 4.0 을 쓰게 되었습니다.

색상변경을 하려고 보니 다음과 같이 처음 보는 형식으로 color 들이 정의되어 있었습니다.

@theme {

--color-red-50: oklch(0.971 0.013 17.38);

--color-red-100: oklch(0.936 0.032 17.717);

--color-red-200: oklch(0.885 0.062 18.334);

대체 이건 뭔가 해서 찾아 보니 css 표준으로 새로 들어온 형식입니다.

기존의 HSL 형식이 가진 문제를 개선했다고 합니다.

HSV 형식은 Lightness(V) 값이 같더라도 노란색에서 더 밝아지고, 파란색에서 더 어두워지는 문제가 있었다고 합니다. Lightness 값이 같으면 밝기가 일정하도록 한게 LCH 라고 합니다.

회색조로 바꿔보면 아래 그림과 같이 HSV는 같은 lightness 값일 때도 H값에 따라 명도 차이가 있고, LCH는 균일한 결과가 나옵니다. (그래서 okLCH에서는 L값이 회색조 명암값입니다. Y 채널만 뽑아서 쓰면 흑백 TV에 표시가 가능했던 컬러 방송 포맷 Y’UV와 비슷한 개념인데? 라는 생각이 듭니다.)

근데 왜 ok 가 앞에 붙었는지는 모르겠습니다. (okky 와 무슨 관련이?)

참고자료: LCH is the best color space for UI | Deep dive into color theory | Atmos