Цветовые форматы CSS: HEX, RGB, HSL и когда какой использовать

Формат HEX — наиболее распространённая запись цвета в вебе. Цвет задаётся как три двухсимвольных шестнадцатеричных числа (00–FF) для каналов Red, Green, Blue:

#FF0000 = красный (R=255, G=0, B=0)
#00FF00 = зелёный
#0000FF = синий
#2DD4BF = фирменный cyan Utilora (R=45, G=212, B=191)

Сокращённая запись #RGB работает когда оба символа каждой пары идентичны: #FFF = #FFFFFF, #000 = #000000, #F00 = #FF0000.

HEX с альфа-каналом (#RRGGBBAA) — формат CSS Color Level 4: #2DD4BF80 задаёт тот же cyan с 50% прозрачностью (80 в hex = 128 из 255 = 50.2%).

Нотация rgb() задаёт три целых числа в диапазоне 0–255:
color: rgb(45, 212, 191);

Функция rgba() добавляет четвёртый канал альфа (прозрачность) в диапазоне 0.0–1.0:
color: rgba(45, 212, 191, 0.5); /* 50% прозрачность */

С CSS Color Level 4 (поддерживается во всех современных браузерах) запятые опциональны:
color: rgb(45 212 191 / 50%);

RGB удобен для программной генерации цветов в JavaScript:

const r = 45, g = 212, b = 191;

const hex = '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

HSL (Hue, Saturation, Lightness) — наиболее интуитивный формат для дизайнеров и программистов, создающих цветовые схемы:

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

Главное преимущество HSL: генерация вариаций цвета. Чтобы создать более светлый оттенок того же цвета:
hsl(174, 62%, 50%) /* базовый */
hsl(174, 62%, 70%) /* светлее на 20% — просто меняем L */
hsl(174, 62%, 30%) /* темнее */

Для тёмных тем: поднять L с 50% до 70–80%; для акцентов: поднять S до 90–100%.

Алгоритм HEX → RGB:
R = parseInt(hex.slice(1,3), 16)
G = parseInt(hex.slice(3,5), 16)
B = parseInt(hex.slice(5,7), 16)

Алгоритм RGB → HSL:
1. Нормализовать R, G, B к диапазону 0.0–1.0 (делить на 255)
2. Найти max и min из трёх значений
3. L = (max + min) / 2
4. S = (max - min) / (1 - |2L - 1|) если L ≠ 0 или 1
5. H вычисляется в зависимости от того, какой канал является максимальным

Конвертация HSL → RGB использует обратное преобразование через промежуточную функцию hue2rgb с кусочно-линейной интерполяцией.