🎨
← Назад к руководствам

HEX, RGB и HSL: какой цветовой формат следует использовать?

· Теги: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX, RGB и HSL: какой цветовой формат следует использовать?

CSS предлагает множество способов определения цветов, но три наиболее распространённых формата — это HEX, RGB и HSL. Каждый формат имеет свои отличительные преимущества, и знание того, когда использовать каждый из них, может значительно улучшить поддерживаемость ваших таблиц стилей и вашу способность создавать динамические цветовые системы. Это руководство разбирает каждый формат, чтобы вы могли выбрать правильный для любой ситуации.

Цветовой формат HEX: отраслевой стандарт

HEX (шестнадцатеричные) цвета — наиболее широко используемый формат в веб-дизайне. HEX-цвет записывается как #, за которым следуют шесть шестнадцатеричных цифр, представляющих значения красного, зелёного и синего в этом порядке.

#FF5733
  • #FF — Красный (255 в десятичной системе)
  • #57 — Зелёный (87 в десятичной системе)
  • #33 — Синий (51 в десятичной системе)

Вариации HEX

HEX поддерживает несколько нотаций для разных нужд:

/* Стандартный шестизначный HEX */
color: #FF5733;

/* Сокращённый — одинаковые пары сворачиваются в три цифры */
color: #F53; /* Разворачивается в #FF5533 */

/* Восьмизначный HEX с альфа-каналом */
color: #FF573380; /* 50% непрозрачности */

Сокращённый HEX работает, когда каждая пара использует совпадающие символы: #AABBCC становится #ABC. Это чисто соглашение для экономии места, поддерживаемое всеми браузерами.

