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

Как это работает

Дизайнеры обычно работают с HEX-кодами (например, скопированными из Figma или другого дизайн-инструмента), тогда как современный CSS часто использует формат HSL, чтобы легко регулировать оттенок (hue), насыщенность или яркость цвета без пересчёта HEX-кода вручную — это полезно для создания более светлых или тёмных вариантов одного и того же брендового цвета для состояний hover, disabled или тёмных тем. Этот инструмент автоматически определяет, вставили ли вы код HEX, RGB или HSL, и конвертирует его в нужный вам формат.

В чём разница между HEX, RGB и HSL?

HEX ( #rrggbb ) и RGB ( rgb(r, g, b) ) оба описывают цвет через его красную, зелёную и синюю составляющие — HEX в 16-й системе счисления, RGB в 10-й — и представляют абсолютно одну и ту же информацию в двух разных нотациях. HSL (hsl(h, s%, l%)) описывает тот же цвет иначе: через оттенок (угол на цветовом круге), насыщенность и яркость, что делает намного интуитивнее «сохранить тот же цвет, но осветлить его» или «сохранить ту же яркость, но изменить оттенок».

Почему стоит использовать HSL вместо HEX в CSS?

Потому что легко получить согласованные варианты цвета, изменяя только составляющую яркости (например hsl(217, 91%, 60%) для базового цвета и hsl(217, 91%, 40%) для более тёмного состояния hover), без необходимости пересчитывать новый HEX-код каждый раз и без необходимости определять на глаз, остался ли оттенок прежним.

Обработка на 100% локально: конвертация выполняется прямо в вашем браузере через WebAssembly, без каких-либо обращений к внешнему серверу.