[CSS] OKLCH는 어떻게 RGB와 HSL을 대체할 수 있었을까

CSS에서는 오랫동안 RGB와 HSL이라는 익숙한 색상 모델을 사용해 왔다.

하지만 사람의 눈에 더 자연스럽고 예측 가능한 색상 표현 방식이 요구되면서 OKLCH라는 새로운 색상 모델이 주목받고 있다.

이 글에서는 OKLCH가 주목받는 이유와 기존 색상 모델의 한계를 비교하며 OKLCH의 특징과 장점을 소개하려 한다.

P3 색상

우선 OKLCH를 이해하려면 디스플레이 색역에 대한 이해가 필요하다.

대부분의 디스플레이는 인간이 볼 수 있는 모든 색을 표현하지 못한다.

현재 가장 보편적으로 사용되는 색상 모델인 sRGB는 사람 눈에 보이는 색상의 약 35%만 표현할 수 있다.

이에 비해 최신 디스플레이는 약 30% 더 넓은 색상 영역을 표현할 수 있고, 이를 P3(wide-gamut) 라고 부른다.

기존의 RGB, Hex, HSL 같은 CSS 색상 모델은 P3 색상을 지정할 수 없다.
오로지 OKLCH만이 P3 색상을 직접 표현할 수 있다.

기존 색상 모델의 한계

RGB, Hex

color: rgb(109, 162, 218);
color: #6ea3db;

RGB와 Hex는 빨강(R), 초록(G), 파랑(B)의 조합으로 색을 표현한다.
하지만 다음과 같은 한계가 있다:

직관적이지 않다: 숫자만 보고 색을 예측하기 어렵다.
색상 수정이 어렵다: 명도나 채도는 직관적으로 조정하기 어렵다.
P3 색상을 지원하지 않는다: 최신 디스플레이가 지원하는 넓은 색상 영역 표현이 불가능하다.

HSL

color: hsl(210, 60%, 64%);

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색을 표현해서 RGB보다는 직관적이다.
하지만 HSL 역시 구조적인 한계를 가진다:

색상이 왜곡된다: 색조마다 사람이 느끼는 채도의 최대치가 다르지만, HSL은 모든 색조에 같은 `0–100%` 채도를 할당하여 왜곡된 색을 생성할 수 있다.
정밀한 색 조정이 어렵다: 색상별로 최대 채도가 다르기 때문에 정밀한 조정이 어렵다.
P3 색상을 지원하지 않는다: 최신 디스플레이가 지원하는 넓은 색상 영역 표현이 불가능하다.

OKLCH

color: oklch(0.45 0.26 264); /* 파란색 */
color: oklch(1 0 0); /* 흰색 */
color: oklch(0 0 0 / 50%); /* 반투명 검정 */

OKLCH는 Lightness(밝기), Chroma(채도), Hue(색상) 세 가지 속성으로 색을 표현한다.
사람의 시각적 인식에 맞춰 설계되었기 때문에, 색상 조작이 훨씬 더 직관적이고 예측 가능하다.

OKLCH의 구성 요소

구성 요소	의미	범위
L (Lightness)	밝기	0 ~ 1
C (Chroma)	채도	0 이상
H (Hue)	색상	0 ~ 360도
A (Alpha)	불투명도	0 ~ 1 또는 0% ~ 100%

OKLCH의 장점

우수한 가독성

.text {
  /* 접근성 문제: 밝기 차이 20%는 충분하지 않음 */
  background: oklch(0.8 0.02 300);
  color: oklch(1 0 0);
}

OKLCH는 색의 밝기나 채도를 숫자값으로 명확히 표현하기 때문에, 코드만으로 색의 특징을 파악할 수 있다.
예를 들어, 코드만 보고 명도 차이를 비교하여 접근성 문제를 쉽게 확인할 수 있다.

직관적인 색상 조정

.button {
  background: oklch(0.5 0.2 260);
}
.button:hover {
  /* 버튼 hover 시 밝기 10% 어둡게 조정 */
  background: oklch(0.4 0.2 260);
}

속성 조정 방식이 실제 시각적 변화와 직관적으로 연결되기 때문에

hover 상태나 테마 전환 등에서 간단한 수치 조정으로 원하는 색상을 만들 수 있다.

예를 들어, `l` 값을 줄이면 밝기가 어두워지고, `c` 값으로 채도를 조절할 수 있다.

P3 색상 지원

OKLCH는 P3 디스플레이에서 더 많은 색을 표현할 수 있기 때문에, 디자인 정밀도가 올라간다.

만약 눈에 보이지 않는 색상 조합을 생성하더라도, 브라우저가 가장 근접한 색상으로 자동 보정(gamut mapping)한다.

결론: OKLCH를 사용해야 하는 이유

사람 눈에 가장 자연스러운 색상 표현
색상 조정이 직관적이고 예측 가능
최신 디스플레이에서 P3 색상 지원

OKLCH를 실제 프로젝트에 적용해보고 싶다면 다음 링크를 추천한다

👉 How to add OKLCH to your project

Reference

OKLCH in CSS: why we moved from RGB and HSL

저작자표시 (새창열림)