LAB vs LCH
둘 다 지각적으로 균일한(perceptually uniform) 색공간이라는 공통점이 있습니다. 사람 눈이 색을 인식하는 방식을 수학적으로 모델링한 것입니다.
차이는 좌표계입니다.
LAB는 직교 좌표계입니다.
L— 밝기 (0=검정, 100=흰색)A— 초록↔빨강 축B— 파랑↔노랑 축
LCH는 원통 좌표계로, LAB를 극좌표로 변환한 것입니다.
L— 밝기 (동일)C— 채도(Chroma). 원점에서의 거리H— 색상(Hue). 각도 0°~360°
css
/* 같은 색을 표현하는 두 방식 */color: lab(55% -30 40);color: lch(55% 50 127deg); /* C = √(a²+b²), H = atan2(b,a) */LCH가 실용적으로 훨씬 쓰기 편합니다. Hue 값을 직접 조작하는 것이 직관적이고, hsl()에 익숙하다면 자연스럽게 넘어올 수 있습니다.
OK가 붙으면?
LAB/LCH는 1976년 CIE 표준인데, 두 가지 알려진 결함이 있었습니다.
1. 파란색 영역의 Hue 왜곡
채도가 높은 파란색에서 C(채도)를 올리면 Hue가 보라 쪽으로 밀립니다. 색상이 변하지 않아야 하는데 실제로는 바뀌어 보이는 문제가 있습니다.
2. 밝기 예측 불일치
특히 보라~파랑 영역에서 L 값이 같아도 눈에 다르게 밝아 보이는 경우가 발생합니다.
Björn Ottosson이 2020년에 이 두 문제를 개선해서 발표한 것이 OKLab / OKLCH입니다.
css
/* 스케일이 다름에 주의 */lab(55% -30 40) /* L: 0–100 */oklab(0.55 -0.1 0.15) /* L: 0–1, a/b 범위도 다름 */
lch(55% 50 127deg)oklch(0.55 0.2 127deg) /* L: 0–1, C 범위 대략 0–0.4 */핵심 개선점은 채도를 높여도 Hue가 흔들리지 않는다는 것입니다. 디자인 시스템에서 팔레트를 프로그래밍으로 생성할 때 특히 체감됩니다.