색역 설명: sRGB, P3 및 Rec. 2020

화면의 색상은 대부분의 사용자가 결코 생각하지 못하는 한계인 색역으로 제한됩니다. 대부분의 웹 역사에서 이러한 제한은 1996년에 제정된 표준인 sRGB와 같이 거의 모든 장치에서 동일했습니다. 오늘날 최신 휴대폰, 노트북 및 모니터는 일반적으로 sRGB가 허용하는 것보다 훨씬 더 많은 색상을 표시하며 CSS에는 이를 활용할 수 있는 도구가 있습니다.

이 가이드에서는 색 영역이 무엇인지 설명하고 sRGB, 디스플레이 P3 및 Rec를 안내합니다. 2020은 웹 작업에 가장 관련성이 높은 세 가지 색역으로, @media (color-gamut) 기능 쿼리와 함께 CSS 광역 색역을 사용하는 방법을 정확하게 보여줍니다.

색역이란 무엇입니까?

색역은 색상 시스템이 표현하거나 재현할 수 있는 전체 색상 범위입니다. 인간의 눈에 보이는 모든 색상이 모든 색상 시스템에서 표현될 수 있는 것은 아닙니다. 물리적, 기술적 제약으로 인해 모든 시스템은 우리가 인지할 수 있는 것의 하위 집합만 포함합니다.

CIE 1931 색도 다이어그램

색상 과학자들은 CIE 1931 색도 다이어그램(평균 인간의 눈으로 인식할 수 있는 모든 색상의 말굽 모양 2D 맵)을 사용하여 시각적으로 색역을 표현합니다. 말굽의 바깥쪽 경계는 가장 순수하고 채도가 높은 스펙트럼 색상을 나타냅니다. 내부 영역은 채도가 낮고 혼합 색상이 더 많이 나타납니다. 흰색은 중앙 근처에 위치합니다.

특정 색 영역은 이 다이어그램에 다각형으로 표시됩니다. 일반적으로 세 가지 기본 색상(빨간색, 녹색, 파란색)으로 정의되는 삼각형입니다. 해당 삼각형의 영역에 따라 영역이 포함하는 가시 색상의 수가 결정됩니다.

작은 삼각형 = 좁은 영역(적은 색상)
큰 삼각형 = 넓은 영역(더 많은 색상)

모든 영역의 세 가지 원색이 삼각형의 꼭지점 위치를 결정합니다. 원색을 말굽 바깥쪽 가장자리 쪽으로 밀면(더 포화된 원색) 삼각형과 영역이 확장됩니다.

웹 디자인에서 Gamut이 중요한 이유

아주 최근까지 이것은 학문적 관심사였습니다. 사용 중인 거의 모든 디스플레이는 sRGB와 호환되었으며 웹 색상은 보편적으로 sRGB 색상이었습니다. 그러나 Display P3가 Apple 장치(2016년 이후 모든 iPhone, 최신 MacBook, iMac, iPad Pro 및 Studio 디스플레이)의 표준이 되고 HDR 모니터가 Windows 및 게임으로 확산되면서 실용적인 디스플레이 환경이 단편화되었습니다.

sRGB로 제공되는 웹 콘텐츠는 P3 및 Rec에서 여전히 올바르게 보입니다. 2020 디스플레이 — sRGB 색상은 더 넓은 범위의 하위 집합입니다. 그러나 넓은 범위의 색 공간으로 지정된 콘텐츠는 P3 및 Rec.보다 더 풍부하고 채도가 높은 원색을 활용할 수 있습니다. 2020 제안.

sRGB: 1996년 이후 웹 표준

역사와 채택

sRGB(표준 빨간색 녹색 파란색) 색 공간은 1996년 HP와 Microsoft가 공동으로 개발했으며 IEC에서 IEC 61966-2-1로 표준화되었습니다. 그 목표는 소비자 모니터, 프린터 및 웹에 대한 공통 참조를 제공하여 장치 보정 없이도 일관된 색상 재현을 가능하게 하는 것이었습니다.

