Цвета в вебе — это не только red, #000 или blue. В современном CSS есть целый набор цветовых функций, которые дают гибкость и позволяют делать красивые эффекты без графики.
1. rgb() и rgba()
Классика. Цвет задаётся через компоненты красный, зелёный, синий (0–255).
rgb(255, 0, 0) → ярко-красный
rgba(0, 0, 255, 0.5) → полупрозрачный синий
📌 a (alpha) отвечает за прозрачность от 0 до 1.
2. hsl() и hsla()
Более “человеческий” способ. Цвет задаётся через:
h — оттенок (0–360° по цветовому кругу)
s — насыщенность (%)
l — светлота (%)
Пример:
color: hsl(200, 100%, 50%); /* ярко-голубой */
Фишка: легко делать вариации цвета. Например:
hsl(200, 100%, 70%) → светлее
hsl(200, 100%, 30%) → темнее
3. color-mix()
Позволяет смешивать два цвета прямо в CSS.
color: color-mix(in srgb, red 40%, blue);
Здесь берём 40% красного и 60% синего → получится фиолетовый.
Синтаксис:
color-mix(in <цветовое пространство>, <цвет1> <процент>, <цвет2> <процент>)
Можно использовать для плавных переходов, hover-эффектов и генерации палитры без дизайнера.
4. Градиенты
Градиенты — это тоже функции!
Линейный:
background: linear-gradient(90deg, red, blue);
Радиальный:
background: radial-gradient(circle, yellow, green);
Конический (новее):
background: conic-gradient(from 0deg, red, yellow, blue);
Их можно комбинировать и накладывать друг на друга для сложных эффектов.
Где это полезно
Создание цветовых схем, которые легко адаптировать под тёмную/светлую тему.
Смешивание корпоративных цветов под разные состояния UI.
Градиентные кнопки, бордеры, иконки без Photoshop.
Поддержка браузеров
rgb() и hsl() поддерживаются давно.
color-mix() — работает в Chrome, Safari и Firefox (новые версии).
Градиенты — тоже везде, включая мобильные.
#css | #полезности