9P by xguru 2022-10-28 | favorite | 댓글과 토론
  • 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 컬러 지원
    • 디자인팀과 더 나은 소통
    • 미래 대비