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

> Clean Markdown view of GeekNews topic #7683. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=7683](https://news.hada.io/topic?id=7683)
- GeekNews Markdown: [https://news.hada.io/topic/7683.md](https://news.hada.io/topic/7683.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-10-28T11:12:02+09:00
- Updated: 2022-10-28T11:12:02+09:00
- Original source: [evilmartians.com](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)
- Points: 9
- Comments: 0

## Topic Body

- 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 컬러 지원   
   - 디자인팀과 더 나은 소통   
   - 미래 대비

## Comments



_No public comments on this page._