Какие знаешь нотации цветов в CSS?

Нотации цветов в CSS

В CSS существует множество способов задать цвет элементам, каждый из которых подходит для разных сценариев. Основные нотации можно разделить на именованные цвета, шестнадцатеричные значения (HEX), RGB/RGBA, HSL/HSLA и современные цветовые модели (HWB, Lab, LCH). Рассмотрим их подробно.

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

1. Именованные цвета (Named Colors)

CSS предоставляет набор предопределённых цветов (например, red, blue, darkcyan), которые понятны человеку. Всего их 148 штук (включая базовые, расширенные и специальные, как transparent).

.example {
  color: tomato;
  background-color: lightblue;
  border-color: rebeccapurple; /* специальный цвет */
}

Плюсы: простота, читаемость.
Минусы: ограниченная палитра, нет контроля над оттенками.

2. Шестнадцатеричные значения (HEX)

Цвет задаётся в формате #RRGGBB (или #RGB для сокращённой записи), где значения красного, зелёного и синего каналов — от 00 до FF (0–255 в десятичной системе).

.example {
  color: #ff5733;     /* полная запись */
  background: #f53;   /* сокращённая (#ff5533) */
  border-color: #000; /* чёрный */
}

Сокращённая запись возможна, если каждый канал повторяет символы (#aabbcc → #abc).
Плюсы: компактность, широко используется в дизайн-системах.
Минусы: сложно воспринимать визуально без конвертера.

3. RGB и RGBA

RGB — функция rgb(red, green, blue), где значения от 0 до 255 или от 0% до 100%.
RGBA — расширение с альфа-каналом для прозрачности (rgba(red, green, blue, alpha)). Альфа — число от 0 (полная прозрачность) до 1 (непрозрачность).

.example {
  color: rgb(255, 87, 51);
  background: rgba(255, 87, 51, 0.7); /* 70% непрозрачности */
  border: 2px solid rgb(0, 0, 0);
}

Плюсы: интуитивная запись, поддержка прозрачности (RGBA).
Минусы: менее удобен для настройки оттенков, чем HSL.

4. HSL и HSLA

HSL (Hue, Saturation, Lightness) — модель, основанная на восприятии цвета человеком:

• Hue (оттенок): угол на цветовом круге от 0° до 360° (0° — красный, 120° — зелёный, 240° — синий).
• Saturation (насыщенность): от 0% (серый) до 100% (яркий цвет).
• Lightness (светлота): от 0% (чёрный) до 100% (белый).

HSLA — вариант с альфа-каналом.

.example {
  color: hsl(12, 100%, 60%); /* оранжево-красный */
  background: hsla(12, 100%, 60%, 0.5); /* полупрозрачный */
  border-color: hsl(240, 100%, 50%); /* синий */
}

Плюсы: удобно настраивать оттенки (меняя насыщенность/светлоту), интуитивно для дизайнеров.
Минусы: менее распространён, чем HEX.

Современные цветовые модели (CSS Color Module Level 4)

5. HWB (Hue, Whiteness, Blackness)

HWB — модель, где цвет задаётся оттенком, белизной и чернотой (проще для понимания, чем HSL).

.example {
  color: hwb(12 20% 0%); /* оттенок 12°, 20% белизны, 0% черноты */
}

Плюсы: естественное представление цвета.
Минусы: низкая поддержка в старых браузерах.

6. Lab и LCH

• Lab — модель, основанная на человеческом восприятии, с осями L (светлота), a (зелёный–красный), b (синий–жёлтый).
• LCH (Lightness, Chroma, Hue) — полярная версия Lab, более предсказуемая.

.example {
  color: lab(60 40 30);
  background: lch(60 40 30);
}

Плюсы: охватывает больше цветов, чем sRGB (включая яркие оттенки), перцептуально равномерна.
Минусы: экспериментальная поддержка (требует color(display-p3) для широкого охвата).

7. Цветовые пространства (color())

Функция color() позволяет задавать цвета в различных цветовых пространствах, например display-p3 (широкий охват).

.example {
  color: color(display-p3 1 0.34 0.2); /* яркий оранжевый */
}

Плюсы: доступ к более насыщенным цветам современных экранов.
Минусы: поддержка только в современных браузерах.

Специальные значения и прозрачность

8. currentColor и transparent

• currentColor — ключевое слово, наследуемое от свойства color родителя.
• transparent — полностью прозрачный цвет (эквивалент rgba(0,0,0,0)).

.example {
  color: #333;
  border: 2px solid currentColor; /* граница унаследует #333 */
  background: transparent;
}

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

Например, Canvas (фон интерфейса), ButtonText (цвет текста кнопок). Полезно для тем/светлых тем.

.example {
  background: Canvas;
  color: ButtonText;
}

Какую нотацию выбрать?

• Для дизайн-систем и консистентности: HEX (компактно) или HSL (удобно настраивать).
• Для работы с прозрачностью: RGBA/HSLA.
• Для современных проектов с wide-gamut цветами: color(display-p3) или LCH.
• Для простоты и читаемости: именованные цвета (ограниченно).

Пример сравнения одного цвета в разных нотациях:

/* Все записи дают один оттенок оранжевого */
.hex      { color: #ff5733; }
.rgb      { color: rgb(255, 87, 51); }
.hsl      { color: hsl(12, 100%, 60%); }
.hwb      { color: hwb(12 20% 0%); }
.named    { color: tomato; }

Поддержка в браузерах

• HEX, RGB, HSL, именованные: поддержаны везде.
• HWB, Lab, LCH, color(): требуют внимания к версиям браузеров (можно проверять на Can I use).

Итог: Выбор нотации зависит от задач. Для большинства проектов подходят HEX (производительность) или HSL (удобство настройки), а для современных приложений — LCH и color() для более ярких цветов. Главное — сохранять консистентность в кодовой базе!