새로운 색상 시스템, OKLCH

Published at 2025-05-14

TIL - OKLCH

날짜: 2025년 5월 14일

• CSS 색상을 정의하는 새로운 색상 시스템이다.
• CSS Color Module 4 사양에 추가됨
• oklch(L C H): L은 밝기, C는 채도, H는 색상을 나타낸다.
• 0~1 사이의 값으로 표현한다.

기존 RGB, HSL 모델과 다르게 인간 친화적(?)인 색상 시스템이라고 한다.

왜 인간친화적이라고 하냐면, 사람이 느끼는 밝기 차이를 표현할 수 있기 때문이다.

mdn사이트에 있는 예시 코드:

/* Absolute values */
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

/* Relative values */
oklch(from green l c h / 0.5)
oklch(from #0000FF calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
oklch(from var(--aColor) l c h / calc(alpha - 0.1))

참고:

W3C - CSS Color Module Level 4

mdn 문서 - oklch()