시스매

OKLCH 색상 모델 완벽 정복 가이드 더 나은 웹 컬러 시스템 구축하기

18 min read

2025-09-10 22:37

  • OKLCH는 인간의 시각 인지 방식을 기반으로 설계되어 L(밝기), C(채도), H(색상)를 직관적으로 제어할 수 있는 최신 색상 모델이다.

  • 기존 HSL의 문제점(일관성 없는 밝기, 예측 불가능한 색상 변화)을 해결하여 디자이너와 개발자 모두에게 예측 가능하고 일관된 색상 시스템을 제공한다.

  • CSS에서 oklch() 함수를 사용하여 쉽게 적용할 수 있으며, 색상 팔레트 제작, 동적 테마 구현, 접근성 높은 UI 디자인에 매우 유용하다.

OKLCH 색상 모델 완벽 정복 가이드 더 나은 웹 컬러 시스템 구축하기

웹 디자인과 개발의 세계는 끊임없이 진화하고, 우리가 색상을 다루는 방식 또한 예외는 아니다. 오랫동안 우리에게 익숙했던 HEX, RGB, HSL과 같은 색상 모델들은 나름의 역할을 훌륭히 수행해왔다. 하지만 디자인 시스템의 정교함이 요구되고, 사용자 경험의 일관성이 중요해지면서 기존 모델들의 한계가 드러나기 시작했다. 바로 이 지점에서 OKLCH라는 새로운 대안이 강력하게 떠오르고 있다.

OKLCH는 단순히 새로운 문법이 아니다. 이것은 우리가 색상을 ‘생각’하고 ‘인식’하는 방식에 더 가깝게 만들어진, 인간 중심의 색상 모델이다. 이 핸드북을 통해 OKLCH가 왜 만들어졌는지, 그 구조는 어떻게 이루어져 있으며, 어떻게 우리의 웹사이트와 애플리케이션을 한 단계 더 높은 수준으로 끌어올릴 수 있는지 심도 있게 탐구해 볼 것이다.

1. OKLCH는 왜 탄생했는가? (기존 색상 모델의 한계)

새로운 기술의 등장은 언제나 기존 기술의 ‘결핍’에서 시작된다. OKLCH의 탄생 배경을 이해하려면, 우리가 오랫동안 사용해 온 HSL(Hue, Saturation, Lightness) 모델의 근본적인 문제점을 먼저 짚어봐야 한다.

HSL의 배신: 예측 불가능한 밝기

HSL은 ‘인간 친화적’이라는 타이틀을 달고 등장했다. 색상(Hue), 채도(Saturation), 밝기(Lightness)라는 개념은 디자이너에게 꽤 직관적으로 다가왔다. “이 파란색을 조금 더 밝게 만들어 줘”라는 요구를 L 값을 조정하는 것으로 해결할 수 있을 것 같았다.

하지만 현실은 달랐다. 아래 두 가지 색상을 보자.

  • 선명한 파란색: hsl(240, 100%, 50%)

  • 선명한 노란색: hsl(60, 100%, 50%)

두 색상 모두 L(밝기) 값이 50%로 동일하다. 하지만 우리의 눈은 노란색을 파란색보다 훨씬 밝게 인식한다. 만약 이 두 색상을 회색조(grayscale)로 변환하면 그 차이는 명확해진다.

이것이 HSL의 가장 큰 문제점이다. HSL의 ‘Lightness’는 수학적 계산에 의한 밝기일 뿐, **인간이 시각적으로 인지하는 밝기(Perceptual Lightness)**와는 거리가 멀다. 이로 인해 다음과 같은 문제가 발생한다.

  • 일관성 없는 사용자 경험: 동일한 밝기 값의 버튼이라도 색상에 따라 실제 밝기가 달라 보여 사용자에게 혼란을 준다.

  • 접근성 문제: 배경색과 텍스트 색상의 명도 대비를 계산할 때, HSL의 L 값은 신뢰할 수 있는 지표가 되지 못한다.

  • 예측 불가능한 색상 변환: L 값을 조절하여 색상을 어둡게 하거나 밝게 만들 때, 특정 색상(특히 파란색 계열)이 예상치 못하게 탁해지거나 다른 색처럼 보이는 현상이 발생한다. 우리는 이를 ‘죽음의 회색 지대(Gray Dead Zone)‘라고 부르기도 한다.

