웹을 위한 색 공간: sRGB, DCI-P3, Rec.2020, 감마, 그리고 동일한 16진수 색상이 두 화면에서 다르게 보이는 이유
색 공간이란: 원색, 색역, 기준 흰점
색 공간은 세 가지를 정의합니다: 원색 집합, 기준 흰점, 그리고 전달 함수입니다. 원색은 CIE 1931 xy 색도 다이어그램 위의 정확한 색도 좌표로 지정됩니다——이것은 표준 관측자가 인식할 수 있는 모든 색을 나타내는 2차원 지도입니다. 세 원색은 이 다이어그램 위에 삼각형을 형성합니다. 삼각형 안에 있는 모든 색은 원색을 다양한 비율로 혼합하여 재현할 수 있고, 바깥에 있는 색은 재현할 수 없습니다. 이 삼각형이 색 공간의 색역(gamut)입니다.
기준 흰점은 세 원색 모두가 최대 강도로 구동될 때 나타나는 색입니다. 대부분의 소비자용 및 웹 표준에서 이것은 D65——약 6500 K 색온도의 평균적인 주광을 모델링한 표준 광원——입니다. 동일한 색역 원색을 가지지만 흰점이 다른 두 디스플레이는 중성 회색을 서로 다르게 렌더링합니다. 브라우저가 CSS 값 #808080을 해석할 때, D65 흰점의 sRGB를 가정하고 디스플레이가 그 가정에 맞는다고 전제합니다.
sRGB: 1996년에 표준화된 웹의 범용 기준
sRGB는 1996년 국제전기기술위원회에서 IEC 61966-2-1로 정의되었습니다. 1990년대 중반 전형적인 소비자용 CRT 모니터의 특성에 맞추어 설계되었습니다. 빨간 원색의 CIE xy 좌표는 약 (0.64, 0.33), 초록은 (0.30, 0.60), 파란은 (0.15, 0.06)입니다. 결과적인 색역 삼각형은 CIE 1931 색도 다이어그램에서 표준 관측자가 볼 수 있는 색의 약 35%를 포함합니다.
모든 CSS 16진수 색상, ICC 프로파일이 내장되지 않은 PNG나 JPEG, HTML canvas의 모든 픽셀은 암묵적으로 sRGB에 속합니다. 브라우저는 다른 지시가 없는 한 sRGB를 가정합니다. 실제 한계는 색역의 가장자리에서 나타납니다: 고채도의 빨간색, 선명한 녹색, 순수한 청록색은 완전히 표현할 수 없습니다. 야외에서 촬영한 잘 익은 토마토는 sRGB 색역 바깥에 있는 빨간색을 가진 경우가 많고, 이미지 파일은 그 빨간색을 가장 가까운 sRGB 값으로 클리핑하여 실물보다 화면에서 약간 덜 선명하게 보입니다.
DCI-P3: 소비자 디스플레이에 채택된 영화관 표준
DCI-P3는 Digital Cinema Initiatives 컨소시엄에서 시작되었습니다. 원색이 sRGB에 비해 이동되어 있습니다: 빨간 원색이 약간 주황색 방향으로 이동하고 (xy 약 0.680, 0.320), 초록은 순수한 녹색 방향으로 더 확장됩니다 (0.265, 0.690). 결과적인 색역은 CIE 1931 색도 다이어그램의 약 45.5%를 커버합니다——sRGB보다 약 26% 더 넓은 면적입니다. 이 더 넓은 색역은 디지털 시네마 프로젝터가 아날로그 필름에 필적하는 채도 높은 색상을 재현할 수 있도록 설계되었습니다.
소비자 디스플레이가 P3 원색을 채택하기 시작한 것은 2015년 무렵으로, Apple이 27인치 iMac에 P3 지원 패널을 도입했고 2016년 iPhone 7에서도 채택되었습니다. P3 색 공간을 사용하는 P3 디스플레이에서 #FF0000으로 렌더링된 픽셀은 sRGB 디스플레이에서의 동일한 값보다 확연히 더 채도 높은 빨간색으로 나타납니다. CSS는 color() 함수를 통해 P3를 노출합니다: color(display-p3 1 0 0)으로 가장 채도 높은 P3 빨강을 지정합니다. 2023년 이후 모든 주요 브라우저가 이 구문을 지원합니다.
Rec.2020: 방송의 미래 표준과 현재 디스플레이의 격차
Rec.2020 (공식적으로 ITU-R BT.2020)은 2012년 국제전기통신연합에서 초고화질 텔레비전의 표준으로 정의되었습니다. 원색이 단색광에 근접합니다: 빨강은 약 630 nm, 초록은 약 532 nm, 파랑은 약 467 nm 근처에서 정의됩니다. 결과적인 색역은 CIE 1931 색도 다이어그램의 약 75.8%를 커버하며, sRGB의 약 두 배 면적입니다.
표준과 실제 사이의 격차는 상당합니다: 2025년 현재 완전한 Rec.2020 색역을 재현할 수 있는 소비자 디스플레이는 없습니다. 고급 전문가용 기준 모니터는 3차원 색 외관 모델 CIECAM02로 측정하면 Rec.2020 볼륨의 약 75–80%에 도달할 수 있습니다. HDR 비디오 콘텐츠는 PQ 또는 HLG 전달 함수와 결합된 Rec.2020 원색으로 마스터링되는 경우가 많지만, 스트리밍 플랫폼은 일반적으로 톤 매핑을 통해 Display P3 또는 sRGB로 다운매핑된 최종 신호를 전달합니다.
감마와 전달 함수: sRGB 인코딩이 순수한 멱법칙이 아닌 이유
'감마 2.2'라는 표현은 sRGB를 설명하는 데 흔히 사용되지만, sRGB는 순수한 멱법칙이 아닌 구간별 전달 함수를 사용합니다. IEC 61966-2-1 표준은 두 구간을 정의합니다: 매우 낮은 휘도 값(선형 C가 0.0031308 이하)에서는 C × 12.92의 선형 인코딩을, 이 임계값을 초과하면 1.055 × C^(1/2.4) − 0.055에 근접한 멱 곡선을 사용합니다. 결과는 사용 가능한 범위의 대부분에서 감마 2.2에 매우 근접합니다.
이 인코딩은 이미지 처리에서 중요합니다. 감마 인코딩된 도메인에서 인접 픽셀을 평균하여 이미지를 축소하면 선형 광에서 평균하는 것보다 약간 어두운 결과가 나타납니다——이것은 '감마 암화 평균 문제'로 알려진 아티팩트입니다. 올바른 이미지 다운스케일링은 먼저 값을 선형화하고, 평균을 낸 후 재인코딩합니다. CSS 그라디언트와 color-mix()는 기본적으로 sRGB 공간에서 블렌딩되므로, 선형 광이 아닌 감마 압축된 값을 통해 보간합니다.
동일한 16진수 색상이 두 화면에서 다르게 보이는 이유
여러 독립적인 요인이 #FF6600이 한 화면에서 다른 화면과 다르게 보이는 이유를 설명합니다. 첫째, 디스플레이가 더 넓은 물리적 색역(P3 하드웨어)을 가지지만 OS의 색 관리가 없는 경우, sRGB 신호 값을 더 넓은 원색 색역으로 단순히 확장하여 모든 색이 과채도로 보일 수 있습니다. 둘째, 미보정 디스플레이는 sRGB 표준이 가정하는 것과 다른 실제 흰점, 감마 곡선 또는 색온도를 가질 수 있습니다. 셋째, 브라우저의 색 관리 지원은 역사적으로 일정하지 않았습니다: macOS의 Safari는 완전한 ICC 프로파일 색 관리를 적용하지만 다른 브라우저의 이전 버전은 부분적인 지원만 했습니다.
이미지에 내장되거나 보정 소프트웨어가 디스플레이에 적용한 ICC 색 프로파일은 해당 콘텐츠의 인코딩된 색 공간에서 디스플레이의 실제 측정 응답으로의 매핑을 설명합니다. OS 색 관리 파이프라인——macOS의 ColorSync, Windows의 Windows Color System——이 연결된 각 디스플레이에 대해 이 변환을 수행합니다. 넓은 색역 디스플레이를 목표로 하는 웹 개발자는 @media (color-gamut: p3)를 사용하여 선명한 인터페이스 색상에 color(display-p3 ...) 값을 제공하고, 일반 16진수를 sRGB 대체값으로 유지할 수 있습니다. TeaFun의 색상 팔레트와 색맹 시뮬레이션 도구는 sRGB에서 작동합니다.