sRGB는 다음의 기본 색 공간이 되었습니다. - 웹 브라우저(달리 지정하지 않는 한 모든 CSS 색상은 sRGB입니다) - 디지털 카메라(JPEG 파일의 기본값은 sRGB) - 2000년대와 2010년대 대부분의 소비자 모니터 - Windows 디스플레이 하위 시스템 - 표준 SDR(표준 동적 범위) 콘텐츠

sRGB 범위

sRGB는 CIE 1931 색도 다이어그램에 정의된 바와 같이 가시 색 영역의 약 35%를 포괄합니다. 이는 제한적으로 들리지만, 일상 생활에서 접할 수 있는 다양한 자연색과 인공 색상을 포괄하는 실용적인 범위를 포괄합니다.

sRGB 기본 색상은 다음과 같습니다. - 빨간색: 약 x=0.64, y=0.33(약간 주황색-빨간색) - 녹색: 약 x=0.30, y=0.60(황록색) - 파란색: 약 x=0.15, y=0.06(청자색)

CSS의 sRGB

귀하가 작성한 모든 CSS 색상은 달리 명시적으로 지정하지 않는 한 sRGB입니다. 여기에는 다음이 포함됩니다.

16진수 코드: #3B82F6
명명된 색상: blue, coral, rebeccapurple -rgb() 및 rgba(): rgb(59, 130, 246) -hsl() 및 hsla(): hsl(217, 91%, 60%)

이것들은 모두 sRGB 값으로 해석됩니다. #FF0000 값은 정확하게 sRGB 기본 빨간색, 즉 sRGB가 표현할 수 있는 가장 붉은색을 의미합니다. P3 디스플레이에서는 해당 빨간색이 충실하게 렌더링되지만 P3의 더 빨간색 기본 기본 색상을 활용하지 않습니다.

디스플레이 P3: Apple의 최신 표준

디스플레이 P3란 무엇인가요?

디스플레이 P3은 Apple이 Retina 디스플레이용으로 개발한 색 공간으로, 디지털 시네마 프로젝션에 사용되는 DCI-P3 색 공간에서 파생되었습니다. sRGB(D65, 표준 일광 광원)와 동일한 흰색 점 및 동일한 감마를 사용하지만 채도가 더 높은 서로 다른 원색을 정의합니다.

디스플레이 P3은 약 가시 색역의 45%를 커버하며, 이는 sRGB보다 약 26% 더 넓은 영역입니다. 확장된 적용 범위는 빨간색과 녹색 영역에서 가장 두드러지며 파란색에서는 덜 극적인 확장이 이루어집니다.

디스플레이 P3를 지원하는 기기는 무엇인가요?

Apple은 2015~2016년부터 Display P3를 광범위하게 채택했습니다.

iPhone 7 이상 — 모든 후속 iPhone 모델
iPad Pro(9.7인치, 2016) 이상 — 모든 후속 iPad Pro 모델
MacBook Pro(2016년 말) 이상 Retina 디스플레이 포함
iMac(Retina 5K, 2015년 말) 이상
Apple Pro Display XDR, 스튜디오 디스플레이

Windows와 Android 측면에서는 채택률이 덜 균일하기는 하지만 많은 고급 노트북과 휴대폰에도 P3 지원 디스플레이가 함께 제공됩니다. 2025년 현재 대부분의 고급 소비자 장치는 최소 P3을 지원합니다.

CSS에서 P3 색상 지정하기

CSS 색상 레벨 4는 display-p3 색상 공간과 함께 color() 기능을 제공하므로 P3 원색을 직접 사용하는 색상을 지정할 수 있습니다.

/* P3 red — more vivid than sRGB red */
color: color(display-p3 1 0 0);

/* A vivid P3 green */
color: color(display-p3 0 1 0);

/* A rich coral in P3 */
color: color(display-p3 0.95 0.42 0.37);

color(display-p3 R G B)의 세 가지 값은 0-1(0-255 아님)로 정규화됩니다. 이는 rgb() 기능과 다릅니다.

차이점 보기

