Конвертер цветов (Hex, RGB, HSL)
Предпросмотр цвета
#6366f1
Руководство по использованию
Конвертер цветов — онлайн-инструмент для преобразования значений цвета между форматами HEX, RGB, HSL, HSV и CMYK — всё работает локально в вашем браузере. Преобразование цветовых форматов — ежедневная задача дизайнеров и фронтенд-разработчиков: Figma экспортирует HEX-коды, CSS использует HEX и RGB/HSL, для работы с печатью нужны значения CMYK. Инструмент принимает любое допустимое значение цвета и мгновенно отображает эквивалентные значения во всех поддерживаемых форматах. Большой цветовой образец обеспечивает немедленное визуальное подтверждение.
- Ввести значение цвета — Введите или вставьте любое значение цвета в поле ввода: HEX-код (#6366f1 или #fff), значение RGB, значение HSL или название цвета CSS. Конвертер автоматически определяет формат.
- Использовать выбор цвета — Щёлкните цветовой образец или кнопку выбора цвета для открытия встроенного браузерного выбора цвета.
- Прочитать все эквиваленты форматов — Инструмент одновременно отображает выбранный цвет в форматах HEX, RGB (0–255), RGB (0–1 нормализованный), HSL, HSV и CMYK.
- Настроить отдельные каналы — Точно настройте цвет, изменяя отдельные значения каналов — например, изменить только альфа-канал в RGBA или скорректировать оттенок в HSL.
- Скопировать любой формат — Щёлкните кнопку «Копировать» рядом с любой строкой формата, чтобы скопировать это конкретное значение в буфер обмена.
- Проверить с помощью образца — Большой предварительный просмотр цветового образца всегда показывает реально отрендеренный цвет. Используйте его для визуального подтверждения перед копированием.
Часто задаваемые вопросы
Какие форматы цвета поддерживает этот инструмент?
Инструмент конвертирует между тремя широко используемыми CSS-форматами цвета: HEX (#RRGGBB), RGB (rgb(r, g, b), значения 0–255) и HSL (hsl(h, s%, l%) — оттенок 0–360°, насыщенность и светлота 0–100%). Также принимает именованные CSS-цвета, такие как "tomato" или "deepskyblue".
В чём разница между RGB и HSL?
RGB описывает цвет интенсивностью красного, зелёного и синего света (по 0–255). HSL описывает цвет через оттенок (положение на цветовом круге, 0–360°), насыщенность (0–100%) и светлоту (0–100%). HSL часто интуитивнее для дизайнеров, так как регулировка светлоты и насыщенности более прямолинейна.
Выполняется ли конвертация цвета на сервере?
Нет. Вся логика конвертации работает в браузере на нативном JavaScript. Ничего не отправляется на сервер.
Можно ли использовать инструмент офлайн?
2Kit — это PWA. После первого посещения он кешируется и работает полностью офлайн.
Зачем конвертировать между форматами цвета?
Разные инструменты и рабочие процессы используют разные форматы цвета. Дизайн-инструменты часто выводят HEX, тогда как CSS-анимации и системы тем могут использовать HSL для более удобной программной манипуляции.
Техническая реализация
Вся обработка данных выполняется исключительно в вашем браузере — данные никогда не отправляются на серверы. Инструмент работает полностью в офлайн-режиме как прогрессивное веб-приложение (PWA): после первого посещения все страницы и ресурсы кэшируются Service Worker и остаются доступными без подключения к интернету. Введённые данные не покидают ваше устройство, что обеспечивает безопасную работу с конфиденциальными материалами: API-ключами, паролями, приватными конфигурациями и секретными документами.