Конвертер и палитра цвета

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

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

Сразу предупреждение о светлоте в HSL. Это геометрическая величина, а не воспринимаемая яркость: жёлтый и синий с одинаковым значением L человеческий глаз видит совершенно по-разному. Поэтому шкалу оттенков, сделанную равными шагами, всё равно проверяют на контраст, а не принимают на веру.

Чего инструмент не делает. Он не управляет цветовыми профилями и не обещает, что оттенок в печати совпадёт с экраном, — для печати есть CMYK и цветопроба, а не конвертер на сайте. И ещё: он не считает контраст, для этого есть отдельная проверка контрастности по WCAG.