HEX, RGB и HSL: что меняется, а что нет

Один цвет в трёх полезных форматах

Индиго Аврора можно записать как #4F46E5, rgb(79 70 229) или приблизительно hsl(243 75% 59%). Браузер приводит каждое объявление к цвету sRGB. При округлённых значениях HSL результат после обратного преобразования иногда отличается на единицу в одном из каналов; дополнительная точность почти всегда устраняет это расхождение.

.sample {
  color: #4F46E5;
  color: rgb(79 70 229);
  color: hsl(243.4 75.4% 58.6%);
}

Как шестизначный HEX превращается в RGB

Шестизначный HEX состоит из трёх двузначных шестнадцатеричных чисел в порядке #RRGGBB. Каждая пара меняется от 00 до FF, то есть от 0 до 255 в десятичной системе. В #4F46E5 пара 4F даёт 79 красного, 46 — 70 зелёного, а E5 — 229 синего.

• RR управляет красным каналом sRGB.
• GG управляет зелёным каналом sRGB.
• BB управляет синим каналом sRGB.
• Необязательная четвёртая пара в #RRGGBBAA задаёт альфа-канал.

Трёхзначный HEX работает только тогда, когда в каждой полной паре повторяется одна цифра: #4AE раскрывается в #44AAEE. Он не может выразить любой шестизначный цвет, поэтому у #4F46E5 нет точного трёхзначного сокращения.

Когда RGB понятнее всего

Современный синтаксис rgb() напрямую показывает красный, зелёный и синий каналы. Целые значения обычно лежат в диапазоне 0–255, процентные — 0–100%. Косая черта добавляет альфа-канал без отдельной функции rgba().

.solid {
  background: rgb(79 70 229);
}

.translucent {
  background: rgb(79 70 229 / 60%);
}

• Используйте RGB, когда каналы приходят из изображения, API или инструмента с байтовыми значениями.
• Используйте запись через косую черту, когда прозрачность относится к цвету, а не ко всему элементу.
• Придерживайтесь одного числового формата внутри компонента, чтобы код было проще проверять.

Что упрощает HSL — и чего он не делает

HSL разделяет угол тона, насыщенность и светлоту. Поворот тона удобен для детерминированных цветовых связей, а изменение насыщенности или светлоты воспринимается понятнее, чем независимое редактирование трёх каналов RGB.

• Тон 0° соответствует красному, 120° — зелёному sRGB, 240° — синему sRGB.
• Насыщенность 0% даёт ахроматический серый; 100% задаёт максимальную насыщенность модели HSL для выбранных тона и светлоты.
• Светлота 0% даёт чёрный, 50% — середину модели HSL, 100% — белый.

Почему значения после конвертации иногда расходятся

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

• Сохраняйте исходный HEX или RGB как каноническое значение, если важны точные байты sRGB.
• Во время расчётов оставляйте дробные значения HSL и округляйте только для отображения.
• При проверке равенства сравнивайте итоговые каналы, а не строки.
• Не преобразовывайте и не перезаписывайте исходное значение много раз подряд.

Какой формат выбрать

Универсально лучшей записи нет. Выбор зависит от происхождения значения и способа его поддержки. Браузер умеет отображать все три формата; практическая разница заключается в том, насколько ясно исходный код передаёт задачу.

• Выбирайте HEX для компактных стабильных токенов sRGB и значений из распространённых дизайн-инструментов.
• Выбирайте RGB для явных каналов, вычислений и читаемых значений альфа-канала.
• Выбирайте HSL для ручного поворота тона и простого управления насыщенностью и светлотой.
• Выбирайте OKLCH вместо HSL для визуально равномерных шагов палитры.
• Используйте CSS custom properties, чтобы компоненты получали семантические токены, а не повторяли сырые значения.

:root {
  --color-brand: #4F46E5;
  --color-brand-muted: rgb(79 70 229 / 60%);
}

.button {
  color: white;
  background: var(--color-brand);
}

Чек-лист преобразования

• Убедитесь, что исходная и конечная записи должны описывать sRGB.
• Сохраняйте альфа-канал отдельно и проверяйте, записан ли он процентом или числом от 0 до 1.
• Оставляйте достаточно знаков после запятой для обратных преобразований.
• Проверяйте контраст текста на итоговом фоне: сама запись ничего не говорит о доступности.
• Храните одно каноническое значение, а остальные форматы вычисляйте из него.

Color Atlas следует последнему правилу: PostgreSQL хранит проверенный канонический HEX, а SSR-страница детерминированно рассчитывает RGB, HSL, HWB, яркость, контраст и связанные цвета.