Почему HSL и RGB, а не наоборот?
Большинство дизайнерских инструментов предлагают цвет в формате HSL — оттенок, насыщенность, светлота. Это не случайно: HSL построен так, как человек воспринимает и называет цвета. Вы говорите «голубой, чуть приглушённый, светлый» — модель HSL превращает это в числа: оттенок 200°, насыщенность 40%, светлота 70%. Изменение только светлоты оставляет оттенок неизменным, что делает HSL идеальной основой для генерации палитр и тем.
Но экран не понимает HSL. Пиксели светятся тремя субпикселями — красным, зелёным, синим. Их интенсивность задаётся числами от 0 до 255. Это аддитивная модель RGB: чем больше число, тем ярче светится субпиксель, и наоборот. Без перевода HSL в RGB вы не сможете написать CSS-правило background-color: rgb(79, 70, 229) или вставить цвет в код графической библиотеки.
Главное отличие этой страницы от других конвертеров — конверсия без потерь. Каждому допустимому значению HSL соответствует ровно один RGB-триплет в пределах видимого экраном диапазона. В отличие, например, от преобразования из LAB или CMYK, где часть цветов может выйти за границу гаммы и потребовать обрезки (clipping), здесь этого не происходит. Вы можете конвертировать туда и обратно, не получив цветового сдвига.
Как работает конвертация: числа и границы
Входные данные — три поля.
- H (оттенок) — целое число от 0 до 360. Измеряется в градусах цветового круга: 0° — красный, 120° — зелёный, 240° — синий.
- S (насыщенность) — процент от 0% до 100%. 0% — полностью серый, 100% — максимально насыщенный.
- L (светлота) — процент от 0% до 100%. 0% — чёрный, 100% — белый.
Пример: 243, 75%, 59%. Как только вы вводите эти три числа, все остальные поля обновляются мгновенно. Никаких кнопок «конвертировать», никакой отправки на сервер. Всё вычисляется в вашем браузере.
На выходе вы получаете:
- HEX — шестнадцатеричная запись цвета, например
#4F46E5. - RGB — три числа от 0 до 255:
79, 70, 229. - HSL — те же входные значения, возвращённые для контроля (иногда полезно, если вы хотите проверить округление).
- HSV — оттенок, насыщенность, яркость (значение value). Отличается от HSL тем, что яркость — это максимум среди R, G, B, а не средневзвешенная светлота. HSV удобен в графических редакторах и при выборе цвета через «ползунок» в интерфейсах.
- CMYK — голубой, пурпурный, жёлтый, чёрный (циан, маджента, йеллоу, блэк). Это субтрактивная модель, используемая в полиграфии. Важно: вывод CMYK на этой странице — лишь оценка. Реальные значения для печати зависят от типа бумаги, красок и профиля принтера. Для точного попадания в цвет нужно использовать профили ICC и софт для цветоделения.
- LAB — цветовое пространство CIE Lab* (Светлота, зелёно-красная ось, сине-жёлтая ось). Оно аппаратно-независимо и описывает цвета так, как их видит человек, включая тона, которые не воспроизводятся на типичном мониторе. LAB полезен для измерения цветовых различий (Delta E), но не для непосредственного вывода.
Полный набор выходных форматов и когда они нужны
Понимание, какой формат использовать в какой ситуации, избавляет от лишних конвертаций.
| Формат | Типичное применение | Ограничения |
|---|---|---|
| HEX | CSS, HTML, иконки, простая вёрстка | Не передаёт альфа-канал (прозрачность) в старых стандартах. |
| RGB | CSS rgb(), canvas, WebGL, обработка изображений |
Три канала 0–255, нет интуитивного управления насыщенностью и тоном. |
| HSL | Дизайн палитр, темы, CSS hsl() |
Меньше распространён в растровых форматах. |
| HSV | Программы рисования (Photoshop, GIMP) | Нет прямой связи с восприятием светлоты. |
| CMYK | Полиграфия (только как грубая оценка) | Зависит от профиля печати; на экране всегда отличается от оттиска. |
| LAB | Научные расчёты, сравнение цветов | Не поддерживается CSS; значения могут быть отрицательными. |
На этой странице вы видите сразу пять альтернатив (плюс исходный HSL). Это значит, что, подбирая цвет в HSL, вы тут же можете скопировать значение RGB или HEX и вставить его в код, а если нужно отдать файл в типографию — хотя бы примерно оценить CMYK.
Правила и граничные случаи
Инструмент спроектирован так, чтобы исключить потерю данных из-за некорректного ввода.
Если вы введёте что-то не так, например 243, 75% (без второго процента) или 243, 75, 59% (насыщенность без знака процента), или 400, 75%, 59% (оттенок за границей 360), то в полях появится сообщение:
«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
Перевод на русский: «Введите HSL как оттенок 0–360 с двумя процентами, например 243, 75%, 59%.»
Редактирование любого поля (HEX, RGB, HSL, HSV, CMYK, LAB) мгновенно пересчитывает все остальные. Если вы измените RGB на 255, 0, 0, HSL станет 0°, 100%, 50%.
Отсутствие выхода за гамму. Поскольку HSL и RGB описывают одно и то же цветовое пространство sRGB, любая тройка HSL в указанных диапазонах даёт валидный RGB. Нет цветов, которые «видны» в HSL, но не воспроизводятся на экране. Это отличие от LAB или CMYK: например, цвет LAB: (50, 80, 0) находится за пределами sRGB и при конвертации в RGB будет обрезан до ближайшего доступного. Здесь такого не бывает.
Производительность. Все расчёты выполняются в браузере без отправки данных на сервер. Это значит, что ваши цвета не покидают компьютер. Для рабочих проектов с конфиденциальной цветовой схемой это дополнительная гарантия.
Кому это нужно и зачем
Дизайнеры, строящие цветовые палитры или адаптивные темы. Вы задаёте ключевой оттенок и меняете только светлоту, получая шкалу от тёмного к светлому. Затем переносите конкретные RGB-значения в CSS-переменные.
Фронтенд-разработчики, переносящие цвета из макетов Figma или Sketch в код. Дизайнеры часто работают в HSL (или HSB, что близко к HSV), а CSS-файлы ожидают RGB или HEX. Вместо того чтобы рассчитывать вручную или открывать дополнительный конвертер, вы вводите HSL прямо на этой странице и копируете готовый rgb(79, 70, 229).
Любой, кто предпочитает думать о цвете в человеко-понятных терминах, но нуждается в точных экранных числах. Если вы подбираете цвет для кнопки, «синеватый с серым отливом, но не тёмный» — это, скажем, HSL: 220°, 30%, 55%. Перевести его в RGB за секунду — задача, с которой справляется инструмент.
Цветовые модели: аддитивная и субтрактивная, различия и гамма
Понимание физической основы помогает не удивляться, почему CMYK на экране выглядит иначе, чем на бумаге.
RGB — аддитивная модель. Свет складывается: чем больше интенсивность каждого канала, тем ближе цвет к белому. Чёрный — отсутствие света (0,0,0). Так работают мониторы, телефоны, проекторы.
CMYK — субтрактивная модель. Краски вычитают свет из белой бумаги. Чем больше краски, тем темнее. Чёрный канал (K) добавляется для экономии цветных красок и для глубоких теней. При печати используется цветоделение, которое учитывает характеристики конкретного принтера, бумаги и чернил. Поэтому показанный на этой странице CMYK — лишь математическая аппроксимация, пригодная для грубой оценки, но не для финальной вёрстки.
Цветовой охват (гамма) sRGB (стандарт, используемый в вебе) значительно уже, чем у многих CMYK-профилей (например, Fogra39) или у пространства LAB. Цвета, которые вы видите на экране в RGB, не всегда могут быть напечатаны — и наоборот. Однако преобразование HSL→RGB остаётся внутри sRGB, поэтому никаких проблем с гаммой не возникает.
Часто задаваемые вопросы
1. Почему в выводе нет альфа-канала (прозрачности)?
Инструмент работает с непрозрачными цветами. Для RGBA или HSLA нужно добавить альфа-параметр вручную. Например, rgba(79, 70, 229, 0.5).
2. Можно ли ввести HSL с дробными градусами (например, 243.5°)? Да. Поле оттенка принимает целые и дробные числа. Остальные поля округляются до целых в RGB, HEX и CMYK, но в LAB и HSV могут быть дробными.
3. Какой стандарт RGB используется? sRGB (IEC 61966-2-1). Это стандарт для веба, мониторов и большинства цифровых устройств. Если вам нужен Adobe RGB или DCI-P3, значения будут другими.
4. Почему CMYK на экране ярче, чем на бумаге? Потому что монитор излучает свет, а бумага отражает. Чернила поглощают часть света, поэтому печатные цвета всегда темнее и менее яркие, чем экранные. Кроме того, алгоритм конвертации не учитывает характеристики печатной машины.
5. Как из HSL получить HEX напрямую без RGB? HEX — это всего лишь шестнадцатеричная запись трёх чисел каналов RGB. Без промежуточного RGB его не вычислить, поэтому конвертация всегда проходит через RGB. На этой странице вы видите все три формы одновременно.
6. Может ли значение HSL быть за пределами указанных диапазонов? Нет, иначе цвет не будет находиться в цветовом пространстве sRGB. Оттенок за 360° — это повторение цветового круга (360° = 0°), но инструмент ожидает диапазон 0–360. Насыщенность и светлота строго 0–100%. Любое отклонение вызовет сообщение об ошибке.