P3의 실질적인 효과는 채도가 높은 색상에서 가장 잘 드러납니다. 생생한 P3 빨간색[color(display-p3 1 0 0)와 비교 가능]은 P3 지원 디스플레이에서 sRGB 빨간색#FF0000보다 채도가 눈에 띄게 더 높습니다. 최대한의 생동감이 필요한 브랜드 컬러와 영웅 이미지에 대해 P3는 의미 있는 업그레이드를 제공합니다.

추천 2020년: HDR과 영화의 미래

Rec.란 무엇입니까? 2020?

** 추천. 2020**(공식 ITU-R BT.2020)은 UHDTV(Ultra High Definition Television) 및 HDR 콘텐츠에 대한 색상 표준입니다. 이는 2012년 국제전기통신연합(International Telecommunication Union)에 의해 정의되었으며 오늘날 일반 소비자가 사용하는 어떤 것보다 훨씬 더 넓은 범위를 나타냅니다.

추천 2020은 약 가시 색 영역의 75%를 포괄합니다. 이는 sRGB 영역의 두 배 이상이며 P3보다 훨씬 더 넓습니다. 원색은 특정 레이저 파장의 스펙트럼 한계에서 정의됩니다. 즉, 이론적으로 해당 파장에서 가장 포화된 색상임을 의미합니다.

현재 디스플레이 지원

여기에 중요한 주의 사항이 있습니다. 현재 사용 가능한 소비자 디스플레이는 Rec. 2020 영역. 고급 HDR TV는 Rec.의 75~90%를 커버할 수 있습니다. 2020; 전체 범위를 커버하려면 전문 시네마 프로젝터와 특수 HDR 마스터링 모니터가 필요합니다.

그러나 Rec. 2020은 HDR10, Dolby Vision 및 HLG를 포함한 HDR 콘텐츠 표준에 대한 참조 영역입니다. 디스플레이가 완전히 재현할 수 없더라도 Rec. 2020년은 더 작은 영역의 화면에 표시할 수 있도록 톤 매핑됩니다.

`@media (color-gamut)`를 사용한 CSS 광역 색상

CSS는 디스플레이 영역 기능을 감지하고 적절한 색상을 제공하기 위해 특별히 미디어 쿼리를 제공합니다.

@media (color-gamut: srgb) {
  /* Supported by virtually all color displays */
}

@media (color-gamut: p3) {
  /* Display supports at least the P3 gamut */
}

@media (color-gamut: rec2020) {
  /* Display supports at least the Rec. 2020 gamut */
}

값은 점진적입니다. p3는 디스플레이가 최소 P3을 지원함을 의미하며(따라서 sRGB도 포함됨) rec2020는 디스플레이가 최소 Rec를 지원함을 의미합니다. 2020(P3 및 sRGB도 포함).

점진적인 향상 패턴

권장되는 접근 방식은 기본 sRGB 색상을 먼저 정의한 다음 더 넓은 색역 디스플레이를 위해 점진적으로 향상시키는 것입니다.

