Руководство по преобразованию HEX, RGB, HSL для продуктовых команд

HEX, RGB, HSL: гид по конвертации для продуктовых команд

Дизайнеры передают HEX-коды в Figma. Разработчики пишут RGB в коде. HSL -- то, что реально нужно для программной манипуляции цветом. Разбираемся, как три формата связаны и когда какой использовать.

Три формата

HEX -- #FF5733

Два hex-символа на канал: #RRGGBB. Каждая пара -- 00-FF (0-255 в десятичной). Веб-стандарт с 1990-х. Компактный, поддерживается везде, но неочевидный при чтении.

RGB -- rgb(255, 87, 51)

Три десятичных значения, 0-255 на канал. Используется в CSS rgb(). Немного читаемее HEX, но мысленно скорректировать ("сделать на 20% светлее") -- непросто.

HSL -- hsl(11, 100%, 60%)

Тон (Hue, 0-360 градусов на цветовом круге), Насыщенность (Saturation, 0-100%), Светлота (Lightness, 0-100%). Создан для людей: можно рассуждать о цветовых соотношениях напрямую.

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

Почему HSL выигрывает для систем тем

С HSL манипуляция цветом -- это арифметика:

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% светлоты */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% светлоты */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* менее насыщенный */
}

Измените --hue на 210 -- и вся палитра сдвинется от оранжевого к синему. Попробуйте это с HEX.

Осветлить: увеличить L. 60% → 80% = светлее.

Затемнить: уменьшить L. 60% → 40% = темнее.

Приглушить: уменьшить S. 100% → 40% = более приглушённый.

Комплементарный цвет: прибавить 180 к H. 11 → 191.

Шпаргалка по конвертации

HEX → RGB: разделите на пары, переведите hex в десятичное.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (упрощённо):

Не заучивайте формулы. Используйте Color Picker для мгновенной конвертации между всеми тремя форматами.

Современный CSS: oklch()

CSS Color Level 4 представил oklch() -- перцептуально равномерную светлоту. В отличие от HSL, одинаковые значения L действительно выглядят одинаково ярко для разных тонов. Если вы создаёте новую дизайн-систему в 2025+, рассмотрите oklch() наряду с HSL.

Связанные материалы