Nowe przestrzenie kolorów i funkcje CSS we wszystkich głównych wyszukiwarkach

Wszystkie popularne wyszukiwarki obsługują teraz nowe przestrzenie kolorów i funkcje CSS. Dowiedz się, jak dodać żywioł do swoich projektów.

Rachel Andrew

CSS obsługuje teraz przestrzenie kolorów, które umożliwiają dostęp do kolorów spoza gamy sRGB. Oznacza to, że możesz korzystać z ekranów HD (o wysokiej rozdzielczości), używając kolorów z gamy HD. Dodaliśmy nowe funkcje, które pozwalają lepiej wykorzystać kolory w internecie.

Dostęp do przestrzeni kolorów z CSS

Mamy już wiele funkcji, które umożliwiają dostęp do kolorów z gamy sRGB – rgb(), hsl() i hwb(). Teraz w przeglądarkach obsługiwana jest funkcja color(), czyli znormalizowany sposób dostępu do kolorów w dowolnej przestrzeni kolorów RGB. Obejmuje to sRGB, Display P3 i Rec2020. Oto kilka przykładów:

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

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Źródło

Obsługiwane są również funkcje umożliwiające dostęp do przestrzeni kolorów innych niż sRGB za pomocą funkcji lch(), lab(), oklch() i oklab().

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Źródło

Informacje o wszystkich tych przestrzeniach znajdziesz w przewodniku po kolorach CSS w wysokiej rozdzielczości.

Funkcja color-mix()

Oprócz tej nowej przestrzeni kolorów wszystkie wyszukiwarki obsługują teraz funkcję color-mix(). Ta funkcja umożliwia mieszanie jednego koloru z innym w dowolnej przestrzeni barw. W poniższym CSS 25% niebieskiego koloru jest mieszane w biały w przestrzeni kolorów srgb.

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

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2

Źródło

color-mix() – więcej informacji

Mamy nadzieję, że nowe funkcje i przestrzenie kolorystyczne sprawią, że internet będzie w żywych kolorach HD. W poszukiwaniu inspiracji zacznij od utworzenia pięknych gradientów za pomocą generatora gradientów HD dostępnego na stronie gradient.style.