# High Definition CSS Color Guide

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=8423](https://news.hada.io/topic?id=8423)
- GeekNews Markdown: [https://news.hada.io/topic/8423.md](https://news.hada.io/topic/8423.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-02-08T10:28:20+09:00
- Updated: 2023-02-08T10:28:20+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/articles/high-definition-css-color-guide/)
- Points: 12
- Comments: 0

## Topic Body

- CSS Color 4는 웹에 광범위한 색상 도구 및 기능을 제공하며, HD CSS를 지원하기 시작   
- 디스플레이 기기는 점점 좋아지는데, CSS는 이를 지원하지 못해왔음   
- CSS에선 25년간 sRGB 색영역만 사용되었으며, 이건 사람의 눈이 볼수 있는 색상의 30%만 표현하는 것  
- 크롬 111 부터 CSS Color Level 4를 지원   
  - RGB 98, Display p3, Rec2020, ProPhoto 등의 색영역을 지원하는 12개의 새로운 색공간 선택 가능  
  - 이미 2016년부터 display-p3를 지원하는 Safari와 이제 동일해 짐(애플이 만든 색영역)  
- CSS가 이제 HD 디스플레이를 지원하게 되며, 지원하는 브라우저에서는 50% 더 많은 색상을 표현 가능   
### 글 목차  
- 오버뷰   
  - 색영역(Color Gamut)이란 ?  
  - 인간의 시각 영역  
  - 색공간(Color Space)이란?  
  - 색영역과 색공간 요약   
- 더 많은 색상, 공간, 디버그 결과에 접근하는 법   
  - 고전 색 공간에 대한 검토   
  - 새로운 웹 컬러 공간 만나기   
  - 색상 보간(Interpolation)  
  - 영역 클램핑  
  - 색 공간 선택하기   
- HD CSS 색상으로 마이그레이션 하기   
  - 색영역 및 색공간 지원 확인   
  - 크롬 개발자 도구로 색상 디버깅   
- 결론

## Comments



_No public comments on this page._