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

Значение тона (H) показывает положение вашего цвета на цветовом круге, насыщенность (S) — насколько он яркий или приглушённый, а светлота (L) — насколько он близок к чёрному или белому. Вместе эти три значения можно использовать в CSS напрямую как hsl(H, S%, L%).

Сначала значения R, G и B масштабируются в диапазон от 0 до 1. Светлота (L) — это среднее между самым высоким и самым низким каналом. Насыщенность (S) — это разница между каналами относительно светлоты, а тон (H) вычисляется в диапазоне 0-360 градусов на основе доминирующего канала.

• Значения R, G, B делятся на 255, чтобы привести их к диапазону от 0 до 1.
• Определяются наибольшее (max) и наименьшее (min) из масштабированных значений.
• Светлота (L) вычисляется как среднее значений max и min.
• Насыщенность (S) находится путём нормализации разницы max-min относительно светлоты.
• Тон (H) вычисляется в диапазоне 0-360 градусов на основе того, какой канал (R, G или B) доминирует.

R=52, G=152, B=219 (насыщенный синий) соответствует примерно H=204°, S=70%, L=53%.

• Вводите R, G и B как целые числа от 0 до 255; значения вне этого диапазона не представляют допустимый цвет.
• Тон (H) — это положение на цветовом круге от 0 до 360 градусов: 0 означает красный, 120 — зелёный, 240 — синий.
• Насыщенность и светлота указываются в процентах; 0% насыщенности — это оттенок серого, а 100% светлоты — белый цвет.

Модель RGB (Red, Green, Blue) точно отражает то, как экраны создают цвет, излучая свет: каждый канал принимает значение интенсивности от 0 до 255, а комбинация трёх каналов создаёт миллионы различных цветов. Однако эта модель неинтуитивна, когда нужно сделать цвет 'светлее' или 'ярче', поскольку пришлось бы менять все три канала одновременно.

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

Этот инструмент масштабирует введённые значения RGB в диапазон от 0 до 1, а затем находит наибольшее и наименьшее значения каналов для расчёта светлоты и насыщенности. Затем определяется, какой канал доминирует, чтобы найти точное положение тона на цветовом круге.

Главное преимущество формата HSL в том, что его можно использовать напрямую в CSS как hsl(тон, насыщенность%, светлота%). Например, чтобы создать более тёмный вариант основного цвета бренда, достаточно уменьшить значение светлоты — в RGB же пришлось бы пересчитывать все три канала по отдельности.

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