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

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

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

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

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

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

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

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