.hero-button {
  /* sRGB fallback — works on all displays */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* More vivid red on P3 displays */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Even more vivid on Rec. 2020 displays */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

표준 sRGB 모니터에서는 버튼에 빨간색 16진수 #E63946가 표시됩니다. iPhone, MacBook Pro 또는 최신 광역 모니터에서는 더욱 생생한 P3 버전을 보여줍니다. Rec.가 가능한 디스플레이에서. 2020년, 가장 생생한 버전을 선보입니다.

넓은 영역에 `oklch()` 사용

OKLCH 색상 공간은 특정 영역에 국한되지 않지만 sRGB 외부의 색상을 자연스럽게 처리할 수 있습니다. sRGB 측면에서 0-1 범위를 벗어나는 값은 자동으로 넓은 영역이 됩니다. 이는 OKLCH를 교차 색역 색상 작업에 편리하게 만듭니다.

.accent {
  /* OKLCH can express P3 and beyond */
  color: oklch(60% 0.25 27deg);
}

브라우저는 지정된 OKLCH 색상을 디스플레이가 지원하는 모든 영역에서 재현 가능한 가장 가까운 색상으로 매핑합니다. 디스플레이가 P3을 지원하는 경우 P3 색상으로 매핑됩니다. sRGB인 경우 가장 가까운 sRGB로 클립됩니다.

이것이 디자인 시스템에 OKLCH를 사용하는 강력한 이유입니다. 의도한 색상 인식을 지정할 수 있고 브라우저는 자동으로 영역 매핑을 처리합니다. ColorFYI의 색상 변환기를 사용하여 sRGB 16진수 값과 그에 상응하는 OKLCH 값을 변환하세요.

`color-gamut: srgb` 베이스라인

모든 컬러 디스플레이는 최소 color-gamut: srgb를 지원합니다. 이는 모든 비단색 디스플레이와 일치합니다. 거의 필요하지 않은 가상의 흑백 디스플레이가 아닌 컬러 디스플레이를 대상으로 하려는 경우에만 이 미디어 쿼리 값이 필요합니다.

실제로 유용한 쿼리는 color-gamut: p3입니다. 이는 Apple 생태계와 증가하는 Android 및 Windows 장치 점유율을 포괄합니다.

브라우저 지원

2025년 현재: - @media (color-gamut) — 모든 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. - color(display-p3) — 모든 주요 브라우저에서 지원 - color(rec2020) — Chrome 및 Safari에서 지원됩니다. Firefox 지원 팔로우 - oklch() — 모든 주요 브라우저에서 지원

오늘날 일반적으로 사용되는 브라우저 중 이러한 기능을 구문 분석하지 못하는 브라우저는 없습니다. 넓은 영역의 색상을 렌더링하거나 이전 sRGB 선언으로 우아하게 대체됩니다.

웹 디자인 프로젝트를 위한 실무 지침

지금 P3 색상을 사용해야 할까요?

예, 점진적인 개선 접근 방식을 사용합니다. 단점 위험은 0입니다. sRGB 폴백은 디자인이 모든 디스플레이에서 올바르게 보이도록 보장합니다. 장점은 점점 더 많은 청중이 더욱 생생하고 풍부한 색상을 본다는 것입니다.

가장 영향력 있는 사용 사례는 다음과 같습니다. - 최대한 생생하게 나타나야 하는 브랜드 색상 및 액센트 - 활기가 참여를 유도하는 영웅 이미지 및 프로모션 그래픽 - 더 넓은 색상 범위를 통해 더 뚜렷한 범주 색상을 허용하는 데이터 시각화

P3에서 가장 유용한 색상은 무엇입니까?

sRGB에 비해 P3의 이득은 다음에서 가장 큽니다. - 생생한 빨간색 및 주황색: P3 빨간색 원색이 눈에 띄게 더 채도가 높습니다. - 포화된 녹색: P3가 녹색-노란색 영역으로 크게 확장됩니다. - 생생한 핑크 및 마젠타: P3는 생생한 패션/뷰티 팔레트를 더욱 잘 포착합니다.

중성색, 어두운 색상 및 파스텔 톤은 sRGB와 P3 사이에 눈에 보이는 차이가 거의 없습니다. 두 색상 공간이 실질적으로 겹치는 영역 중심 근처에 있기 때문입니다.

실용적인 작업 흐름

평소대로 색상 시스템을 16진수(sRGB)로 디자인합니다.
최대의 생동감이 중요한 2~5가지 색상을 식별합니다(기본 브랜드 색상, 영웅 강조, 주요 UI 상태).
ColorFYI의 색상 변환기를 사용하여 각각에 해당하는 OKLCH를 찾습니다.
CSS에서 OKLCH 값(또는 color(display-p3)와 동등한 값)을 지정하고 브라우저가 영역 매핑을 처리하도록 합니다.
P3 지원 디스플레이(모든 최신 MacBook 또는 iPhone)에서 테스트하여 시각적 개선을 확인합니다.

영역 비교 요약

표준	영역 범위	주요 용도	CSS 함수
sRGB	~35%의 가시성	웹(범용 기준선)	`rgb()`, `hsl()`, 16진수
P3 표시	~45%의 가시성	Apple 장치, 최신 휴대폰/노트북	`color(display-p3)`
추천 2020	~75%의 가시성	HDR 비디오, 영화	`color(rec2020)`

주요 내용

색역은 시스템이 표현할 수 있는 전체 색상 범위이며 CIE 색도 다이어그램에서 삼각형으로 시각화됩니다. 더 넓은 원색 = 더 큰 삼각형 = 더 많은 색상.
sRGB는 1996년부터 보편적인 웹 표준이 되어 눈에 보이는 색상의 약 35%를 포괄합니다. 모든 표준 CSS 색상 값(rgb(), hsl(), hex)은 sRGB입니다.
디스플레이 P3은 가시 색상의 약 45%를 커버하며 2016년 이후 모든 Apple 장치(iPhone, MacBook, iPad Pro, iMac)와 많은 최신 Windows 및 Android 장치에서 표준입니다.
** 추천. 2020**은 가시 색상의 약 75%를 포괄하며 HDR 콘텐츠의 참조 색역으로 사용되지만 오늘날 이를 완전히 재현하는 소비자 디스플레이는 거의 없습니다.
@media (color-gamut: p3)를 사용하면 sRGB를 기본 대체 요소로 사용하여 P3 지원 디스플레이의 색상을 점진적으로 향상시킬 수 있습니다.
color(display-p3 R G B)는 CSS에서 P3 색상 공간의 색상을 지정합니다. 값은 0-1로 정규화됩니다.
oklch()는 넓은 영역의 색상을 자연스럽게 표현하며 디자인 시스템에서 점점 더 선호되고 있습니다. 브라우저는 디스플레이 기능에 대한 영역 매핑을 자동으로 처리합니다.
ColorFYI의 색상 변환기를 사용하여 넓은 범위의 색상 시스템을 구축할 때 16진수, OKLCH 및 기타 색상 공간 간을 변환합니다.

색역 설명: sRGB, P3 및 Rec. 2020

Embed This Widget

색역이란 무엇입니까?

CIE 1931 색도 다이어그램

웹 디자인에서 Gamut이 중요한 이유

sRGB: 1996년 이후 웹 표준

역사와 채택

sRGB 범위

CSS의 sRGB

디스플레이 P3: Apple의 최신 표준

디스플레이 P3란 무엇인가요?

디스플레이 P3를 지원하는 기기는 무엇인가요?

CSS에서 P3 색상 지정하기

차이점 보기

추천 2020년: HDR과 영화의 미래

Rec.란 무엇입니까? 2020?

현재 디스플레이 지원

추천 CSS의 2020

`@media (color-gamut)`를 사용한 CSS 광역 색상

점진적인 향상 패턴

넓은 영역에 `oklch()` 사용

`color-gamut: srgb` 베이스라인

브라우저 지원

웹 디자인 프로젝트를 위한 실무 지침

지금 P3 색상을 사용해야 할까요?

P3에서 가장 유용한 색상은 무엇입니까?

실용적인 작업 흐름

영역 비교 요약

주요 내용

관련 색상

관련 브랜드

관련 도구

색상 변환기

색역이란 무엇입니까?

CIE 1931 색도 다이어그램

웹 디자인에서 Gamut이 중요한 이유

sRGB: 1996년 이후 웹 표준

역사와 채택

sRGB 범위

CSS의 sRGB

디스플레이 P3: Apple의 최신 표준

디스플레이 P3란 무엇인가요?

디스플레이 P3를 지원하는 기기는 무엇인가요?

CSS에서 P3 색상 지정하기

차이점 보기

추천 2020년: HDR과 영화의 미래

Rec.란 무엇입니까? 2020?

현재 디스플레이 지원

추천 CSS의 2020

@media (color-gamut)를 사용한 CSS 광역 색상

점진적인 향상 패턴

넓은 영역에 oklch() 사용

color-gamut: srgb 베이스라인

브라우저 지원

웹 디자인 프로젝트를 위한 실무 지침

지금 P3 색상을 사용해야 할까요?

P3에서 가장 유용한 색상은 무엇입니까?

실용적인 작업 흐름

영역 비교 요약

주요 내용

관련 색상

관련 브랜드

관련 도구

색상 변환기

`@media (color-gamut)`를 사용한 CSS 광역 색상

넓은 영역에 `oklch()` 사용

`color-gamut: srgb` 베이스라인