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

색상 모델(color space)은 웹 디자인에서 아주 중요한 역할을 합니다. CSS에서는 기존에 RGB나 HSL 모델이 주로 사용되었지만, 최근에는 새로운 색상 모델인 OKLCH가 도입되어 점점 많은 프로젝트에서 채택되고 있습니다.

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

OKLCH 색상 모델이란?

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

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

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

OKLCH 기본 사용법

CSS에서 OKLCH를 사용하려면 색을 지정할 때 oklch() 함수를 사용해야합니다. 이 함수는 아래 3개의 값을 인자로 받습니다.

Lightness: 밝기를 퍼센트로 나타내며, 100%에 가까울수록 밝습니다.
Chroma: 채도(색상의 강도)를 나타내며, 0에 가까울수록 무채색이 됩니다.
Hue: 색조를 0~360도로 나타내며, 색의 종류(빨주노초파남보…)를 결정합니다.

예를 들어, OKLCH를 사용하여 글자는 빨간색, 배경은 초록색, 경계는 파란색으로 스타일해보겠습니다.

.oklch {
  color: oklch(62.8% 0.25768330773615683 29.2338851923426);
  background: oklch(86.64% 0.2947552610302938 142.49533888780996);
  border: 5px solid oklch(45.2% 0.31313625765874376 264.05300810418345);
}

사실 이렇게 고정된 색상을 지정하기 위해서 OKLCH를 사용할 때는 기존 RGB나 HSL 대비 큰 장점이 느끼기 힘든데요. 자칫하면 오히려 코드 양만 늘어나는 느낌이 들 수도 있죠. 😅

참고로 OKLCH Color Picker & Converter 온라인 도구를 사용하면 아주 편하게 기존 색상 모델과 OKLCH 간 색상 변환을 할 수 있습니다.

OKLCH 고급 사용법

OKLCH 모델은 색상 간의 관계를 더 정확하게 표현하므로, 여러 색상을 조합 또는 대비하거나 명암이나 채도를 세밀하게 조정을 할 때 빛을 발휘합니다.

예를 들어, 색상의 채도와 색조에 영향을 주지 않으면서 밝기만 조정해보겠습니다.

:root {
  --red-1: oklch(10% 0.2 15);
  --red-2: oklch(20% 0.2 15);
  --red-3: oklch(30% 0.2 15);
  --red-4: oklch(40% 0.2 15);
  --red-5: oklch(50% 0.2 15);
  --red-6: oklch(60% 0.2 15);
  --red-7: oklch(70% 0.2 15);
  --red-8: oklch(80% 0.2 15);
  --red-9: oklch(90% 0.2 15);
}

비슷한 예로, 색상의 밝기와 색조를 통일시켜놓고 채도만 조정할 수도 있겠죠?

:root {
  --red-1: oklch(50% 0.05 15);
  --red-2: oklch(50% 0.1 15);
  --red-3: oklch(50% 0.15 15);
  --red-4: oklch(50% 0.2 15);
  --red-5: oklch(50% 0.25 15);
  --red-6: oklch(50% 0.3 15);
  --red-7: oklch(50% 0.35 15);
  --red-8: oklch(50% 0.4 15);
  --red-9: oklch(50% 0.45 15);
}

이처럼 OKLCH 모델을 사용하면 디자인 작업 시 색상의 밝기나 채도를 일관성 있게 유지하기 쉽습니다. 따라서, 웹 접근성(Accessibility)을 고려한 색상 설계와 텍스트와 배경 간 색상 대비 계산에 유리하죠. 뿐만 아니라, 여러 색상을 다뤄야 하는 디자인 시스템에서 칼라 팔레트(palette)를 정의하고 다크 모드 용 색상을 지원할 때도 유용하게 사용될 수 있습니다.

브라우저 지원

OKLCH 색상 모델은 공식적으로 지원이 끝난 인터넷 익스플로러(Internet Explorer)를 제외하면, 크롬(Chrome), 엣지(Edge), 사파리(Safari)를 포함한 모든 모던 브라우저에서 안심하고 사용할 수 있습니다.

마치며

OKLCH는 가독성, 정확성, 일관성 측면에서 기존 색상 모델보다 훨씬 우수한 인간 친화적인 색상 모델입니다. OKLCH가 기존 색상 모델에서 해결하기 어려웠던 문제들을 해결하면서, 앞으로 점점 디자이너와 개발자 모두에게 OKLCH가 사랑받을 가능성이 높다고 생각합니다. 당장은 익숙한 RGB나 LCH를 쓰는 게 더 편하게 느껴지시겠지만, 지금부터 천천히 OKLCH와 친해져 보시기를 추천드리고 싶습니다.

This work is licensed under CC BY 4.0