Казалось бы, что сложного в выборе цвета? Но когда палитра макета перестает быть набором из 16 базовых оттенков, на сцену приходят другие цветовые решения. Почему опытные верстальщики все чаще переключаются с #FF5733 на hsl(12, 100%, 60%)? Давайте разложим по полочкам все популярные варианты записи цвета в CSS, сравним их и выясним, какой инструмент лучше подходит для конкретной задачи.

1. Именованные цвета: Быстро, но неточно

Это самый интуитивный способ. CSS понимает 148 стандартных имен — от банальных red, blue, white до экзотических papayawhip, cornflowerblue или rebeccapurple.

.element {
  color: tomato;
  background-color: aliceblue;
  border: 2px solid crimson;
}

Плюсы:

• Читаемость. Код говорит сам за себя, легко править на лету.
• Скорость. Идеально для черновой верстки.
• Прозрачность. Есть ключевое слово transparent (полная прозрачность, аналог rgba(0,0,0,0)).

Минусы:

• Непредсказуемость. Вы уверены, что помните, как выглядит цвет darkseagreen? Тыканье пальцем в небо.
• Неточность. Нельзя сделать Tomato на 10% темнее или задать прозрачность 50%, оставаясь в рамках имени.

Вердикт:

Хороши для черновиков, демок или для дефолтных цветов вроде black и transparent. В продакшене лучше не злоупотреблять.

2. Шестнадцатеричная система (Hex): Золотой стандарт верстальщиков

Формат, унаследованный из глубин компьютерной графики. Это просто RGB, записанный в шестнадцатеричном виде: #RRGGBB. Каждый канал — от 00 до FF (0–255).

.button {
  background-color: #2C3E50; /* Темно-серый с синевой */
  color: #ECF0F1; /* Светлый дымчатый */
}

Модификации:

Сокращенная запись — если символы в парах каналов повторяются, их можно сжать:

#FFCC00 → #FC0

#FFFFFF → #FFF

Hex с альфа-каналом (8 знаков) — появился в CSS Color Level 4.

#FF573380 — последние две цифры (80) это прозрачность 50%. Крайне удобно, но иногда забывается.

Плюсы:

• Компактность. Минимальное количество символов для копирования и вставки.
• Точность. Тысячи оттенков в компактной записи.
• Совместимость. Работает везде и всегда.

Минусы:

• Сложность восприятия. Глядя на #A1B2C3, вы вряд ли скажете, что он ближе к синему, чем #7A8B9C. Редактировать «в голове» трудно: как сделать цвет теплее? Прибавить к красному? На сколько?

Вердикт:

Идеален для утвержденных констант из макета (скопировал из Figma — вставил в код). Неудобен для создания производных оттенков вручную.

3. Функциональный RGB/RGBA: Когда нужен альфа-канал

RGB — и есть Hex, но записанный цифрами. Синтаксис CSS позволяет использовать десятичные числа или проценты.

.card {
  /* Классический синтаксис */
  background: rgba(255, 87, 51, 0.8); /* Красный=255, Зеленый=87, Синий=51, Прозрачность 0.8 */
  
  /* Современный синтаксис (без запятых, Level 4) */
  color: rgb(10 20 30 / 60%);
}

Лайфхак:

Обратите внимание, что в новом синтаксисе проценты и числа больше не нужно смешивать (раньше так было нельзя). Разделителем служит пробел, а альфа отделяется слешем. Это сильно чище визуально.

Плюсы:

• Управление прозрачностью. Прозрачность задается явно и не зависит от HEX-значения.
• Функциональность. Числа 0–255 понятнее машине, но не всегда человеку.

Минусы:

• Интуитивность. Так же сложен для ментального смешивания цветов, как и HEX. Сделать светлее? Прибавить ко всем каналам по 20 — получится грязь или пересвет.

4. HSL (Hue, Saturation, Lightness): Человеко-ориентированный подход

Это система, которая наконец-то начинает думать так, как работает наш мозг. Вместо «добавь красного», мы говорим «цветовой тон, насыщенность, светлота».

• Hue (Тон): 0–360 градусов на цветовом круге. 0/360 — красный, 120 — зеленый, 240 — синий.
• Saturation (Насыщенность): 0% — серый, 100% — чистый пиксель.
• Lightness (Светлота): 0% — черный, 100% — белый, 50% — «нормальный» цвет.

:root {
  --primary: 210; /* Синий оттенок */
}

.button {
  background: hsl(var(--primary), 80%, 55%);
  /* При наведении мы просто меняем светлоту, сохраняя тон! */
  &:hover {
    background: hsl(var(--primary), 80%, 45%); /* Затемнили на 10% */
  }
  /* Текст делаем почти белым, но в тон фону */
  color: hsl(var(--primary), 30%, 92%);
}

Главная суперсила — создание цветовых палитр.Используя Custom Properties (CSS-переменные), можно разложить HSL на части и генерировать десятки состояний одной кнопки мгновенно. Инструменты вроде tailwindcss или дизайн-системы строятся именно вокруг этого принципа.

Плюсы:

• Интуитивность. Легко предсказать результат: «Тот же оттенок, но темнее» — просто крутим ползунок Lightness.
• Гармония. Для поиска комплементарного цвета просто поворачиваем Hue на 180 градусов.

Минусы:

• Производительность (мнимая). Рендеринг HSL занимает на микросекунды больше, чем HEX, но это незаметно.

Вердикт:

Маст-хэв для создания UI-kit’ов, темных тем и анимаций. HSL — выбор современной компонентной разработки.

Бонус: HWB, Lab и LCH — взгляд в будущее

Нельзя не упомянуть, что CSS развивается. Если HSL все еще имеет перепады восприятия яркости (желтый при тех же 50% Lightness кажется ярче синего), то новые пространства это решают:

• LCH (Lightness, Chroma, Hue): Позволяет задавать цвета, которые одинаково воспринимаются глазом по яркости. Идеально для контрастности.
• HWB (Hue, Whiteness, Blackness): Еще более интуитивная модификация для дизайнеров (цвет + сколько добавить белого/черного).

Поддержка этих форматов уже превышает 90%, но консервативные проекты пока осторожничают.