2025-09-14 19:08
OKLCH
- 인간의 시각 인지 방식을 기반으로 설계되어 L(밝기), C(채도), H(색상)를 직관적으로 제어할 수 있는 최신 색상 모델이다.
- 기존 HSL의 문제점(일관성 없는 밝기, 예측 불가능한 색상 변화)을 해결하여 디자이너와 개발자 모두에게 예측 가능하고 일관된 색상 시스템을 제공
- CSS에서
oklch()함수를 사용하여 쉽게 적용할 수 있으며, 색상 팔레트 제작, 동적 테마 구현, 접근성 높은 UI 디자인에 매우 유용하다.
| 요소 | OKLCH | HSL | 설명 |
|---|---|---|---|
| L (Lightness) | 인지적 밝기 (Perceptual) | 수학적 밝기 (Mathematical) | OKLCH는 인간의 눈이 인지하는 실제 밝기를 반영하여 일관성이 높다. |
| C/S (Chroma/Saturation) | 채도 (Chroma) | 채도 (Saturation) | Chroma는 색의 강렬함을 나타내며, 각 색상별 최대값이 다르다. Saturation은 회색 대비 상대적인 값이다. |
| H (Hue) | 색상 (Hue) | 색상 (Hue) | 개념적으로 가장 유사하며, 360도 색상환으로 색의 종류를 정의한다. |
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사이의 숫자 또는%로 표현한다.