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

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

Rachel Andrew

기념: 이제 세 가지 주요 브라우저 엔진에서 모두 이 웹 기능을 사용할 수 있습니다.

이제 CSS에서 sRGB 색 공간 외부의 색상에 액세스할 수 있는 색상 공간을 지원합니다. 즉, 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);
}

브라우저 지원

• 111
• 111
• 113
• 15

소스

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

브라우저 지원

• 111
• 111
• 113
• 15

소스

고해상도 CSS 색상 가이드에서 이러한 다양한 색상 공간에 대해 자세히 알아보세요.

color-mix() 함수

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

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

브라우저 지원

• 111
• 111
• 113
• 16.2

소스

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

이러한 새로운 함수와 색상 공간은 웹에 선명한 HD 색상을 제공할 것으로 기대됩니다. 아이디어를 얻으려면 gradient.style에서 HD 그라데이션 생성기를 사용하여 멋진 그라데이션을 만들어 보세요.