CSS 컬러 모듈 레벨 4

1 개요

CSS Color Module Level 4

CSS 컬러 모듈 레벨 4

• W3C CSS Working Group이 표준화한 차세대 CSS 색상 스펙
• 기존 CSS 색상 모델의 한계를 넘어서 더 다양한 색공간과 현대 디스플레이에 적합한 색 표현을 지원한다.

---

• CSS2, CSS3에 이어 색상 모델을 개선한 규격.
• 다양한 색공간과 넓은 색역(Wide Gamut), HDR 디스플레이 지원을 목표로 한다.
• 인간 시각의 밝기·채도 인지 특성에 맞춘 색공간(Oklab, Oklch 등)을 지원해 더 자연스러운 색상 변화를 표현할 수 있다.

2 특징

다양한 색공간 지원

• 기존 RGB, HSL 외에 lab(), lch(), oklab(), oklch(), xyz(), display-p3() 등을 CSS에서 직접 사용할 수 있다.

color: oklch(76.9% 0.188 70.08);
color: display-p3(0.6 0.2 0.7);

• Wide Gamut 디스플레이 대응

표준 sRGB보다 넓은 색영역을 가진 최신 디스플레이에서 더 풍부한 색상 표현 가능

• Perceptual Uniformity

oklab, oklch는 밝기·채도·색조를 사람의 시각에 맞춰 일정하게 변화하도록 설계되어, 디자이너가 색상 보정을 직관적으로 할 수 있다.

• 알파 채널 개선

/ 문법으로 RGB/HSL 내 알파값을 간단히 지정할 수 있다.

3 같이 보기

• sRGB 색공간

4 참고

• https://www.w3.org/TR/css-color-4/
• https://bottosson.github.io/posts/oklab/