Восьмизначный HEX (#RRGGBBAA) добавил альфа-прозрачность. Значение альфа-канала варьируется от 00 (полностью прозрачный) до FF (полностью непрозрачный). Поддержка 8-значного HEX отличная во всех современных браузерах.

Четырёхзначный сокращённый (#RGBA) также существует: #F538 разворачивается в #FF553388.

Когда использовать HEX

  • Копирование из инструментов дизайна — Figma, Sketch и Adobe XD выводят HEX по умолчанию
  • Жёстко заданные брендовые цвета — HEX однозначен и компактен для значений, которые никогда не меняются
  • Документация и макеты — HEX — самый узнаваемый формат среди дизайнеров и разработчиков
  • CSS custom properties — Хранение брендовых токенов в HEX является распространённой практикой

Когда избегать HEX

  • Программное управление цветом — Настройка отдельных каналов требует разбора строк
  • Создание цветовых систем — Генерация более светлых или тёмных вариантов требует нетривиальной математики
  • Передача цветового замысла — HEX не даёт семантической информации о цвете

Цветовой формат RGB: управление каналами

RGB расшифровывается как Красный, Зелёный, Синий. В CSS он записывается как функция со значениями от 0 до 255 или процентами (от 0% до 100%).

/* Устаревший синтаксис с запятыми */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Современный синтаксис с пробелами */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Процентные значения */
color: rgb(100% 34% 20%);

Улучшения современного синтаксиса RGB

Спецификация CSS Color Level 4 модернизировала функцию rgb() двумя важными способами:

  1. Значения, разделённые пробелами — Запятые больше не требуются, что делает синтаксис чище
  2. Альфа-канал через слеш — Псевдоним rgba() больше не нужен; rgb() теперь принимает опциональный альфа-канал

Как устаревший, так и современный синтаксисы полностью поддерживаются, но современный синтаксис рекомендуется для нового кода.

Когда использовать RGB

  • Canvas и WebGL — API данных изображений возвращают значения пикселей в RGB
  • Числовые цветовые настройки — Когда значения красного, зелёного и синего хранятся как отдельные переменные
  • Перевод из дизайн-спецификаций — Некоторые дизайн-системы задают цвета как RGB-триплеты
  • Работа с палитрами цветов — Многие UI палитр цветов используют ползунки 0-255

Когда избегать RGB

  • Создание целостных цветовых палитр — Независимая настройка всех трёх каналов затрудняет согласованные корректировки
  • Человеческая читаемость — rgb(123, 45, 67) не даёт немедленного представления о том, какой цвет он представляет

Цветовой формат HSL: удобные для человека цвета

HSL расшифровывается как Оттенок (Hue), Насыщенность (Saturation) и Светлота (Lightness). Этот формат более интуитивен для людей, поскольку он отделяет сам цвет (оттенок) от его интенсивности (насыщенность) и яркости (светлота).

/* Устаревший синтаксис */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Современный синтаксис */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Понимание каналов HSL

Оттенок (0-360) — Цветовой угол на цветовом круге. Это компонент «какой это цвет»:

| Значение оттенка | Цвет | |-----------|---------| | 0 или 360 | Красный | | 30 | Оранжевый | | 60 | Жёлтый | | 120 | Зелёный | | 180 | Голубой | | 240 | Синий | | 300 | Пурпурный |

Насыщенность (0-100%) — Насколько интенсивным или ярким является цвет. 0% даёт оттенок серого; 100% — самая чистая версия оттенка.

Светлота (0-100%) — Насколько светлым или тёмным является цвет. 0% — всегда чёрный, 50% — «нормальная» версия оттенка, а 100% — всегда белый.

Почему HSL превосходен для цветовых систем

HSL делает задачи, которые сложны в HEX или RGB, тривиально простыми:

/* Основной брендовый цвет */
--brand: hsl(220, 80%, 50%);

/* Состояние наведения — немного светлее */
--brand-hover: hsl(220, 80%, 60%);

/* Активное состояние — немного темнее */
--brand-active: hsl(220, 80%, 40%);

/* Неактивное состояние — обесцвеченный */
--brand-disabled: hsl(220, 30%, 70%);

/* Фоновый оттенок — очень светлый */
--brand-bg: hsl(220, 40%, 95%);

С HSL каждый вариант — это изменение одной переменной. Это невозможно с HEX и громоздко с RGB.

Когда использовать HSL

  • Создание цветовых палитр — HSL является стандартом де-факто для генерации дизайн-токенов
  • Темы и тёмный режим — Меняйте значения светлоты для создания вариантов тёмной темы
  • Состояния наведения и фокуса — Регулируйте светлоту на фиксированный процент
  • Настройки доступности — Увеличивайте контраст светлоты без изменения цвета
  • Интерактивные палитры цветов — Ползунки HSL более интуитивны, чем ползунки RGB

Краткая сравнительная таблица

| Характеристика | HEX | RGB | HSL | |---------|-----|-----|-----| | Читаемость на уровне пикселей | Плохая | Средняя | Хорошая | | Семантика каналов | Непрозрачная | Числовая | Перцептивная | | Программная настройка | Сложная | Средняя | Лёгкая | | Альфа-прозрачность | 8-значный HEX | rgb(R G B / A) | hsl(H S% L% / A) | | Поддержка браузерами | Отличная | Отличная | Отличная | | Современный синтаксис | Нет | Да | Да | | По умолчанию в инструментах дизайна | Да | Часто | Редко | | Пригодность для цветовых систем | Плохая | Удовлетворительная | Отличная |

Поддержка браузерами: все три безопасны

HEX, RGB и HSL имеют одинаковую поддержку браузерами. Все три работают в каждом браузере, выпущенном после Internet Explorer 9. Современный синтаксис с пробелами (rgb(255 0 0 / 0.5)) поддерживается во всех браузерах, выпущенных после 2020 года. Нет причин совместимости для выбора одного формата перед другим.

Практическая схема принятия решений

Выбирайте формат в зависимости от того, что вы делаете:

  1. Копируете из дизайн-макета? Используйте HEX — это то, что выводят инструменты дизайна.
  2. Строите систему дизайн-токенов? Используйте HSL — это делает генерацию палитр тривиальной.
  3. Работаете с canvas или данными изображений? Используйте RGB — пиксельные API используют RGB нативно.
  4. Пишете одноразовое правило стиля? Используйте HEX — он самый компактный.
  5. Создаёте динамические цветовые переходы? Используйте HSL — интерполяция оттенка создаёт эффекты радуги; интерполяция RGB создаёт грязные промежуточные цвета.

Конвертируйте между любыми форматами

Используйте наш бесплатный онлайн-конвертер цветов, чтобы мгновенно конвертировать между HEX, RGB, HSL и другими CSS-форматами цвета. Больше никакой ручной математики или копания в браузерных DevTools.