이제 모든 주요 엔진이 새로운 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);
}
lch(), lab(), oklch(), oklab()를 사용하여 sRGB 이외의 색공간에 액세스할 수 있는 여러 함수도 지원됩니다.
고화질 CSS 색상 가이드에서 이러한 다양한 색상 공간을 모두 확인할 수 있습니다.
color-mix() 함수
이러한 새로운 색상 공간뿐만 아니라 모든 엔진이 이제 color-mix() 함수를 지원합니다. 이 함수를 사용하면 모든 색상 공간에서 한 색상을 다른 색상으로 혼합할 수 있습니다. 다음 CSS에서 srgb 색상 공간에서 파란색의 25% 가 흰색으로 섞여 있습니다.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
이러한 새로운 기능과 색상 공간은 웹에 생동감 있는 HD 색상을 제공합니다. 아이디어를 얻고 싶다면 gradient.style에서 HD 그래디언트 생성기를 사용해 멋진 그래디언트를 만들어 보세요.