Как сделать динамические цвета в CSS

Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. 

С помощью прозрачности

Возможно, вы уже знаете, как создавать цвета с помощью пользовательских свойств CSS и альфа-канала. Освежим память: 

:root {
--color: 255 255 0;
}
.selector {
background-color: rgb(var(--color) / 0.5);
}

Код выше — самый простой для создания пользовательских свойств цвета, но несовершенный. Нужно определить свойство color в цветовом пространстве, которое поддерживает альфа-канал:  rgb(), rgba(), hsla().

:root {
--color-rgb: 255 255 0;
--color-hsl: 5 30% 20%;
}
.selector {
background-color: rgb(var(--color-rgb) / 0.5);
background-color: hsl(var(--color-hsl) / 0.5);
}

Таким образом, вы не переключать значение цвета пользовательского свойства с одного типа на другой. Обычно про такое пишут в JavaScript, там используется приведение типов. Но вот как это выглядит в CSS:

:root {
--color: #fa0000;
}
.selector {
/*
Trying to convert a HEX color to an RGB one doesn't work
This snippet will not work. this just return a blank white background
*/
background-color: rgb(var(--color) / 0.5);
}

С учётом сказанного, на самом деле невозможно использовать значения цветов HEX для динамических цветов в CSS. Даже указать альфа-канал для цвета HEX, как #FA000060, можно только декларативно, ведь в CSS нет конкатенации:

:root {
--color: #fa0000;
}
.selector {
/* You can’t dynamically specify the alpha channel. This will still not do anything */
background-color: var(--color) + "60";
}

Можно объявить значение пользовательского свойства, используя любой цветовой тип:  rgb, rgba, hsla, hsl, hex. И уже этот тип с лёгкостью преобразуется в любой другой. Пример управления динамическими цветами:

/* - - - - - - - - - - - - Using hex Colors - - - - - - - - - - - - - - */
:root {
  --color: #fa0000;
}
.selector {
  /* can’t do this */
  background-color: rgb(var(--color) / 0.5);
  /* can do this */
  background-color: rgb(from var(--color) r g b / .5);
}

Если следовать синтаксису в строке 7, то ничего не получится. Правильный синтаксис в девятой строке показывает, как создавать динамические цвета и управлять ими. Вот как это выглядит, если попытаться использовать именованные цвета:

/* - - - - - - - - - - - - Using Named Colors - - - - - - - - - - - - - - */
:root {
  --color: red;
}
.selector {  
  background-color: rgb(from var(--color) r g b / .5);
}

С помощью функции calc()

У работы  с динамическими цветами через альфа-канал есть свои недостатки: прозрачные цвета не всегда смешиваются с белым, вместо этого сливаются с цветами, на которых расположены. То есть если вам нужна более светлая версия цвета, вы можете изменить альфа-канал, но изменение будет неоднородным. В некоторых местах на странице на  новую версию повлияют те цвета, на которых расположены прозрачные. Чтобы ликвидировать это влияние, надо использовать непрозрачные цвета. В CSS можно определить пользовательские свойства и каналы индивидуально:

:root {
  /* Define individual channels of a specific color */
  --color-h: 0;
  --color-s: 100%;
  --color-l: 50%;
}
.selector {
  /* Dynamically change individual channels */
  color: hsl(
    var(--color-h),
    calc(var(--color-s) - 10%),
    var(--color-l)
  );
}

Но от этого код удлиняется, а значения HEX всё равно не поддерживаются. Решение — функция calc():

:root {
  --color: #ff0000;
}
.selector {  
  color: hsl(from var(--color) h calc(s - 10%) l);
}

С помощью значения фильтра

Функция filter: brightness(x%) динамически изменяет значения цвета в процентах. Минус метода в том, что функция влияет на конкретный элемент. То есть некоторые части страницы могут отличаться друг от друга.

---

Не надо залезать в JavaScript, чтобы управлять динамическими цветами на минималках, когда вы делаете тёмный режим или меняете цвет при движении мышки. Пользуйтесь маленькими трюками CSS.