HD CSS 색상으로 이전

이 문서는 고화질 CSS 색상 가이드의 일부입니다.

넓은 색 영역 디스플레이를 지원하도록 웹 프로젝트 색상을 업데이트하는 두 가지 기본 전략이 있습니다.

1. 단계적 성능 저하: 새로운 색상 공간을 사용하고 브라우저와 운영체제가 디스플레이 기능에 따라 표시할 색상을 파악하도록 합니다.

2. 점진적 개선: @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개가 있습니다.

1. @media (color)
2. @media (color-index)

자바스크립트에서 확인

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 디버깅 기능에 대해 자세히 알아보세요.

다음 단계

더 활기차고 일관된 조작과 보간이 가능하며 전반적으로 사용자에게 더욱 다채로운 환경을 제공합니다.

가이드에서 색상 리소스에 관해 자세히 알아보세요.