HEX в HSL — конвертер цвета для CSS онлайн

В HSL цвет разложен на смысловые оси, поэтому его можно менять осмысленно. Тон остаётся прежним, а вы двигаете светлоту и получаете весь ряд: hover, active, disabled, фон плашки. В HEX для того же приходится подбирать шесть символов вслепую или держать рядом пикер.

У ахроматических цветов нет положения на цветовом круге: красный и синий каналы равны, вычислять угол не из чего. Формула в таком случае возвращает 0°, но с S равным 0 это значение ни на что не влияет — hsl(0, 0%, 20%) и hsl(200, 0%, 20%) дают один и тот же серый.

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

Классический синтаксис требует запятых и знаков процента: hsl(210, 100%, 56%). Современные браузеры принимают и запись через пробелы с прозрачностью — hsl(210 100% 56% / 0.5). Градусы можно писать голым числом, единица deg не обязательна.

Надёжнее вводить полные шесть знаков. Короткая форма вроде #1AF означает #11AAFF, и не каждый разбор её разворачивает; если после нажатия кнопки результат не изменился, продублируйте каждый символ вручную и повторите.

Нет, вся работа идёт в скрипте страницы: код разбирается на каналы и пересчитывается прямо во вкладке. Историю значений инструмент не хранит, так что после перезагрузки страницы поле снова покажет образец по умолчанию.