이러한 문제를 해결하기 위해, 인간의 시각 인지 모델에 기반한 새로운 색상 공간의 필요성이 대두되었고, 그 결과물이 바로 CIELAB과 이를 웹에서 사용하기 쉽게 만든 OKLCH이다.

2. OKLCH의 해부학: L, C, H 완전 정복

OKLCH는 Oklab 색상 공간을 기반으로 하며, L(Lightness), C(Chroma), H(Hue)라는 세 가지 요소로 색상을 정의한다. HSL과 약자는 비슷해 보이지만, 그 속 내용은 완전히 다르다.

2.1. L (Lightness): 예측 가능한 절대적 밝기

  • 정의: 인간이 인지하는 밝기를 0(완벽한 검정)에서 1(완벽한 흰색)까지의 값으로 표현한다.

  • 특징: OKLCH의 L 값은 **지각적으로 균일(Perceptually Uniform)**하다. 이는 L 값이 0.5인 회색과 L 값이 0.5인 파란색은 우리의 눈에 거의 동일한 밝기로 보인다는 의미다. 더 이상 HSL처럼 색상에 따라 밝기가 널뛰는 현상이 발생하지 않는다.

  • 값의 범위: CSS에서는 보통 0%에서 100%로 표현한다.

  • 비유: 스피커의 볼륨 조절 다이얼을 생각해보자. HSL의 밝기는 어떤 음악을 트느냐에 따라 실제 소리의 크기가 달라지는 고장 난 다이얼과 같다. 반면 OKLCH의 밝기는 어떤 음악을 틀어도 숫자 ‘5’는 항상 동일한 음량을 보장하는 정교한 다이얼과 같다.

2.2. C (Chroma): 색상의 순수한 강렬함

  • 정의: 색상의 선명도 또는 강렬함(intensity)을 나타낸다. ‘채도’와 유사한 개념이지만 더 정교하다.

  • 특징: C 값이 0이면 완벽한 무채색(회색)이 된다. 값이 커질수록 색상은 더 순수하고 강렬해진다. 중요한 점은, 각 색상(Hue)과 밝기(Lightness)마다 가질 수 있는 최대 Chroma 값이 다르다는 것이다. 예를 들어, 밝은 노란색은 매우 높은 Chroma 값을 가질 수 있지만, 어두운 파란색은 상대적으로 낮은 최대 Chroma 값을 가진다. 이는 현실 세계에서 우리가 색을 인지하는 방식과 일치한다.

  • 값의 범위: 이론적으로는 무한하지만, 현실적으로 sRGB 색상 영역 내에서는 보통 0에서 0.37 사이의 값을 가진다. CSS에서는 이 값을 퍼센트로 변환하여 사용하기도 한다. 0이 최소값이며, 최댓값은 정해져 있지 않지만 보통 0.4 근처까지 사용된다.

  • 비유: 물감에 비유할 수 있다. C 값은 컵 속의 맑은 물에 얼마나 많은 양의 순수한 색소(물감)를 넣었는지를 나타낸다. C가 0이면 그냥 물(회색)이고, C 값이 커질수록 물감의 색이 더 진하고 선명해진다.

2.3. H (Hue): 360도의 색상환

  • 정의: 색상의 종류(예: 빨강, 초록, 파랑)를 나타낸다.

  • 특징: HSL의 Hue와 개념적으로 가장 유사하다. 0부터 360까지의 각도로 표현되며, 보통 0은 빨간색, 120은 녹색, 240은 파란색을 나타낸다.

  • 값의 범위: 0에서 360까지의 각도 값. 단위 없이 숫자로만 사용한다.

  • 비유: 360도로 펼쳐진 거대한 색상 피자라고 생각할 수 있다. 어떤 조각을 선택하느냐에 따라 색상의 종류가 결정된다.

