OKLCH: 인간 친화적인 CSS의 색상 모델

색상 모델(color model)이란 색상을 나타내기 위해서 사용되는 모델 또는 시스템을 뜻합니다.

아주 옛날부터 많이 사용되었던 색상 모델인 RGB는 빛의 삼원색인 빨강, 초록, 파랑의 혼합으로 색상을 나타내는데 16진수 코드를 사용하기 때문에 직관성이 떨어집니다. RGB 이후에 등장한 HSL 모델은 색조(Hue), 채도(Saturation), 밝기(Lightness)로 색상을 표현하는데 색상 차이를 수학적으로 계산합니다. 그래서 HSL에서는 두 색상이 수치상으로는 대비가 커 보이지만 실제 사람의 눈으로 봤을 때는 대비가 낮은 치명적인 단점이 있었습니다.

비교적 최근에 CSS에 도입된 OKLCH는 이러한 전통적인 색상 모델보다 가독성과 정확도와 뛰어난 것으로 알려져잇습니다. 밝기(Lightness), 채도(Chroma), 색조(Hue)으로 이루어진 OKLCH 모델은 사람이 실제 눈으로 색상을 인식하는 방식에 더 가깝게 설계되었습니다. 뿐만 아니라, OKLCH 모델을 구성하는 3가지 요소는 서로 독립적이라서 기존 색상 모델보다 훨씬 정밀하게 색상을 제어하고 대비를 조정을 할 수 있습니다.

이번 포스팅에서는 OKLCH이 기존 색상 모델과 어떻게 다른지 알아보고, 간단한 실습을 통해서 OKLCH의 특장점을 살펴보겠습니다.

📝 포스팅: https://www.daleseo.com/css-oklch/