oklch()는 Lightness(명도), Chroma(채도), Hue(색상)를 기반으로 색상을 정의하는 최신 CSS 색상 함수입니다. HSL과 구성 요소는 비슷해 보이지만, oklch()는 HSL이 가진 고질적인 문제를 해결하여 훨씬 더 예측 가능하고 일관성 있는 색상 시스템을 만들 수 있도록 도와줍니다.
HSL의 한계와 oklch()의 등장
HSL은 ‘인간 친화적’이라는 큰 장점이 있지만, 치명적인 단점이 하나 있습니다. 바로 ‘컴퓨터의 계산’과 ‘사람의 시각’ 사이에 불일치가 있다는 점입니다.
예를 들어, HSL에서 명도(Lightness)를 50%로 고정한 채 순수한 노란색과 파란색을 만들어 보겠습니다.
.yellow-hsl { background-color: hsl(60, 100%, 50%); } /* 밝은 노란색 */
.blue-hsl { background-color: hsl(240, 100%, 50%); } /* 어두운 파란색 */
| background-color: hsl(60, 100%, 50%); | background-color: hsl(240, 100%, 50%); |
| .yellow-hsl | .blue-hsl |
두 색의 명도(L) 값은 50%로 동일하지만, 우리 눈에는 노란색이 파란색보다 훨씬 밝게 보입니다. 이는 HSL 모델이 인간의 시각적 인지를 완벽하게 반영하지 못하기 때문입니다. 이 때문에 HSL만으로는 모든 색상이 동일한 밝기로 느껴지는 일관된 색상 팔레트를 만들기가 매우 어렵습니다.
oklch()는 바로 이 문제를 해결합니다. 이 색상 모델은 인간의 시각이 색을 인지하는 방식에 훨씬 가깝게 설계되어, 수치와 실제 밝기가 거의 일치합니다.
oklch()의 구성 요소
oklch(Lightness Chroma Hue / Alpha)
1. L (Lightness / 명도) – 가장 중요한 변화
- 의미: 색상의 인지적 밝기를 나타냅니다.
oklch의 핵심입니다. - 값:
0%(검은색) 부터100%(흰색)까지의 백분율 또는0에서1까지의 숫자로 표현합니다. - 특징:
oklch에서 명도(L) 값이 같다면, 그 색이 파란색이든 노란색이든 우리 눈에 거의 동일한 밝기로 보입니다. 이는 접근성(특히 명암비)과 디자인 시스템의 일관성을 유지하는 데 결정적입니다.
2. C (Chroma / 채도)
- 의미: 색상의 ‘강도’ 또는 ‘선명도’를 나타냅니다. HSL의 Saturation과 유사합니다.
- 값:
0(회색)부터 시작하며, 이론적인 최댓값은 없지만 보통0.37근처입니다. - 특징: 값이 높을수록 색상이 더 선명해집니다.
3. H (Hue / 색상)
- 의미: 색상환의 각도를 나타냅니다. HSL의 Hue와 같은 개념입니다.
- 값:
0부터360까지의 각도 숫자를 사용합니다. (예: 140은 녹색 계열, 250은 파란색 계열)
oklch()를 사용하면 무엇이 좋을까요?
- 예측 가능한 밝기:
L값만 보면 실제 밝기를 예측할 수 있어, 일관된 명암비와 시각적 무게감을 가진 색상 팔레트를 쉽게 만들 수 있습니다. - 직관적인 색상 조작: HSL처럼 색상을 유지한 채 밝기(
L)나 선명도(C)만 바꾸는 직관적인 조작이 가능하며, 그 결과가 훨씬 더 정확합니다. - 더 넓은 색상 영역(Wide Gamut) 지원: 기존 sRGB 색 공간을 넘어서는, 디스플레이 P3 같은 광색역의 훨씬 더 생생한 색상을 표현할 수 있습니다. 모니터가 지원한다면 훨씬 풍부한 색 경험을 제공할 수 있습니다.
코드 비교
/* HSL - 파란색이 훨씬 어두워 보임 */
.palette-hsl .blue { background-color: hsl(240, 90%, 80%); }
.palette-hsl .yellow { background-color: hsl(60, 90%, 80%); }
/* OKLCH - 두 색상의 밝기가 거의 동일하게 느껴짐 */
.palette-oklch .blue { background-color: oklch(80% 0.15 250); }
.palette-oklch .yellow { background-color: oklch(80% 0.15 90); }
| background-color: hsl(240, 90%, 80%); | background-color: hsl(60, 90%, 80%); |
| .palette-hsl .blue | .palette-hsl .yellow |
| background-color: oklch(80% 0.15 250); | background-color: oklch(80% 0.15 90); |
| .palette-oklch .blue | .palette-oklch .yellow |
결론
oklch()는 단순한 새 기능이 아니라, 웹에서 색상을 다루는 방식을 근본적으로 개선하는 진일보한 기술입니다. 디자이너와 개발자가 의도한 색상을 왜곡 없이, 그리고 일관성 있게 사용자에게 전달할 수 있도록 돕는 차세대 표준이라고 할 수 있습니다. 현재 대부분의 최신 브라우저에서 지원하고 있으므로, 지금부터라도 사용해보며 그 강력함을 경험해 보시길 추천합니다