29. color-mix() и относительные цвета

CSS: color-mix() и относительные цвета

Иллюстрация к уроку В этом уроке мы познакомимся с мощным инструментом CSS – функцией color-mix() и концепцией относительных цветов. Они позволяют создавать сложные цветовые схемы и динамически изменять цвета на основе других, что значительно расширяет возможности стилизации веб-страниц.

Что такое `color-mix()`?

Функция color-mix() позволяет смешивать два цвета в определенной пропорции. Это как смешивать краски в реальной жизни, но в мире CSS. Синтаксис выглядит следующим образом:

color-mix(in <пространство>, <цвет1> <процент1>, <цвет2> <процент2>);

in <пространство>: Определяет цветовое пространство, в котором будет происходить смешивание (например, srgb, hsl, lab). Если не указано, используется srgb.
<цвет1> и <цвет2>: Цвета, которые нужно смешать.
<процент1> и <процент2>: Процентное соотношение каждого цвета в смеси. Если сумма процентов меньше 100%, остаток берется из прозрачного черного (transparent black).

Пример:

.example {
  background-color: color-mix(in srgb, red 50%, blue 50%); /* Получится фиолетовый */
}

В этом примере мы смешиваем красный и синий цвета в равных пропорциях, получая фиолетовый.

.example2 {
  background-color: color-mix(in hsl, red 70%, blue 30%); /* Смешивание в цветовом пространстве hsl */
}

Здесь смешивание происходит в цветовом пространстве hsl, что может дать другой результат, чем в srgb.

Относительные цвета

Относительные цвета позволяют создавать новые цвета на основе существующих, изменяя их компоненты (оттенок, насыщенность, яркость и т.д.). Для этого используется ключевое слово from внутри функции color().

Синтаксис:

color(from <исходный-цвет> r g b [/ a]);

<исходный-цвет>: Цвет, на основе которого будет создан новый.
r, g, b, a: Значения компонентов красного, зеленого, синего и альфа-канала соответственно. Можно использовать ключевое слово current для сохранения исходного значения.

Пример:

.original {
  --base-color: hsl(240, 100%, 50%); /* Синий цвет */
  background-color: var(--base-color);
}

.modified {
  --base-color: hsl(240, 100%, 50%);
  background-color: color(from var(--base-color) h calc(hue(var(--base-color)) + 30) s l); /* Сдвиг оттенка на 30 градусов */
}

В этом примере мы берем синий цвет и сдвигаем его оттенок на 30 градусов, получая цвет ближе к бирюзовому. hue(var(--base-color)) возвращает значение оттенка исходного цвета. s и l оставляем без изменений (насыщенность и яркость).

Практические примеры

Создание градиента на основе одного цвета:

.gradient {
  --base-color: #3498db; /* Голубой цвет */
  background: linear-gradient(to right, var(--base-color), color(from var(--base-color) l calc(lightness(var(--base-color)) * 0.5))); /* Уменьшаем яркость второго цвета */
}

Подсветка элемента при наведении:

.button {
  --base-color: #2ecc71; /* Зеленый цвет */
  background-color: var(--base-color);
  color: white;
}

.button:hover {
  background-color: color(from var(--base-color) l calc(lightness(var(--base-color)) * 1.2)); /* Увеличиваем яркость при наведении */
}

Жизненный пример

Многие современные UI-библиотеки и фреймворки (например, Tailwind CSS, Chakra UI) используют относительные цвета и color-mix() (или их полифиллы) для создания цветовых схем, которые легко настраиваются и адаптируются. Например, можно определить базовый цвет бренда и автоматически генерировать различные оттенки и варианты этого цвета для разных элементов интерфейса. Это позволяет поддерживать консистентность дизайна и упрощает процесс стилизации. Также, они полезны для создания темной/светлой темы, где можно автоматически пересчитывать цвета, чтобы они хорошо выглядели в разных условиях освещения.

Ключевые моменты

color-mix() позволяет смешивать два цвета в заданных пропорциях.
Относительные цвета позволяют создавать новые цвета на основе существующих, изменяя их компоненты.
color() и ключевое слово from используются для работы с относительными цветами.
Эти инструменты полезны для создания динамических и адаптивных цветовых схем.
Они упрощают поддержку консистентности дизайна и создание темных/светлых тем.