Все основные движки теперь поддерживают новые цветовые пространства и функции CSS. Узнайте, как они могут придать живости вашим проектам.
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);
}
Также поддерживается несколько функций, обеспечивающих доступ к цветовым пространствам, отличным от sRGB, с помощью lch() , lab() , oklch() и oklab() .
Вы можете узнать обо всех этих различных цветовых пространствах в руководстве по цветам CSS высокой четкости .
Функция color-mix()
Помимо этих новых цветовых пространств, все движки теперь поддерживают функцию color-mix() . Эта функция позволяет смешивать один цвет с другим в любом цветовом пространстве. В следующем CSS 25% синего смешивается с белым в цветовом пространстве srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Эти новые функции и цветовые пространства обещают привнести в Интернет яркие цвета HD. Для вдохновения начните с создания красивых градиентов с помощью генератора градиентов HD по адресу градиент.стиль .