OKLCH in CSS : 우리가 RGB/HSL에서 바꾼 이유

• OKLCH는 CSS Color Module 4 스펙에 추가된 새로운 컬러 선언 방법
  → oklch(45% 0.26 264 / 50%) : (Lightness Chroma Hue / Opacity)
• OKLCH의 장점
  • rgb/hex에 비해서 읽기가 쉽다. hsl과 비슷하지만 밝기를 더 잘 인코딩
  • hsl과 달리 perceptual한 밝기를 사용하며, 콘트라스트가 예측 가능
  • wide-gamut P3 색상에 사용 가능 (애플장비 처럼 sRGB 모니터보다 더 많은 색상을 표시할 때)

목차

1. CSS Color 는 어떻게 변했나
2. OKLCH와 다른 CSS Color 포맷들과 비교
3. OKLCH는 어떻게 동작하는가
4. OKLCH를 프로젝트에 추가하는 방법
5. 우리가 OKLCH로 바꾼 이유
   • 가독성 향상
   • 쉬운 컬러 변경
   • P3 컬러 지원
   • 디자인팀과 더 나은 소통
   • 미래 대비