color-gamut

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2023년 2월⁩.

CSS 미디어 특성인 color-gamut 은 사용자 에이전트 와 출력 장치가 지원하는 대략적인 색역 범위를 기반으로 CSS 스타일을 적용하는 데에 사용됩니다.

구문

color-gamut 특성은 다음 색 공간 의 키워드 값에 따라 정해집니다.

srgb: 사용자 에이전트와 출력 장치가 sRGB 색역 이상을 지원할 수 있습니다. 대부분의 색상 디스플레이가 여기에 포함됩니다.
p3: 사용자 에이전트와 출력 장치가 Display P3 색 공간에 지정된 색역 이상을 지원할 수 있습니다. P3 색역은 sRGB 색역보다 크며 이를 포함합니다.
rec2020: 사용자 에이전트와 출력 장치가 ITU-R Recommendation BT.2020 색 공간에 지정된 색역 이상을 사용할 수 있습니다. REC. 2020 색역은 P3 색역보다 크며 이를 포함합니다.

html

<p>테스트입니다.</p>

css

p {
  padding: 10px;
  border: solid;
}

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}

Specification
Media Queries Level 4 # color-gamut

This page was last modified on ⁨2025년 10월 8일⁩ by MDN contributors.