Конвертер цветов HEX/RGB/HSL

АвторOleh Soloninобновлено 5 октября 2026 г.

Режим

HEX-цвет

Результат

HEX#7b3ff2
RGBrgb(123, 63, 242)
HSLhsl(260, 87%, 60%)

Один цвет в трёх форматах, понятных CSS

Переводит HEX в RGB и HSL или собирает цвет из значений RGB. HSL удобен для создания светлых и тёмных вариантов.

HEX компактен, RGB отражает то, как экран излучает свет, а HSL совпадает с тем, как о цвете думает человек: такой оттенок, такой насыщенности, такой яркости.

Стоит освоить именно HSL. Чтобы сделать вариант для наведения или неактивного состояния, достаточно изменить светлоту, оставив оттенок и насыщенность — палитра остаётся цельной.

Как пользоваться

Выберите направление: из HEX в RGB и HSL или из трёх чисел RGB в HEX и HSL.
Введите цвет — шестнадцатеричным кодом или значениями каналов от 0 до 255.
Скопируйте нужную запись: HEX и RGB описывают цвет точно, а HSL здесь округлён до целых, поэтому для точного цвета берите HEX или RGB.

Почему светлота в HSL обманывает

У чистых красного, зелёного и синего в HSL одинаковая светлота — 50 %. На глаз они совсем не одинаковы: зелёный кажется почти белым, синий — почти чёрным. HSL описывает, как цвет смешан, а не сколько света он отдаёт.

Причина в чувствительности глаза: к зелёному он в разы чувствительнее, чем к синему. Поэтому для текста на цветном фоне ориентироваться на светлоту HSL нельзя — нужен контраст, посчитанный по яркости.

Все строки получены конвертером этой страницы. Три цвета в середине стоят на одной светлоте в 50 %, а контраст с белым у них различается вдвое — 4 к 1 у красного и 8,59 к 1 у синего.
HEX	RGB	HSL
#7B3FF2	rgb(123, 63, 242)	hsl(260, 87%, 60%)
#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
#767676	rgb(118, 118, 118)	hsl(0, 0%, 46%)

Что показывает калькулятор

Цвет одновременно в HEX, RGB и HSL
Перевод в обе стороны
Поддержку сокращённой трёхсимвольной записи вроде #f00

Что важно учитывать

Используется пространство sRGB — стандарт для веба.
Прозрачность не рассматривается, все значения непрозрачные.

Частые вопросы

Что означает запись #f00?

Это сокращение от #ff0000: каждый символ удваивается. Работает только когда обе цифры канала совпадают, поэтому коротких записей всего 4096 против 16,7 миллиона полных.

Зачем нужен HSL, если есть HEX?

HSL можно править вручную. Осветлить цвет — значит поднять одно число, тогда как в HEX пришлось бы пересчитывать три канала и заранее не знать, что получится.

Что за число оттенка в HSL?

Положение на цветовом круге в градусах: 0 — красный, 120 — зелёный, 240 — синий. Круг замкнут, поэтому 360 снова красный.

Почему максимум канала — 255?

Каждый канал занимает один байт, отсюда диапазон 0–255 и 16,7 миллиона возможных цветов.

Одинаково ли светлы цвета с одинаковой светлотой в HSL?

Нет. У чистых красного, зелёного и синего светлота в HSL одна — 50 %, а относительная яркость по WCAG у зелёного почти в 9,9 раза больше, чем у синего: глаз гораздо чувствительнее к зелёному. Для решений о читаемости нужна относительная яркость по WCAG, а не светлота HSL.

Теряется ли что-нибудь при переводе?

Между HEX и RGB — нет, это одни и те же три числа в разной записи. В HSL значения округляются до целых процентов, и при обратном переводе канал может сдвинуться на единицу; глазом этого не увидеть.

Мини-пример расчёта

Чистый красный в трёх записях

Входные данные: #ff0000

Результат: rgb(255, 0, 0) · hsl(0, 100%, 50%)

Комментарий: В HSL достаточно снизить светлоту до 40%, чтобы получить более тёмный красный того же оттенка. В HEX это было бы угадыванием.

Полезные переходы

Все инструменты раздела Инструменты разработчика

Конвертер цветов HEX/RGB/HSL

Результат

Связанные инструменты

Проверка контраста цветов

Генератор CSS-градиента

HTML-сущности

Markdown в HTML

Полезные переходы