요소OKLCHHSL설명
L (Lightness)인지적 밝기 (Perceptual)수학적 밝기 (Mathematical)OKLCH는 인간의 눈이 인지하는 실제 밝기를 반영하여 일관성이 높다.
C/S (Chroma/Saturation)채도 (Chroma)채도 (Saturation)Chroma는 색의 강렬함을 나타내며, 각 색상별 최대값이 다르다. Saturation은 회색 대비 상대적인 값이다.
H (Hue)색상 (Hue)색상 (Hue)개념적으로 가장 유사하며, 360도 색상환으로 색의 종류를 정의한다.

3. 실전! CSS에서 OKLCH 사용하기

백문이 불여일견이다. 이제 CSS에서 oklch() 함수를 사용하여 직접 색상을 정의하는 방법을 알아보자.

3.1. 기본 문법

oklch() 함수는 L, C, H 값을 순서대로 받으며, 선택적으로 알파(투명도) 값을 추가할 수 있다.

/* oklch(L C H [ / A]) */
 
/* 밝기 65%, 채도 0.15, 색상 260(보라색 계열) */
.element {
  background-color: oklch(65% 0.15 260);
}
 
/* 50% 투명도 추가 */
.element-transparent {
  background-color: oklch(65% 0.15 260 / 0.5);
}

  • Lightness (L): % 단위로 표현하는 것이 일반적이다. 0% ~ 100%.

  • Chroma (C): 단위 없는 숫자로 표현한다. 보통 0 ~ 0.4 사이의 값을 사용한다.

  • Hue (H): 단위 없는 숫자로 각도를 표현한다. 0 ~ 360.

  • Alpha (A): 0 ~ 1 사이의 숫자 또는 %로 표현한다.

3.2. P3 색상 영역과 색역 클리핑

OKLCH의 강력한 기능 중 하나는 디스플레이가 지원하는 더 넓은 색상 영역(Gamut)을 활용할 수 있다는 점이다. 대부분의 최신 디스플레이는 기존 sRGB보다 더 다채로운 색을 표현할 수 있는 P3 색상 영역을 지원한다. OKLCH는 이 P3 색상 영역의 색상까지 손쉽게 표현할 수 있다.

만약 우리가 지정한 L, C, H 조합이 현재 디스플레이(예: sRGB)의 색상 영역을 벗어나는 경우, 브라우저는 자동으로 표현 가능한 가장 가까운 색상으로 ‘클리핑(Clipping)’ 한다. 이 과정은 매우 자연스러워서, P3를 지원하지 않는 구형 모니터에서도 색상이 깨지지 않고 최대한 비슷한 느낌으로 보이게 된다.

/* 이 색상은 P3 디스플레이에서 훨씬 선명하게 보일 것이다. */
.vivid-blue {
  background-color: oklch(60% 0.3 260);
}

이 덕분에 우리는 디스플레이 지원 여부를 크게 걱정하지 않고 더 생생한 색상을 디자인에 마음껏 사용할 수 있다.

4. OKLCH 활용 사례: 디자인 시스템의 혁신

OKLCH는 단순히 색상을 지정하는 새로운 방법을 넘어, 디자인 시스템과 UI 개발 프로세스 전체를 개선할 수 있는 잠재력을 가지고 있다.

4.1. 일관성 있는 색상 팔레트 제작

기존에는 기본 색상(primary color)의 밝은 버전과 어두운 버전을 만들기 위해 감에 의존하거나 복잡한 도구를 사용해야 했다. 하지만 OKLCH를 사용하면 이 과정이 매우 간단하고 논리적으로 변한다.

