Работа с цветами: ключевые слова, HEX, RGB, RGBA, HSL, HSLA

🌈 Основы работы с цветами в CSS

Цвета в CSS — это не просто украшение, а мощный инструмент для создания эмоций и удобства интерфейсов. Сегодня разберём все способы задания цветов: от самых простых до профессиональных.

🔤 Ключевые слова — просто и понятно

Самый лёгкий способ указать цвет — использовать ключевые слова, например:

.text {
  color: tomato;  /* Красновато-оранжевый */
}

.background {
  background-color: dodgerblue;  /* Ярко-голубой */
}

💡 В CSS доступно 148 стандартных цветов, включая rebeccapurple (в честь Ребекки Эллисон, дочери создателя CSS).

Но ключевые слова ограничены. Для точного контроля нужны числовые форматы.

🔢 HEX — классика веб-дизайна

HEX-код — это шестнадцатеричное представление цвета в формате #RRGGBB:

.button {
  background-color: #ff5733;  /* Красный (R=FF, G=57, B=33) */
}

.title {
  color: #4a8fe7;  /* Голубой (R=4A, G=8F, B=E7) */
}

Сокращённая запись HEX

Если значения пар повторяются (#RRGGBB → #RGB), можно сократить:

.error {
  color: #f00;  /* Полный аналог #ff0000 */
}

🎨 RGB — точный контроль через каналы

RGB описывает цвет через красный (Red), зелёный (Green), синий (Blue) в диапазоне 0–255:

.highlight {
  background-color: rgb(255, 215, 0);  /* Золотой */
}

RGBA — добавляем прозрачность

Четвёртый параметр (alpha) управляет прозрачностью (от 0 до 1):

.overlay {
  background-color: rgba(0, 0, 0, 0.5);  /* Чёрный с 50% прозрачностью */
}

⚠️ Важно: rgba() — устаревший синтаксис. В новых браузерах можно использовать rgb() с alpha-каналом:
css .modern { color: rgb(255 99 71 / 0.6); /* Томатный с прозрачностью 60% */ }

🌈 HSL — интуитивный подбор цветов

HSL (Hue, Saturation, Lightness) — удобен для подбора оттенков:
- Hue (тон) — угол на цветовом круге (0–360).
- Saturation (насыщенность) — 0% (серый) → 100% (яркий).
- Lightness (светлота) — 0% (чёрный) → 100% (белый).

.card {
  background-color: hsl(120, 100%, 50%);  /* Ярко-зелёный */
}

HSLA — прозрачность в HSL

Аналогично RGB, добавляем alpha-канал:

.glass {
  background-color: hsla(240, 100%, 50%, 0.3);  /* Синий с прозрачностью 30% */
}

🔄 Как запомнить?
- RGB — для точных значений (например, из Figma).
- HSL — для экспериментов («сделать темнее/светлее»).

🎯 Практика: сравнение форматов

Задача	Лучший выбор	Пример
Быстрый выбор цвета	Ключевые слова	`color: coral;`
Точный цвет из макета	HEX/RGB	`#1e90ff` или `rgb(30, 144, 255)`
Прозрачность	RGBA/HSLA	`rgba(255, 0, 0, 0.5)`
Подбор оттенков	HSL	`hsl(200, 100%, 70%)`

💡 Продвинутые возможности

Текущий цвет (`currentcolor`)

Ссылается на значение color элемента:

.box {
  color: slateblue;
  border: 2px solid currentcolor;  /* Граница будет slateblue */
}

Системные цвета

CSS поддерживает системные цвета, например:

body {
  background-color: ButtonFace;  /* Цвет фона кнопки в ОС */
}

🚨 Осторожно: Системные цвета устарели. Лучше использовать prefers-color-scheme для тёмной темы.

Итоги

Ключевые слова — просто, но мало вариантов.
HEX — компактно, идеально для веба.
RGB/RGBA — точность и прозрачность.
HSL/HSLA — интуитивный подбор оттенков.

Теперь вы готовы создавать стильные и гармоничные интерфейсы! Если нужно глубже разобрать тему, посмотрите уроки Данилы Бежина о цветовых палитрах. 🎨✨