새로운 색상 모델과 CSS 색상 혼합 기능: LCH, Oklab, color-mix()

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 디자이너, 프론트엔드 개발자, CSS 색상 시스템 설계자
• 난이도: 중급 이상 (CSS 색상 공간 이해 필요)

핵심 요약

• HSL 색상 모델은 인간의 인지와 불일치하여 색상 조절 시 예상치 못한 결과 발생
• LCH 및 Oklab은 인지 일관성(perceptual uniformity)을 보장하는 현대적인 색상 공간
• color-mix() 함수는 CSS 내에서 색상 혼합 가능하여 디자인 시스템 구축 효율성 향상

섹션별 세부 요약

1. HSL의 한계와 색상 인지 문제

• HSL의 Lightness 채널은 색상의 인식 밝기와 비례하지 않음 (예: hsl(240, 100%, 50%)의 파란색 vs hsl(60, 100%, 50%)의 노란색)
• 색상 톤이 다른 경우 색상 혼합 시 중간 영역이 흐릿한 '죽은 존(gray dead zone)' 발생
• 전통적 색상 모델은 컴퓨터 중심 설계로 인해 인간의 색상 인지와 괴리

2. LCH 및 Oklab 색상 공간의 기능

• LCH(Lightness, Chroma, Hue)
• Lightness(0%~100%): 인식 밝기 일관성 보장 (예: lch(50% 100 290)은 모든 톤에서 동일한 밝기)
• Chroma(0~150+): 색채 강도 표현 (0=회색, 150=강렬한 색상)
• Hue(0~360): HSL과 유사한 색상 휠 각도
• Oklab
• Oklch 버전은 인식 일관성과 높은 색상 강도를 지원 (예: oklch(58% 0.18 290))
• Display-P3 색상 공간의 색상을 표시 가능 (기존 sRGB보다 더 생동감 있는 색상)

3. color-mix() 함수의 활용

• 문법: color-mix(in <색상공간>, <색상1> <백분율>, <색상2>)
• 예: color-mix(in oklch, var(--brand-purple) 90%, white) (브랜드 색상의 10% 흰색 혼합)
• 색상 시스템 자동 생성
• 기초 색상 정의 후 color-mix()로 팔레트 생성 가능
• 예:

```css

:root {

--primary: oklch(65% 0.22 260);

--border-color: color-mix(in oklch, var(--primary) 20%, #ccc);

}

```

• sRGB vs Oklch 혼합 결과 비교
• srgb 혼합: 중간 영역이 흐릿한 '죽은 존' 발생
• oklch 혼합: 생동감 있는 색상 전환 가능

결론

• Oklch 기반 색상 시스템을 도입하여 디자인 일관성과 유지보수성 향상
• color-mix()를 활용한 CSS 내 색상 조절은 프리프로세서/JavaScript 의존도 감소
• 현대 브라우저에서 이미 지원되는 기능으로, 디자인 시스템 구축에 즉시 적용 가능