Обзор
Конвертер цветов конвертирует между четырьмя цветовыми форматами, которые чаще всего используют фронтенд-разработчики: HEX, RGB, RGBA и HSL. Дизайнеры и фронтенд-инженеры часто переключаются между инструментами дизайна (Figma, Sketch, Photoshop) и CSS-кодом, а этот инструмент позволяет выполнить все преобразования в один клик.
Как пользоваться инструментом
Шаг 1 — введите значение цвета в любом формате: HEX вроде
#00e5ff или 00e5ff (символ # необязателен), также поддерживается 3-значная форма #0cf; RGB вроде rgb(0, 229, 255); HSL вроде hsl(187, 100%, 50%). Шаг 2 — превью цвета появляется под полем ввода в реальном времени. Шаг 3 — панель «Результаты конвертации» перечисляет все четыре формата, у каждого есть кнопка «Копировать». Шаг 4 — инструмент автоматически определяет тип входных данных и безопасно игнорирует некорректные значения.Типичные сценарии
Дизайнеры выбирают цвета в HSL в Sketch или Figma и передают разработчику HEX; фронтенд-разработчики конвертируют HEX из дизайн-спецификации в RGBA для добавления прозрачности; настройка фирменных цветов через HSL для более удобного контроля яркости и насыщенности; отладка переключения тем и палитр тёмного режима; документирование цветов, взятых со скриншотов, в нескольких форматах.
Технические детали
HEX → RGB использует побитовое разделение на 8-битные каналы. RGB → HSL использует стандартный алгоритм (нормализация к [0,1] с последующим вычислением тона, насыщенности и светлоты). HSL → RGB — обратная функция с использованием шести линейных сегментов оттенка. 3-значный HEX автоматически расширяется (
#0cf → #00ccff). Четырёхканальный HEX (с альфа-каналом) здесь не поддерживается — используйте специализированный CSS Color Generator.Конфиденциальность и безопасность
Все преобразования цветов выполняются локально в вашем браузере, и введённые данные никогда не отправляются.