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

Конвертер цветов преобразует цвета между HEX, RGB, HSL и HSV для CSS интерфейса, передачи дизайна и упорядочивания токенов темы.

Введите #4f46e5, rgb(...) или hsl(...), чтобы привести цвет к форматам, удобным для копирования.

Как пользоваться Конвертер цветов

Вставьте HEX, RGB, RGBA, HSL или HSLA значение цвета.
Нажмите convert и проверьте значения HEX, RGB, HSL и HSV.
Сверьте образец цвета и скопируйте один формат или все форматы.

Когда это полезно

Перевести HEX-значение из макета в CSS rgb() или hsl().
Настроить светлоту и насыщенность в HSL при проверке состояний наведения.
Нормализовать color токен значения во время очистки темы.

Форматы цвета и ограничения

HEX, RGB, HSL и HSV описывают один цвет в разных системах координат. Конвертер сохраняет цвет RGB; альфа-канал из RGBA или HSLA принимается на входе, но не сохраняется в результате.

Трёхзначный HEX раскрывается в шестизначный.
Каналы RGB должны быть от 0 до 255.
HSL использует percentages для S/L, а hue идет по кругу 0-360 degrees.
HSV часто используют в палитрах, HSL удобнее для настройки темы в CSS.

Частые вопросы: Конвертер цвета

Есть HEX to RGB и RGB to HEX?: Да. HEX ввод дает RGB/HSL/HSV, а RGB ввод дает HEX/HSL/HSV.
Почему alpha нет в result?: Инструмент сфокусирован на преобразовании непрозрачных цветов, поэтому альфа-канал RGBA/HSLA игнорируется.
Colors отправляются на сервер?: Нет. Parsing, conversion, preview и copy выполняются локально в браузере.

Преобразование цвета и читаемость

Смена формата не гарантирует контраст. Перед использованием цвета для текста, кнопок или ссылок проверьте его на реальном фоне: контраст по WCAG, соответствие бренду и состояния интерфейса.

Как выбрать формат цвета в CSS

Один и тот же color можно записать как HEX, RGB, HSL или HSV, но каждый формат подходит для своей задачи поддержки.

HEX удобен для компактной передачи из дизайна и стабильных theme токены.
CSS rgb() или hsl() удобнее, когда нужны прозрачность, переменные или динамическое составление.
HSL лучше для hover, active, более светлых или тёмных вариантов, потому что hue, saturation и lightness проще контролировать, чем исходный RGB.

Проверки доступности перед релизом цветов

Преобразование цвета сохраняет эквивалентность значений, но не доказывает читаемость текста, ясность состояний или соответствие требованиям контраста.

Проверяйте основной текст и текст кнопок на реальном фоне по правилам контраста WCAG.
Не передавайте состояния ошибки, успеха или отключения только цветом; добавляйте текст, значки или изменение формы.
Для фирменных цветов в ссылках или кольцах фокуса проверьте состояния наведения, нажатия, отключения и выбора.