Конвертер цветов
Конвертировать цвета между HEX, RGB, HSL, HSV и CMYK
Все пять представлений обновляются при вводе или выборе.
Цветовые пространства и их мелкий шрифт
Все форматы из одной вставки
Вставьте "indigo", "#4f46e5", rgb(79,70,229) или hsl(245,58%,59%) — и мгновенно получите все пять представлений, не перепечатывая цвет в каждом режиме.
Живой образец с палитрой
Образец обновляется при вводе или перетаскивании нативного выборщика, поэтому конвертируемое — ровно тот цвет, который вы видите.
Копирование в один клик
У каждой строки формата своя кнопка копирования, и всё работает офлайн в браузере — инвентаризация палитр не требует загрузки.
Что такое конвертер цветов?
Конвертер цветов переводит один цвет между форматами разных инструментов. Дизайн-софт экспортирует HEX или CMYK, фронтенд-инженеру нужны rgb() или hsl() для CSS, а инструменту данных может понадобиться hsv(). Вместо того чтобы пять раз открывать палитру, вставьте имеющееся значение и мгновенно увидите все остальные: "#4f46e5" → rgb(79, 70, 229) → hsl(245, 58%, 59%).
Возможности
- Разбирает hex (#fff, #ffffff, #rrggbbaa) и rgba()-ввод
- Вычисляет эквиваленты rgb / hsl / hsv / cmyk для любого ввода
- Живой образец, обновляющийся при вводе или выборе
- Сохраняет альфу, где она есть (8-значный hex, rgba)
- Копирует каждый формат своей кнопкой
- Нативный выборщик цвета для визуального подбора
Когда использовать
- Перенести фирменный цвет из дизайн-инструмента в CSS-переменные
- Перевести печатный CMYK в безопасный для веба hex
- Получить hsl для CSS-градиентов и палитр тёмной темы
- Проверить, как другой конвертер округлил цвет
Конфиденциальность: преобразование полностью происходит в вашем браузере — введённое никогда не загружается.
HEX, RGB, HSL и то, что на самом деле означает контраст
- HEX и RGB — это одни и те же значения sRGB, записанные в разных форматах; преобразование между ними — чисто арифметическая операция, без смещения цвета.
- HSL представляет тот же цветовой охват в виде цилиндра: оттенок вращается по окружности, насыщенность изменяется по радиусу, а яркость — по высоте. Равные шаги в HSL не воспринимаются как одинаково различающиеся — именно поэтому были разработаны перцептивные цветовые пространства, например OKLCH.
- Контраст по стандарту WCAG вычисляется на основе относительной яркости после гамма-расширения, а не из простого среднего значения компонентов RGB; приведённый ниже инструмент использует официальную формулу версии 2.1.
Частые вопросы
Какие форматы поддерживаются?⌄
Hex (3, 4, 6 или 8 цифр — 8 добавляет альфу), rgb()/rgba(), hsl()/hsla(), hsv()/hsb() и cmyk(). Ввод нормализуется автоматически: #FFF, rgb(255 0 0) или hsl(0, 100%, 50%).
Точны ли преобразования?⌄
Они соответствуют стандартным CSS-формулам (каналы округляются до целых). HSL/HSV-тона сохраняются с точностью до одного десятичного знака; CMYK вычисляется обычным преобразованием и округляется до одного знака процента.
Отправляется ли мой цвет куда-либо?⌄
Нет. Всё работает в вашем браузере на чистом JavaScript — ничего не передаётся и не сохраняется.