Конвертер цветов
Переводите цвета между HEX, RGB и HSL
🔒 100% бесплатно · без регистрации · файлы не покидают ваше устройство
Цвета в вебе существуют в трёх основных нотациях, и в любом проекте рано или поздно нужны все три. HEX (#3B82F6) — то, что выдают дизайн-инструменты и брендбуки. RGB (59, 130, 246) — то, в чём думают CSS-фильтры, canvas-код и графические редакторы. HSL (217°, 91%, 60%) — человекочитаемый формат: каналы оттенка, насыщенности и светлоты соответствуют тому, как рассуждают дизайнеры, поэтому собирать состояния наведения, тёмные варианты и целые палитры изменением одного числа куда проще.
Этот конвертер цветов переводит между HEX, RGB и HSL в обе стороны и в реальном времени: введите любой формат или используйте визуальный пикер — остальные два пересчитаются мгновенно с большим образцом цвета. Копирование в один клик для каждого значения избавляет от ручного переписывания между Figma и таблицей стилей. С поддержкой альфа-канала RGBA и HSLA он закрывает все пересчёты цвета, с которыми ежедневно сталкиваются фронтендеры и дизайнеры.
Зачем нужен Конвертер цветов
Перенос цветов из макета в CSS
Дизайн-инструменты показывают HEX, а ваш код-стайл может требовать RGB или CSS-переменные — один точный пересчёт избавляет от неуловимых расхождений.
Состояния hover и active
Переведите фирменный цвет в HSL, опустите светлоту на 8–10% — и получите предсказуемо более тёмный вариант для hover кнопки.
Палитра из одного фирменного цвета
В HSL шаги по насыщенности и светлоте порождают оттенки и тени, которые гармонично держатся на одном тоне.
Добавление прозрачности к цвету
Переведите HEX в RGBA, чтобы сделать полупрозрачный оверлей без изменения базового оттенка.
Полезные советы
- Для вариантов используйте HSL: изменение только канала L сохраняет оттенок, что в RGB практически невозможно подобрать на глаз.
- Трёхзначный HEX вроде #48F — сокращение, удваивающее каждую цифру (#4488FF): удобно для быстрых прикидок в уме.
- После пересчёта фирменных цветов для текста проверьте контраст: WCAG требует 4.5:1 для основного текста независимо от нотации.
- Копируя цвета из дизайн-инструментов, сверяйте цветовой профиль: несовпадение sRGB может сдвинуть значения даже при совпадающем HEX.
Как пользоваться: Конвертер цветов
- 1Введите цвет в любом формате или используйте пикер
- 2Все форматы пересчитаются мгновенно
- 3Кликните по любому значению, чтобы скопировать
Часто задаваемые вопросы
Какие форматы поддерживаются?▾
HEX (#RRGGBB), RGB/RGBA, HSL/HSLA — всё пересчитывается на лету по мере ввода.