Новые цветовые пространства и функции CSS во всех основных движках.

Все основные движки теперь поддерживают новые цветовые пространства и функции 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);
}

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 15.

Источник

Также поддерживается несколько функций, обеспечивающих доступ к цветовым пространствам, отличным от sRGB, с помощью lch() , lab() , oklch() и oklab() .

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 15.

Источник

Вы можете узнать обо всех этих различных цветовых пространствах в руководстве по цветам CSS высокой четкости .

Функция color-mix()

Помимо этих новых цветовых пространств, все движки теперь поддерживают функцию color-mix() . Эта функция позволяет смешивать один цвет с другим в любом цветовом пространстве. В следующем CSS 25% синего смешивается с белым в цветовом пространстве srgb.

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

Поддержка браузера

  • Хром: 111.
  • Край: 111.
  • Фаерфокс: 113.
  • Сафари: 16.2.

Источник

Узнайте больше о color-mix()

Эти новые функции и цветовые пространства обещают привнести в Интернет яркие цвета HD. Для вдохновения начните с создания красивых градиентов с помощью генератора градиентов HD по адресу градиент.стиль .