Что это и что показывает
Конвертер цвета переводит один и тот же цвет между тремя представлениями: HEX (как в CSS — #3b7a8c), RGB (смешение красного, зелёного и синего) и HSL (тон, насыщенность, светлота). Цвет один и тот же — меняется лишь форма записи, удобная для разных задач: HEX для вёрстки, RGB для прозрачности, HSL для подбора оттенков.
Формула / как устроено
HEX-цвет из шести цифр — это три канала RGB по два символа: RR, GG, BB, каждый в шестнадцатеричном виде (0–255):
R = parseInt(RR, 16), G = parseInt(GG, 16), B = parseInt(BB, 16)
Для HSL каналы нормируются к диапазону 0–1, после чего светлота — это среднее максимума и минимума:
L = (max + min) / 2
Насыщенность и тон вычисляются из разницы между максимальным и минимальным каналом.
Как посчитать вручную
- Разбейте HEX на три пары символов и переведите каждую из шестнадцатеричной системы в десятичную — получите R, G, B.
- Разделите каждый канал на 255, чтобы привести к диапазону 0–1.
- Найдите максимальный и минимальный из трёх нормированных каналов.
- Светлота L = (max + min) / 2; далее по формулам — насыщенность и тон.
Пример
Цвет #3b7a8c.
3B = 59, 7A = 122, 8C = 140, то есть rgb(59, 122, 140).
Нормировка: 0.231, 0.478, 0.549. Светлота L = (0.549 + 0.231) / 2 ≈ 0.39 → 39%.
Итог в HSL: примерно hsl(193, 41%, 39%) — приглушённый сине-бирюзовый.
Где применяется
Конвертер нужен веб-разработчикам и дизайнерам: HEX в CSS, RGB при работе с прозрачностью (rgba), HSL для генерации палитр и тем (осветлить/затемнить можно простым изменением L). Также применяется при переносе цветов между Figma, графическими редакторами и кодом.
Осторожно
- Путают порядок каналов: в HEX это R, G, B, а не B, G, R.
- Считают, что трёхзначный
#abcи шестизначный — разные цвета; на деле#abc=#aabbcc. - Указывают тон HSL в долях вместо градусов (0–360).
- Забывают знак
%у насыщенности и светлоты в записи HSL — без него CSS не примет значение.