Конвертер цветов

Что такое конвертер цветов?#

Конвертер цветов переводит одно описание цвета в те, что реально нужны вашему стеку. Дизайнер передаёт вам HEX-значение из макета; CSS позволяет писать rgb() или hsl(); конвейер дизайн-токенов ожидает CSS-переменную; библиотека графиков просит RGBA-кортеж с альфа-каналом. Один и тот же цвет постоянно меняет наряд, и вы тратите реальное время на преобразование вручную или на гадание с калькулятором.

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

Причина, по которой HEX, RGB и HSL сосуществуют, в том, что каждый хорош для своей задачи. HEX (#4f46e5) компактен и доминирует в CSS, экспорте из Figma и бренд-гайдах. RGB (rgb(79, 70, 229)) делает каналы red/green/blue явными — именно этого ждут код работы с изображениями и манипуляция пикселями canvas. HSL (hsl(243, 75%, 59%)), разбитый на тон, насыщенность и светлоту, — единственная форма, доступная для человеческого рассуждения: «сделай на 10 % светлее» в HSL меняет одно число, а в RGB превращается в путаный танец трёх.

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

1. Задайте входной цвет одним из двух способов:
   • Щёлкните цветовой квадрат слева, чтобы открыть системный выборщик цвета ОС и выбрать визуально.
   • Или введите значение в текстовое поле рядом с ним. Принимаются HEX (#4f46e5, #abc или 8-значный #4f46e5ff с альфой), rgb() / rgba() и hsl() / hsla().
2. Читайте результаты в списке справа — HEX, RGB, HSL и CSS-переменная. Все поля доступны только для чтения; щёлкните в поле и скопируйте или используйте его как ориентир в работе.
3. Следите за крупным блоком предпросмотра справа; он заливается текущим цветом, чтобы вы могли sanity-check’нуть его относительно вашего дизайна.
4. Используйте палитру из 5 образцов под предпросмотром. Она генерирует варианты darker, dark, base, light и lighter, сдвигая светлоту HSL с шагом в 10 пунктов — удобно для состояний hover/active или построения тональной шкалы из одного брендового цвета.
5. Строка состояния подтверждает преобразование или сообщает «Некорректный цвет», если ввод не разобран.

Ключевые возможности#

• Три формата на входе, четыре на выходе. Вставьте HEX, rgb() или hsl() и за один раз получите обратно HEX, RGB, HSL и декларацию CSS-переменной.
• Поддержка альфа-канала. 8-значный HEX (#rrggbbaa) и ввод rgba()/hsla() переносят альфа-канал в вывод, поэтому полупрозрачные цвета корректно проходят полный цикл.
• Генератор тональной палитры. Пятиступенчатый ряд осветления/затемнения строится из собственного HSL вашего цвета, а не из заготовленной шкалы — он всегда выглядит как одно семейство.
• CSS-переменная готова к вставке. Строка --color-brand: #4f46e5; отправляется прямо в блок :root, а переименование под ваш токен вы делаете позже.
• 100 % на стороне клиента. Без бэкенда, без сетевых запросов. Ваша брендовая палитра никогда не покидает страницу.

Разбор примера#

Страница загружается с индиго #4f46e5. При таком вводе четыре поля заполняются так:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

Обратите внимание, что форма HSL hsl(243, 75%, 59%) читается как фраза: тон 243 (сине-фиолетовый угол на цветовом круге), 75 % насыщенности (довольно насыщенный), 59 % светлоты (средний тон, чуть ярче средне-серого). Если дизайнер попросит «сделай чуть темнее для состояния hover», вы опустите те самые 59 до 49 и получите hsl(243, 75%, 49%) — и действительно, это ровно образец dark, который генератор палитры выдаёт под предпросмотром, рядом с light на 69 % и экстремумами на 39 % и 79 %.

Если же вы начнёте с CSS-переменной, которая у вас уже есть, вставьте её значение в текстовое поле. rgba(79, 70, 229, 0.5) разберётся как тот же индиго при 50 % непрозрачности, а вывод HEX станет #4f46e580 (8-значный, альфа 0x80 ≈ 0.5), готовый к вставке в стили, где предпочитают HEX.

FAQ#

Дизайнер дал мне #4f46e5, а в dev-инструментах видно rgb(79, 70, 229). Это один и тот же цвет?#

Да, в точности. HEX и RGB — две сериализации одних и тех же значений sRGB. #4f46e5 расщепляется на пары байт 4f, 46, e5 — это hex для 79, 70 и 229. Используйте ту форму, которую предпочитает ваш контекст — CSS считает их идентичными.

Когда лучше обратиться к HSL, а не к HEX?#

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

Почему палитра иногда выглядит неравномерно на очень тёмных или светлых цветах?#

Генератор сдвигает светлоту фиксированными шагами по 10 пунктов и ограничивает значения на 0 % и 100 %. У этих пределов шаги сжимаются, потому что двигаться некуда — цвет со светлотой 95 % имеет лишь 5 пунктов «светлее» до чистого белого. Это свойство самого цветового пространства HSL, а не баг.

Поддерживает ли этот инструмент P3 или цвета широкого охвата?#

Нет. Он работает в пространстве sRGB, которое описывают CSS HEX/RGB/HSL и которое покрывает подавляющее большинство веб-задач. Display-P3 и синтаксис color() — это другой конвейер, и здесь не разбираются.