Как конвертировать RGB в HSL
От трех каналов к понятным осям
RGB - это то, как цвет физически собирается из красного, зеленого и синего. Числа точные, но по ним трудно понять, светлый цвет или темный, яркий или блеклый.
HSL перекладывает тот же цвет на три оси, близкие к человеческому восприятию: оттенок, насыщенность и светлота. Поэтому HSL берут, когда нужно генерировать палитру, строить светлые и темные варианты одного тона или задавать цвета темы через переменные CSS.
Инструмент показывает оба представления рядом и синхронизирует их: сдвинули канал RGB - обновились H, S, L, и наоборот.
Что задает каждая ось HSL
| Ось | Диапазон | За что отвечает |
|---|---|---|
| H (Hue) | 0-360° | оттенок по цветовому кругу |
| S (Saturation) | 0-100% | чистота цвета: от серого к яркому |
| L (Lightness) | 0-100% | светлота: от черного к белому |
Как перевести RGB в HSL
-
Введите каналы RGB
Задайте красный, зеленый и синий в полях R, G, B от 0 до 255.
-
Или правьте HSL
Меняйте H, S и L - каналы RGB подстроятся сами, а оттенок останется прежним при правке светлоты.
-
Возьмите строку HSL
Готовое значение hsl() показано в блоке результата, плашка сверху отражает выбранный цвет.
Вопросы и ответы
В HSL оттенок задан одним числом H, поэтому можно менять яркость и насыщенность, не сдвигая сам тон. В RGB для того же приходится пересчитывать сразу три канала.
Первое число - оттенок в градусах 0-360, затем насыщенность и светлота в процентах, например hsl(217, 91%, 53%).
Да, hsl() и hsla() работают во всех современных браузерах, значение можно вставлять в стили без перевода в HEX.
Каналы RGB считаются точно. При округлении H, S, L до целых допустимо расхождение в один пункт, визуально оно не заметно.