:root {
  --brand-hue: 250; /* 브랜드 색상의 Hue 값 */
  --brand-chroma: 0.2; /* 브랜드 색상의 Chroma 값 */

  --brand-color-lightest: oklch(95% 0.05 var(--brand-hue));
  --brand-color-light:    oklch(85% 0.1 var(--brand-hue));
  --brand-color-base:     oklch(70% var(--brand-chroma) var(--brand-hue));
  --brand-color-dark:     oklch(50% var(--brand-chroma) var(--brand-hue));
  --brand-color-darkest:  oklch(30% 0.1 var(--brand-hue));
}

위 예시처럼, L(밝기) 값만 체계적으로 조절하면 인지적으로 균일한 밝기 단계의 색상 팔레트를 손쉽게 만들 수 있다. Chroma와 Hue는 고정하거나 미세하게 조정하여 색상의 정체성을 유지할 수 있다.

4.2. 동적인 테마 및 상태 변화

버튼의 :hover, :active 상태나 다크 모드/라이트 모드 전환 시에도 OKLCH는 빛을 발한다.

.button {
  background-color: oklch(70% 0.2 250);
  color: oklch(98% 0.02 250);
  transition: background-color 0.2s;
}

.button:hover {
  /* L 값만 살짝 낮춰서 더 어둡게 만든다 */
  background-color: oklch(65% 0.2 250);
}

L 값을 조절하는 것만으로 색상이 탁해지는 문제 없이 자연스러운 상태 변화를 구현할 수 있다.

4.3. 접근성 높은 UI 디자인

웹 콘텐츠 접근성 지침(WCAG)은 텍스트와 배경 간의 명도 대비를 매우 중요하게 생각한다. OKLCH의 L 값은 인지적 밝기를 나타내므로, 명도 대비를 예측하고 계산하는 데 매우 신뢰도가 높다.

예를 들어, L 값이 75%인 배경에는 L 값이 30% 이하인 텍스트를 사용하면 대부분 충분한 명도 대비를 확보할 수 있다는 식의 규칙을 세우기 용이하다.

5. OKLCH 사용 시 고려사항 및 팁

  • 브라우저 지원: OKLCH는 대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원된다. 하지만 구형 브라우저 지원이 필요하다면, @supports 규칙이나 PostCSS 플러그인을 사용하여 폴백(fallback) 색상을 제공해야 한다.

    .element {
  background-color: #5B21B6; /* 구형 브라우저를 위한 폴백 */
  background-color: oklch(45% 0.19 280);
}

  • 색상 선택 도구: 아직 모든 디자인 툴이 OKLCH를 기본으로 지원하지는 않는다. 하지만 Okhsv, Evil Martians’ OKLCH Color Picker & Converter와 같은 온라인 도구를 활용하면 쉽게 원하는 색상의 OKLCH 값을 찾고 변환할 수 있다.

  • Chroma 값 탐색: 특정 색상의 최대 Chroma 값을 찾는 것은 처음에는 조금 어색할 수 있다. 색상 선택 도구를 사용하여 원하는 Hue와 Lightness에서 Chroma 슬라이더를 움직여보며 감을 익히는 것이 좋다.

결론: 색상을 지배하는 새로운 언어

OKLCH는 단순히 또 하나의 색상 표기법이 아니다. 이것은 디자이너와 개발자 사이의 소통을 원활하게 하고, 더 나은 사용자 경험을 구축하며, 예측 가능하고 유지보수가 쉬운 디자인 시스템을 만들 수 있게 해주는 새로운 언어이다.

HSL이 던져주었던 ‘예측 불가능성’이라는 혼란에서 벗어나, 이제 우리는 OKLCH를 통해 색의 밝기, 강렬함, 종류를 명확하고 직관적으로 제어할 수 있게 되었다. 비록 학습 곡선이 약간 존재하지만, 그 가치는 충분하다. OKLCH를 당신의 다음 프로젝트에 도입해보는 것은 어떨까? 더 밝고, 더 선명하며, 더 일관된 디지털 세상을 만드는 첫걸음이 될 것이다.

그래프 뷰

백링크