css

css color Level4 Display-P3

퓨어프 2023. 10. 17. 10:37
반응형

https://www.w3.org/TR/css-color-4/#predefined

 

CSS Color Module Level 4

 

www.w3.org

 

 

Display-P3 색 공간에는 sRGB에서 사용할 수 없는 생생한 색상이 포함되어 있습니다.

 

 

 

 

 

 

CSS 색상 모듈 레벨 4에서는 웹에서 Display-P3 색상 공간을 사용하는 구문을 도입했습니다.

 

color: color(display-p3 1 0.5 0)

 

이전에 사용 가능한 구문은 sRGB 색상 공간의 색상을 정의했습니다. hsl(42, 70%, 50%), rgb(3, 5, 11), #abc— 이 색상은 모두 sRGB 색상 공간에 있습니다.

Display-P3는 sRGB의 상위 집합입니다. 약 50% 더 큽니다.

 

 

흰색 선은 sRGB의 가장자리를 나타냅니다. 오른쪽 상단의 모든 항목은 sRGB에서 사용할 수 없는 Display-P3 색상입니다. 녹색은 크게 확장되는 반면 파란색은 거의 확장되지 않습니다.

 

지원되는 브라우저

https://caniuse.com/?search=Display-P3 

 

"Display-P3" | Can I use... Support tables for HTML5, CSS3, etc

CSS color() function The CSS `color()` function allows the browser to display colors in any color space, such as the P3 color space which can display colors outside of the default sRGB color space.

caniuse.com

 

 

지원하는곳만 사용하고 안되는곳은 이전 문법으로 적용할수있습니다.

header {
    color: rgb(0, 255, 0);
    color: color(display-p3 0 1 0);
}

지원하지 않는곳에서 사용하면  color(...)잘못된 값으로 구문 분석됩니다. 잘못된 값이 있는 CSS 속성은 브라우저에서 무시됩니다.

 

 

 

@supports 기능 쿼리를 사용할 수 있습니다. 

/* sRGB color. */
:root {
    --bright-green: rgb(0, 255, 0);
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}

header {
    color: var(--bright-green);
}

 

 

CSS의 미디어 쿼리 감지(하드웨어 지원)

@media (color-gamut: p3) {
    /* Do colorful stuff. */
}

 

 

javascript

if (window.matchMedia("(color-gamut: p3)").matches) {
    // Do colorful stuff.
}

 

 

웹 검사기
Safari Technology Preview 97부터 Web Inspector에는 P3 지원 색상 선택기가 포함됩니다

 

흰색 선은 가장자리 sRGB 색 공간을 그립니다. 오른쪽 상단의 모든 색상은 Display-P3 색상 공간에서만 사용할 수 있습니다. 색상 사각형을 마우스 오른쪽 버튼으로 클릭하면 sRGB 색상 공간으로 변환하는 옵션이 표시됩니다.

 

 

 

색상이 sRGB 색 공간 내에 있으면 "Convert to sRGB" 메뉴 항목이 표시됩니다. 외부에 있는 경우 - "sRGB에 고정".

Web Inspector에는 sRGB 색상을 Display-P3으로 변환하는 컨텍스트 메뉴도 포함되어 있습니다.

반응형