T
css color oklch web-design frontend

현대 CSS 색상 함수 가이드: OKLCH, color-mix() 그리고 그 너머

OKLCH, color-mix(), 상대 색상 구문과 같은 현대 CSS 색상 함수를 마스터하세요. 웹 접근성 디자인에서 OKLCH가 RGB/HSL보다 뛰어난 이유를 알아보세요.

2026-04-18 이 도구 사용하기

현대 CSS 색상 함수 가이드: OKLCH, color-mix() 그리고 그 너머

웹에서 색상을 정의하는 방식이 거대한 변화를 겪고 있습니다. 수십 년 동안 개발자들은 rgb()와 hex 코드에 의존해 왔으며, 나중에는 인간이 읽기 쉽도록 hsl()을 채택했습니다. 하지만 디스플레이 기술이 발전하고(HDR 및 광색역 스크린 등장) 접근성이 핵심 요구 사항이 되면서, 이러한 오래된 모델의 한계가 드러나고 있습니다.

이제 차세대 CSS 색상 함수인 OKLCH, color-mix(), 그리고 **상대 색상 구문(Relative Color Syntax)**이 등장했습니다. 이 도구들은 단순히 "오래된 작업을 하는 새로운 방법"이 아니라, 색채 이론과 웹 접근성의 근본적인 문제를 해결합니다.

1. 왜 OKLCH가 새로운 표준인가

HSL을 사용하여 일관된 색상 팔레트를 만들려고 시도해 본 적이 있다면, 한 가지 문제를 발견했을 것입니다. 동일한 명도(Lightness) 값을 가진 서로 다른 색조가 인간의 눈에는 똑같이 밝게 보이지 않는다는 점입니다. 예를 들어, 50% 명도에서 "순수한 파란색"과 "순수한 노란색"은 육안으로 보기에 밝기 차이가 매우 큽니다.

OKLCH의 지각적 균일성

OKLCH는 다음을 의미합니다:

  • O: Oklab (기반이 되는 색 공간)
  • L: Lightness (지각적 밝기)
  • C: Chroma (채도, 색의 강도 또는 양)
  • H: Hue (색조, 색상환의 각도)

OKLCH에서 "K"는 **지각적 균일성(Perceptual Uniformity)**을 의미합니다. 이는 명도(L)를 일정하게 유지하면서 색조(H)를 변경하더라도 인간의 눈에는 동일한 밝기로 보인다는 것을 뜻합니다.

코드 예시:

.button-primary {
  /* 아름답고 지각적으로 균형 잡힌 파란색 */
  background-color: oklch(60% 0.15 250);
}

.button-secondary {
  /* 지각적 밝기를 동일하게 유지하면서 색조만 변경 */
  background-color: oklch(60% 0.15 20);
}

OKLCH의 장점:

  1. P3 색역 지원: 표준 sRGB(RGB/HEX)보다 50% 더 많은 색상 표현 가능.
  2. 쉬운 디자인 시스템: 명도 값만 조정하여 접근성 있는 테마를 쉽게 제작.
  3. "탁해짐" 없음: HSL과 달리 조정 시에도 색상이 선명하게 유지됨.

2. color-mix()를 이용한 동적 색상 혼합

color-mix() 함수를 사용하면 CSS에서 직접 두 가지 색상을 혼합할 수 있습니다. 이전에는 Sass와 같은 전처리기나 JavaScript 라이브러리가 필요했던 기능입니다.

구문: color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)

실제 활용 사례: 호버 상태

:root {
  --brand-color: #3b82f6;
}

.btn:hover {
  /* 브랜드 색상에 20%의 흰색을 섞어 완벽한 틴트 제작 */
  background-color: color-mix(in oklab, var(--brand-color), white 20%);
}

oklab 공간에서 색상을 섞으면 RGB 혼합에서 자주 발생하는 "탁한 색상"을 피하고 가장 자연스러운 결과를 얻을 수 있습니다.

3. 상대 색상 구문: 색상 조작의 미래

상대 색상 구문(RCS)은 CSS 색상 기능 중 가장 강력한 추가 기능일 것입니다. 기존 색상을 가져와서 분해하고, 구성 요소를 수정한 다음, 다시 합칠 수 있게 해줍니다.

구문 예시:

.alert {
  --base-color: blue;
  /* 'blue'를 가져와서 색조와 채도는 유지하고 명도만 90%로 설정 */
  background-color: oklch(from var(--base-color) 0.9 c h);
  /* 원본 색상을 기준으로 알파 채널(투명도) 설정 */
  color: oklch(from var(--base-color) l c h / 0.8);
}

이를 통해 수십 개의 개별 변수 없이도 모든 CSS 색상 변수를 자체 변형(틴트, 쉐이드, 투명 버전)을 위한 "공장"으로 만들 수 있습니다.

4. 광색역 색상 (Display-P3)

대부분의 현대식 스마트폰과 노트북(MacBook 및 고사양 안드로이드 등)은 광색역(Wide Gamut) 디스플레이를 지원합니다. 전통적인 CSS 색상은 sRGB 공간으로 제한되어 있어, 이러한 화면이 표현할 수 있는 가장 선명한 초록색, 빨간색, 주황색을 보여줄 수 없습니다.

color() 함수와 display-p3를 사용하면 이러한 "HD" 색상을 잠금 해제할 수 있습니다.

.neon-green {
  /* 이 초록색은 표준 HEX/RGB로는 표현할 수 없습니다 */
  color: color(display-p3 0 1 0);
}

5. light-dark()를 통한 더 나은 다크 모드

새로운 light-dark() 함수는 사용자의 시스템 설정에 따라 자동으로 적절한 값을 선택하여 테마 구현을 단순화합니다.

body {
  /* 단순한 색상 설정을 위해 더 이상 복잡한 @media (prefers-color-scheme) 블록을 쓸 필요가 없습니다 */
  background-color: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#333333, #efefef);
}

FAQ: 자주 묻는 질문

Q: 왜 HSL 대신 OKLCH를 사용해야 하나요?

A: HSL은 지각적으로 균일하지 않습니다. HSL에서 명도를 50%로 유지한 채 색조를 변경하면 밝기가 크게 변하는 것처럼 보입니다. OKLCH는 이를 해결하여 접근성 있는 디자인 시스템과 일관된 UI 컴포넌트를 훨씬 쉽게 구축할 수 있게 해줍니다.

Q: OKLCH는 모든 브라우저에서 지원되나요?

A: 2024년 현재, OKLCH, color-mix(), 상대 색상 구문은 모든 주요 모던 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. 구형 브라우저를 위해 HEX 폴백(fallback)을 제공해야 합니다.

Q: 색상 혼합에 가장 적합한 색 공간은 무엇인가요?

A: 대부분의 UI 작업에서 color-mix()의 보간 공간으로 oklab 또는 oklch가 가장 적합합니다. 이들은 sRGB에서 자주 발생하는 그라데이션이나 혼합 중간의 "회색 데드존"을 방지합니다.

실험해 볼 준비가 되셨나요?

현대 CSS는 디자인 도구를 더욱 강력하게 만들고 코드를 더 유지 관리하기 쉽게 만들고 있습니다. 당사의 색상 변환기를 사용하여 브랜드 색상이 다양한 형식에서 어떻게 보이는지 확인해 보세요.

참고: 현재 전용 OKLCH 색상 선택기 및 상대 색상 구문 생성기를 개발 중입니다. 기대해 주세요!

블로그로 돌아가기 색상 변환기 →