Wszystkie popularne wyszukiwarki obsługują teraz nowe przestrzenie kolorów i funkcje CSS. Dowiedz się, jak dodać żywioł do swoich projektów.
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ł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().
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);
}
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.