Введите цвет в формате HSL и мгновенно получите точное значение RGB, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод HSL в RGB
Цвета часто создают в HSL, потому что вращать оттенок просто: цикл от 0 до 359 даёт весь цветовой круг, а постоянные насыщенность и светлота сохраняют родство шагов. Но оборудование и низкоуровневые API редко понимают HSL. Светодиодные ленты, буферы пикселей canvas, игровые движки и многие графические библиотеки ждут числа красного, зелёного и синего каналов. Переведите значения здесь, чтобы увидеть, что должен выдавать ваш генератор, или чтобы быстро проверить собственную функцию перед запуском.
Где это пригодится
- Проверить RGB-результат цикла по оттенку, прежде чем отправлять его на светодиодную ленту с трёхканальным цветом.
- Записать пиксели в буфер ImageData в canvas или в текстуру игры, где хранятся байты красного, зелёного и синего.
- Сверить собственную функцию перевода из HSL в RGB с эталонным результатом в юнит-тесте.
Как перевести HSL в RGB
Приведите 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.
Пример расчёта
- C = (1 − |2L − 1|) × S = (1 − |2 × 0.4 − 1|) × 0.75 = 0.6
- X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.6 × (1 − |(190 ÷ 60) mod 2 − 1|) = 0.5
- m = L − C ÷ 2 = 0.4 − 0.6 ÷ 2 = 0.1
- 180° ≤ H < 240°: (R′, G′, B′) = (0, X, C) = (0, 0.5, 0.6)
- R = (R′ + m) × 255 = (0 + 0.1) × 255 = 25
- G = (G′ + m) × 255 = (0.5 + 0.1) × 255 = 153
- B = (B′ + m) × 255 = (0.6 + 0.1) × 255 = 179
hsl(190, 75%, 40%) = rgb(25, 153, 179)
Совет: Проверяя собственную функцию, пройдитесь по опорным точкам: hsl(0 100% 50%) должен дать rgb(255 0 0), hsl(120 100% 50%) должен дать rgb(0 255 0), hsl(240 100% 50%) должен дать rgb(0 0 255), а любой цвет при светлоте 0% должен получиться чёрным.
Популярные цвета: HSL в RGB
| Цвет | HSL | RGB |
|---|---|---|
| Красный | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| Оранжевый | hsl(39, 100%, 50%) | rgb(255, 165, 0) |
| Жёлтый | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| Лайм | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| Зелёный | hsl(120, 100%, 25%) | rgb(0, 128, 0) |
| Голубой | hsl(180, 100%, 50%) | rgb(0, 255, 255) |
| Бирюзовый | hsl(180, 100%, 25%) | rgb(0, 128, 128) |
| Синий | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| Тёмно-синий | hsl(240, 100%, 25%) | rgb(0, 0, 128) |
| Фиолетовый | hsl(300, 100%, 25%) | rgb(128, 0, 128) |
| Пурпурный | hsl(300, 100%, 50%) | rgb(255, 0, 255) |
| Розовый | hsl(350, 100%, 88%) | rgb(255, 192, 203) |
| Коричневый | hsl(0, 59%, 41%) | rgb(165, 42, 42) |
| Серый | hsl(0, 0%, 50%) | rgb(128, 128, 128) |
| Чёрный | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| Белый | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
Часто задаваемые вопросы
Как подобрать равномерно распределённые цвета для диаграммы?
Разделите 360 на число рядов и двигайте оттенок на этот шаг, оставляя насыщенность и светлоту прежними: для шести рядов это 0, 60, 120 и так далее. Переведите каждую тройку здесь. Углы равны, но различимость на глаз бывает разной, поэтому проверьте палитру на доступность для людей с особенностями цветового зрения.
В каких единицах вводить насыщенность и светлоту?
Здесь, как и в CSS, используются проценты: насыщенность и светлота от 0 до 100, оттенок от 0 до 360. Библиотеки вроде Python colorsys работают с долями от 0 до 1, включая оттенок, поэтому при переносе значений делите на 100 и на 360.
Что означают тон, насыщенность и светлота?
Тон (H) означает положение на цветовом круге в градусах (0° красный, 120° зелёный, 240° синий). Насыщенность (S) означает «сочность» цвета от 0% (серый) до 100% (чистый цвет). Светлота (L) идёт от 0% (чёрный) через 50% (чистый цвет) к 100% (белый).
Зачем использовать HSL вместо RGB?
В HSL проще рассуждать о цвете: чтобы затемнить, уменьшите L, а чтобы приглушить, уменьшите S, тон при этом сохранится. Это удобно для построения палитр и правок в CSS, тогда как в RGB меняются сразу все три канала.
Перевод точный?
Формулы математически точны, но отображаемые значения округляются до целых, поэтому при переводе туда-обратно канал может сместиться на ±1. Для попиксельной точности сохраняйте исходное значение.
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →