Введите цвет в формате RGB и мгновенно получите точное значение HSL, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод RGB в HSL
RGB показывают экраны и камеры, но для вопросов вроде «насколько светел цвет» или «какие цвета близки по оттенку» этот формат неудобен. RGB переводят в HSL, когда сортируют пиксели или образцы по оттенку, пишут генераторы палитр, группируют цвета по семействам или обесцвечивают участок изображения. Введите три значения из пипетки, из canvas или из библиотеки обработки изображений и получите тот же цвет в виде, который легко сравнивать, группировать и править в скриптах.
Где это пригодится
- Отсортировать пиксели образца или палитру логотипа по оттенку, чтобы показать плашки в порядке радуги.
- Написать скрипт, который обесцвечивает или осветляет цвет, меняя только насыщенность или светлоту.
- Проверить, относятся ли два RGB-цвета со скриншотов к одному семейству по оттенку.
Как перевести RGB в HSL
Приведите R, G и B к диапазону 0-1 и найдите max, min и Δ = max − min. Светлота равна среднему крайних значений: L = (max + min) / 2. Насыщенность S = Δ / (1 − |2L − 1|), для серых цветов (Δ = 0) она равна 0.
Тон зависит от наибольшего канала: для красного H = ((G − B) / Δ) mod 6, для зелёного H = (B − R) / Δ + 2, для синего H = (R − G) / Δ + 4, каждое значение умножается на 60°, чтобы получить градусы. Обратный перевод восстанавливает каналы через цветность C = (1 − |2L − 1|) × S.
Пример расчёта
- Нормализуем каналы: R′ = 243 ÷ 255 = 0.953, G′ = 156 ÷ 255 = 0.612, B′ = 18 ÷ 255 = 0.071
- max = 0.953 (R′), min = 0.071 (B′), Δ = 0.882
- L = (max + min) ÷ 2 = (0.953 + 0.071) ÷ 2 = 0.512 → 51%
- S = Δ ÷ (1 − |2L − 1|) = 0.882 ÷ (1 − |2 × 0.512 − 1|) = 0.904 → 90%
- H = 60 × ((G′ − B′) ÷ Δ) = 60 × ((0.612 − 0.071) ÷ 0.882) ≈ 37°
rgb(243, 156, 18) = hsl(37, 90%, 51%)
Совет: Не выбирайте между чёрным и белым текстом только по светлоте HSL: жёлтый и синий с одинаковой светлотой сильно различаются по яркости. Для такого решения используйте относительную яркость из формулы контраста WCAG, а HSL оставьте для сортировки и правок.
Популярные цвета: RGB в HSL
| Цвет | RGB | HSL |
|---|---|---|
| Красный | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Оранжевый | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Жёлтый | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Лайм | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Зелёный | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Голубой | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Бирюзовый | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| Синий | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Тёмно-синий | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Фиолетовый | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Пурпурный | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Розовый | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Коричневый | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| Серый | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Чёрный | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Белый | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Часто задаваемые вопросы
Почему у чисто синего и чисто жёлтого одинаковая светлота?
Светлота в HSL равна среднему между наибольшим и наименьшим каналом, поэтому и rgb(0 0 255), и rgb(255 255 0) получают 50%, хотя жёлтый выглядит гораздо ярче. Светлота HSL удобна как регулятор, но не измеряет воспринимаемую яркость.
Что вводить, если библиотека хранит каналы числами от 0 до 1?
Умножьте каждое число на 255 и округлите. Например, цвет matplotlib 0.2, 0.4, 0.8 превращается в 51, 102, 204. Модуль colorsys в Python принимает дроби напрямую, но возвращает оттенок, светлоту и насыщенность именно в таком порядке.
Что означают тон, насыщенность и светлота?
Тон (H) означает положение на цветовом круге в градусах (0° красный, 120° зелёный, 240° синий). Насыщенность (S) означает «сочность» цвета от 0% (серый) до 100% (чистый цвет). Светлота (L) идёт от 0% (чёрный) через 50% (чистый цвет) к 100% (белый).
Зачем использовать HSL вместо RGB?
В HSL проще рассуждать о цвете: чтобы затемнить, уменьшите L, а чтобы приглушить, уменьшите S, тон при этом сохранится. Это удобно для построения палитр и правок в CSS, тогда как в RGB меняются сразу все три канала.
Перевод точный?
Формулы математически точны, но отображаемые значения округляются до целых, поэтому при переводе туда-обратно канал может сместиться на ±1. Для попиксельной точности сохраняйте исходное значение.
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →