모든 주요 엔진의 새로운 CSS 색상 공간 및 함수

모든 주요 엔진이 이제 새로운 CSS 색상 공간 및 함수를 지원합니다. 디자인에 생기를 불어넣는 방법을 알아보세요.

Rachel Andrew

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);
}

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

소스

lch(), lab(), oklch(), oklab()를 사용하여 sRGB 이외의 색상 공간에 액세스할 수 있는 여러 함수도 지원됩니다.

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

소스

고화질 CSS 색상 가이드에서 다양한 색상 공간에 대해 알아볼 수 있습니다.

color-mix() 함수

이러한 새로운 색상 공간 외에도 이제 모든 엔진에서 color-mix() 함수를 지원합니다. 이 함수를 사용하면 모든 색상 공간에서 한 색상을 다른 색상으로 혼합할 수 있습니다. 다음 CSS에서는 srgb 색상 공간에서 파란색의 25% 가 흰색으로 혼합됩니다.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari 16.2. <ph type="x-smartling-placeholder">

소스

color-mix()에 관해 자세히 알아보기

이러한 새로운 기능과 색상 공간은 웹에 생동감 있는 HD 색상을 제공합니다. 아이디어를 얻으려면 gradient.style에서 HD 그라데이션 생성기를 사용해 아름다운 그라데이션을 만들어 보세요.