모든 주요 엔진이 이제 새로운 CSS 색상 공간 및 함수를 지원합니다. 디자인에 생기를 불어넣는 방법을 알아보세요.
CSS는 이제 sRGB gamut 밖의 색상에 액세스할 수 있는 색상 공간을 지원합니다. 즉, HD 색 영역의 색상을 사용하여 HD (고화질) 디스플레이를 지원할 수 있습니다. 이번 지원으로 웹에서 색상을 더 효과적으로 활용할 수 있는 새로운 함수가 제공됩니다.
CSS에서 색상 공간에 액세스
이미 sRGB 색 영역 내의 색상에 액세스할 수 있는 여러 함수(rgb()
, hsl()
, hwb()
)가 있습니다. 이제 브라우저에서는 color()
함수가 지원됩니다. 이 함수는 모든 RGB 색 공간 내의 색상에 액세스하는 정규화된 방법입니다. 여기에는 sRGB, Display P3, Rec2020이 포함됩니다. 다음 CSS에서 몇 가지 예를 확인할 수 있습니다.
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
lch()
, lab()
, oklch()
, oklab()
를 사용하여 sRGB 이외의 색상 공간에 액세스할 수 있는 여러 함수도 지원됩니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
고화질 CSS 색상 가이드에서 다양한 색상 공간에 대해 알아볼 수 있습니다.
color-mix()
함수
이러한 새로운 색상 공간 외에도 이제 모든 엔진에서 color-mix()
함수를 지원합니다. 이 함수를 사용하면 모든 색상 공간에서 한 색상을 다른 색상으로 혼합할 수 있습니다. 다음 CSS에서는 srgb 색상 공간에서 파란색의 25% 가 흰색으로 혼합됩니다.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
이러한 새로운 기능과 색상 공간은 웹에 생동감 있는 HD 색상을 제공합니다. 아이디어를 얻으려면 gradient.style에서 HD 그라데이션 생성기를 사용해 아름다운 그라데이션을 만들어 보세요.