이 문서는 고화질 CSS 색상 가이드의 일부입니다.
넓은 색 영역 디스플레이를 지원하도록 웹 프로젝트 색상을 업데이트하는 두 가지 기본 전략이 있습니다.
단계적 성능 저하: 새로운 색상 공간을 사용하고 브라우저와 운영체제가 디스플레이 기능에 따라 표시할 색상을 파악하도록 합니다.
점진적 개선:
@supports
및@media
를 사용하여 사용자 브라우저의 기능을 평가하고 조건이 충족되면 넓은 색 영역을 제공합니다.
브라우저가 display-p3
색상을 이해하지 못하는 경우:
color: red;
color: color(display-p3 1 0 0);
브라우저가 display-p3
색상을 이해하는 경우:
color: red;
color: color(display-p3 1 0 0);
각각에는 장단점이 있습니다. 다음은 장단점을 나열한 예시입니다.
단계적 성능 저하
- 장점
- 가장 간단한 경로입니다.
- 넓은 색 영역 디스플레이가 아닌 경우 브라우저 영역은 sRGB에 매핑되거나 sRGB에 고정되므로 책임은 브라우저에 있습니다.
- 단점
- 브라우저에서 마음에 들지 않는 색상으로 색 영역 클램프 또는 색 영역을 조정할 수 있습니다.
- 브라우저가 색상 요청을 이해하지 못해 완전히 실패할 수 있습니다. 그러나 색상을 두 번 지정하여 이해한 이전 색상으로 대체하도록 하여 완화할 수 있습니다.
점진적 개선
- 장점
- 관리형 색상 재현으로 더 세밀한 제어가 가능합니다.
- 현재 색상에 영향을 주지 않는 추가 전략
- 단점
- 별도의 색상 문법 두 개를 관리해야 합니다.
- 별도의 색 영역 두 개를 관리해야 합니다.
색 영역 및 색공간 지원 확인
브라우저에서 CSS 및 JavaScript의 폭넓은 색 영역 기능과 색 구문 지원을 확인할 수 있습니다. 사용자가 가진 정확한 색상 영역은 제공되지 않고 사용자 개인 정보 보호를 유지하기 위해 일반화된 답변이 제공됩니다. 하지만 색 공간은 사용자의 하드웨어 기능(예: gamut)과 관련이 없으므로 정확한 색 공간 지원이 제공됩니다.
색 영역 지원 쿼리
다음 코드 예에서는 디스플레이에서 방문하는 사용자의 색상 범위를 확인합니다.
CSS에서 확인
가장 구체적인 지원 문의는 dynamic-range
미디어 쿼리입니다.
@media (dynamic-range: high) {
/* safe to use HD colors */
}
color-gamut
미디어 쿼리로 대략적인 지원 또는 그 이상의 지원을 요청할 수 있습니다.
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
지원 확인을 위한 추가 미디어 쿼리 2개가 있습니다.
자바스크립트에서 확인
JavaScript의 경우 window.matchMedia()
함수를 호출하여 평가를 위한 미디어 쿼리를 전달할 수 있습니다.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
위 패턴은 나머지 미디어 쿼리에도 복사할 수 있습니다.
색상 공간 지원 쿼리
다음 코드 예에서는 방문하는 사용자의 브라우저와 작업할 색상 공간 선택을 확인합니다.
CSS에서 확인
개별 색상 공간 지원 여부는 @supports
쿼리를 사용하여 문의할 수 있습니다.
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
자바스크립트에서 확인
자바스크립트의 경우 CSS.supports()
함수를 호출하고 속성과 값 쌍을 전달하여 브라우저가 이해하는지 확인할 수 있습니다.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
하드웨어 및 파싱 확인 함께 사용하기
각 브라우저에서 새로운 색상 기능을 구현할 때까지 기다리는 동안 하드웨어 기능과 색상 파싱 기능을 모두 확인하는 것이 좋습니다. 다음은 색상을 고화질로 점진적으로 개선할 때 주로 사용합니다.
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Chrome DevTools로 색상 디버그
Chrome DevTools가 업데이트되었으며 개발자가 HD 색상을 생성, 변환, 디버그하는 데 도움이 되는 새로운 도구가 제공됩니다.
색상 선택 도구 업데이트됨
색상 선택 도구가 이제 새로운 색상 공간을 모두 지원합니다. 작성자가 채널 값과 같은 방식으로 상호작용할 수 있습니다.
영역 경계
색 영역 경계선도 추가되어 srgb와 display-p3 색 영역 사이에 선이 그려졌습니다. 선택한 색상이 속하는 색 영역을 명확히 합니다.
이를 통해 작성자는 HD 색상과 HD가 아닌 색상을 시각적으로 구분할 수 있습니다.
color()
함수와 새 색공간은 HD가 아닌 색과 HD 색을 모두 생성할 수 있기 때문에 특히 유용합니다. 특정 색상이 속한 색 영역을 확인하려면 색상 선택 도구를 팝업으로 표시합니다.
색상 변환
DevTools는 수년 동안 hsl, hwb, rgb, 16진수와 같은 지원되는 형식 간에 색상을 변환할 수 있었습니다. 스타일 창의 정사각형 색상 견본에서 shift + click
를 사용하여 이 변환을 실행합니다. 새로운 색상 도구는 전환을 순환할 뿐 아니라 작성자가 원하는 변환을 보고 선택할 수 있는 대화상자를 생성합니다.
변환할 때 변환이 공간에 맞게 잘렸는지 아는 것이 중요합니다. 이제 DevTools에 변환된 색상으로 표시되는 경고 아이콘이 이 클리핑을 알립니다.
DevTools의 CSS 디버깅 기능에 대해 자세히 알아보세요.
다음 단계
더 활기차고 일관된 조작과 보간이 가능하며 전반적으로 사용자에게 더욱 다채로운 환경을 제공합니다.
가이드에서 색상 리소스에 관해 자세히 알아보세요.