Конвертер цвета HSL в RGB

Значения R, G, B в результате показывают интенсивность красного, зелёного и синего каналов по шкале от 0 до 255. Их можно использовать напрямую в CSS как rgb(R, G, B) или в программах редактирования изображений.

Сначала из насыщенности и светлоты вычисляется значение 'цветности' (C). Каналам R, G, B присваиваются временные значения в зависимости от того, в какой 60-градусный сегмент попадает тон, а затем добавляется смещение светлоты (m), и результат масштабируется в диапазон 0-255.

• Насыщенность и светлота переводятся из процентов в диапазон от 0 до 1.
• Значение 'цветности' (C) вычисляется независимо от смещения светлоты (m).
• Определяется, в какой 60-градусный сегмент попадает значение тона.
• В зависимости от этого сегмента каналам R, G, B присваиваются временные значения (комбинация C, X, 0).
• Добавляется смещение светлоты (m), и результат умножается на 255, чтобы получить итоговые значения R, G, B.

H=210°, S=65%, L=45% (насыщенный синий) соответствует примерно R=40, G=115, B=189.

• Вводите тон (H) в диапазоне от 0 до 360 градусов; 360 градусов соответствует тому же цвету, что и 0 градусов (красный).
• Вводите насыщенность и светлоту в процентах (0-100); десятичные значения дают более точный результат.
• Итоговые значения RGB могут быть дробными; округляйте их до ближайшего целого числа при использовании на экране или в CSS.

Модель HSL (Hue, Saturation, Lightness) — один из форматов, которые дизайнеры чаще всего используют при определении цвета, поскольку независимая настройка тона, насыщенности и светлоты упрощает создание вариаций цвета. Однако, поскольку экраны и большинство форматов изображений обрабатывают цвет как RGB, цвет, заданный в HSL, необходимо перевести в RGB перед отображением.

Этот перевод основан на определении того, в какой 60-градусный сегмент цветового круга попадает тон (H); круг делится на шесть равных сегментов по 60 градусов, и в каждом из них доминирует своя комбинация красного, зелёного и синего каналов.

Насыщенность и светлота определяют, насколько 'широкими' (цветность, C) будут значения каналов в этом сегменте. Высокая насыщенность создаёт более яркие цвета, низкая — более приглушённые, близкие к серому, а светлота смещает результат в сторону чёрного или белого.

Этот инструмент обрабатывает введённые значения H, S, L по стандартным шагам преобразования, получая готовые к использованию значения R, G, B. Результаты можно использовать в функции rgb() CSS, в программах редактирования изображений или в любых других инструментах на основе цвета.

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