색역 완벽 정리: sRGB, Display P3, 색역 밖의 색
색역은 화면이나 색 공간이 표시할 수 있는 색의 범위입니다. 웹은 sRGB를 기반으로 만들어졌지만, 요즘 대부분의 스마트폰과 많은 노트북은 빨강, 초록, 주황이 눈에 띄게 더 선명한 Display P3를 표시합니다.
1분 분량
색역이란
모든 화면은 빨강, 초록, 파랑 빛을 섞어 색을 만듭니다. 화면이 낼 수 있는 가장 순수한 빨강, 초록, 파랑이 삼각형의 꼭짓점이 되고, 그 삼각형 안의 모든 색이 그 화면의 색역입니다. 삼각형 밖의 색은 그 화면에서 아예 표시할 수 없습니다.
sRGB, Display P3, Rec. 2020
sRGB는 웹의 기본값이자 2016년 이전에 팔린 대부분 모니터의 기준입니다. HEX, rgb(), hsl()은 모두 sRGB 색을 표현합니다.
Display P3는 sRGB보다 약 4분의 1 더 많은 색을 담고, 늘어난 부분은 주로 선명한 초록, 빨강, 주황입니다. iPhone, iPad, Mac과 많은 Android 스마트폰, 고급 노트북이 이 색역을 씁니다. CSS에서는 color(display-p3 r g b)로 쓰거나 크로마가 높은 OKLCH 값으로 씁니다.
Rec. 2020은 그보다도 넓으며 HDR 영상에 쓰입니다. 이 색역을 완전히 표시하는 화면은 매우 드뭅니다.
| 형식 | 값 |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
색역 밖의 색은 어떻게 될까
CSS 색이 화면의 색역을 벗어나면 브라우저는 다른 색을 대신 보여 줘야 합니다. 단순 클리핑은 각 채널을 한계값에서 잘라 내기 때문에 색조가 바뀔 수 있습니다. CSS Color 4는 대신 OKLCH에서 색역 매핑을 하도록 권장합니다. 명도와 색조를 유지하고, 색이 들어갈 때까지 크로마를 낮추는 방식입니다.
PickShade는 sRGB를 벗어나는 모든 색을 표시하고 매핑된 대체 색을 보여 주므로, 구형 화면을 쓰는 사람에게 정확히 어떻게 보일지 알 수 있습니다.
CSS에서 P3 색을 안전하게 쓰는 방법
sRGB 대체 값을 먼저 쓰고 넓은 색역 값을 그다음에 쓰거나, 선명한 값을 color-gamut 미디어 쿼리로 감싸세요.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}자주 묻는 질문
색이 sRGB 안에 있는지 어떻게 알 수 있나요?
PickShade에 붙여 넣어 보세요. sRGB를 벗어난 색에는 색역 경고와 함께 색역 안에 들어오는 가장 가까운 색이 표시됩니다.
Windows에서도 P3 색이 보이나요?
네, 모니터가 P3를 지원하고 브라우저가 디스플레이 프로필을 인식하면 보입니다. sRGB 화면에서는 브라우저가 색을 sRGB로 매핑하므로 깨지는 것은 없습니다.
HEX는 sRGB로 제한되나요?
네. HEX, rgb(), hsl(), hwb()는 항상 sRGB 색을 표현합니다. 넓은 색역의 색에는 oklch()나 color(display-p3 ...)를 쓰세요.