Способы задания цвета в CSS: HEX, RGB, HSL и не только

Иван Корнев·26.05.2026·⏱4 мин

В веб-разработке цвет элемента задается через свойства color, background-color и другие. Основные форматы: HEX (шестнадцатеричный код), RGB (красный, зеленый, синий) и HSL (оттенок, насыщенность, светлота). HEX удобен для копирования из макетов, RGB необходим для работы с прозрачностью и JavaScript, а HSL идеален для создания гармоничных палитр и управления оттенками.

Имена цветов (Color Keywords)

Самый простой способ — использовать стандартные английские названия. CSS поддерживает 147 именованных цветов, таких как red, blue, transparent.

.button {
  background-color: tomato;
  color: white;
}

Имена регистронезависимы: Red, RED и red работают одинаково. Однако этот метод ограничен небольшим набором оттенков и не подходит для точного брендирования.

HEX: Шестнадцатеричный код

Формат #RRGGBB является стандартом де-факто в вебе. Он состоит из символа # и шести шестнадцатеричных цифр, где каждые две отвечают за интенсивность красного, зеленого и синего каналов (от 00 до ff).

Синтаксис и сокращения

Если значения каналов повторяются (например, #ff0000), код можно сократить до трех символов (#f00).

/* Полная запись */
.element { color: #2f855a; }

/* Сокращенная запись (если пары совпадают) */
.element { color: #000; /* вместо #000000 */ }

Прозрачность в HEX (Alpha channel)

Современный стандарт позволяет добавлять альфа-канал в конец кода, получая 8-символьную запись #RRGGBBAA. Последние две цифры определяют прозрачность от 00 (полностью прозрачный) до ff (непрозрачный).

/* 50% прозрачности примерно равно 80 в hex */
.overlay { background-color: #00000080; }

Человеку сложно «на глаз» определить процент прозрачности по HEX-коду. Для точной настройки прозрачности лучше использовать RGB или HSL.

RGB и RGBA: Цифровые значения

Модель RGB задает цвет через интенсивность каналов от 0 до 255. Это удобный формат для программных вычислений, так как он линейно отражает данные, с которыми работает браузер и JavaScript.

Современный синтаксис (без запятых)

В спецификации CSS Color Level 4 введен более лаконичный синтаксис без запятых, где прозрачность указывается через слэш /.

/* Старый стиль (все еще работает) */
.box { color: rgba(255, 0, 0, 0.5); }

/* Новый стиль (рекомендуемый) */
.box { color: rgb(255 0 0 / 0.5); }
.box { color: rgb(255 0 0 / 50%); }

JavaScript API (например, getComputedStyle) часто возвращает цвета именно в формате rgb(). Если вы динамически меняете стили через JS, использование этого формата упростит парсинг значений.

HSL: Интуитивное управление цветом

HSL (Hue, Saturation, Lightness) описывает цвет так, как его воспринимает человек:

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

Почему HSL лучше для дизайн-систем

Главное преимущество HSL — возможность легко создавать вариации цвета (светлее, темнее, тусклее), меняя только один параметр.

:root {
  --brand-hue: 210;
  --brand-sat: 100%;
  
  /* Базовый цвет */
  --primary: hsl(var(--brand-hue) var(--brand-sat) 50%);
  
  /* Светлый вариант для фона */
  --primary-light: hsl(var(--brand-hue) var(--brand-sat) 90%);
  
  /* Темный вариант для текста */
  --primary-dark: hsl(var(--brand-hue) var(--brand-sat) 30%);
}

Такой подход делает код поддерживаемым: чтобы изменить оттенок всего бренда, достаточно поменять одну переменную --brand-hue.

Сравнение форматов: что и когда использовать

Формат	Читаемость	Прозрачность	Лучшее применение
HEX	Низкая	Да (`#RRGGBBAA`)	Копирование из Figma/Sketch, жестко заданные брендовые цвета.
RGB	Средняя	Да (`/ alpha`)	Работа с Canvas, анимации в JS, смешивание цветов программно.
HSL	Высокая	Да (`/ alpha`)	Дизайн-системы, создание тем (dark/light mode), hover-эффекты.
Имена	Максимальная	Только `transparent`	Быстрые прототипы, сброс стилей.

Будущее: OKLCH и OKLAB

Новые функции oklch() и oklab() решают главную проблему HSL: неравномерность восприятия яркости. В HSL синий и желтый с одинаковой светлотой 50% выглядят по-разному ярко для глаза человека. OKLCH использует перцепционно равномерное цветовое пространство.

/* Более предсказуемые результаты при изменении яркости */
.element {
  background-color: oklch(65% 0.2 250);
}

Поддержка этих функций уже доступна во всех современных браузерах (Chrome 111+, Safari 15.4+, Firefox 113+).

Частые ошибки

Забытый символ #: Код ff0000 не будет работать, браузер проигнорирует его. Всегда пишите #ff0000.
Путаница в единицах измерения: В RGB значения — числа от 0 до 255. В HSL насыщенность и светлота — это проценты (%), а оттенок — число (градусы, знак ° указывать не обязательно, но можно).
Старый синтаксис RGBA: Использование отдельной функции rgba() избыточно. Современный rgb(... / alpha) универсален и короче.

FAQ

Какой формат цвета самый легкий для браузера? Для браузера нет разницы. Все форматы внутри движка конвертируются в единое внутреннее представление. Выбирайте тот, который удобнее вам для чтения и поддержки кода.

Как сделать цвет полностью прозрачным? Используйте ключевое слово transparent или значение альфа-канала 0: rgb(0 0 0 / 0), hsl(0 0% 0% / 0) или #00000000.

Можно ли смешивать форматы в одном проекте? Да, это абсолютно валидно. Вы можете использовать HEX для основных цветов, скопированных из макета, и HSL для системных переменных и состояний.