Как пользоваться: Конвертер цветов
- Введите или вставьте цвет в поле Значение цвета — подойдёт любой CSS-формат — или выберите цвет с помощью пипетки.
- Настройте Непрозрачность, если нужна прозрачность; значения HEX с 8 цифрами и
/ alphaобновятся автоматически. - Нажмите Копировать рядом с нужным форматом. Переключитесь на синтаксис Legacy, если в вашем проекте используется
rgba(…, …)с запятыми. - Прокрутите до палитры, чтобы получить 11 оттенков и тонов; выберите вывод в CSS-переменных, Tailwind v4, SCSS или JSON, затем скопируйте или скачайте его.
Что такое конвертер цветов?
Конвертер цветов переводит один цвет в различные записи, которые используют CSS и инструменты дизайна. Один и тот же индиго можно записать как #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) или oklch(51.06% 0.2301 276.97) — все они описывают один и тот же цвет в sRGB. Дизайнеры передают HEX из Figma, библиотека компонентов ждёт каналы HSL, а современная дизайн-система может быть написана в OKLCH, поэтому быстрый и точный перевод между форматами — повседневная задача.
Поддерживаемые форматы
| Формат | Пример | Для чего подходит |
|---|---|---|
| HEX (3, 4, 6, 8 цифр) | #4f46e5, #4f46e580 | Самый распространённый формат для передачи. Необязательная 4-я и 8-я цифры задают альфа-канал: 80 ≈ 50%. |
| RGB / RGBA | rgb(79 70 229 / 0.5) | Расчёты по каналам, canvas, код с устаревшим rgba(). |
| HSL / HSLA | hsl(243 75% 59%) | Быстрая ручная настройка оттенка, насыщенности и светлоты. |
| HWB | hwb(243 27% 10%) | Смешивание чистого оттенка с белым и чёрным — интуитивно понятно для пипеток. |
| OKLCH | oklch(51% 0.23 277) | Перцептивно равномерные палитры и дизайн-токены (Tailwind CSS v4 использует палитру в OKLCH). |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Приблизительная отправная точка для печати — см. примечание ниже. |
| Названия цветов | tomato, rebeccapurple | Распознаются все 148 ключевых слов CSS; инструмент также показывает ближайшее название для любого цвета. |
Почему стоит разобраться в OKLCH
В HSL жёлтый с «светлотой 50%» выглядит заметно ярче синего с той же светлотой, потому что HSL — простое геометрическое преобразование RGB. OKLCH построен на модели OKLab, которая устроена так, что равные шаги по L (светлота) воспринимаются глазом как равные. C — это хрома (насыщенность цвета), а H — угол оттенка. Поэтому OKLCH идеален для создания согласованных оттенков, состояний при наведении и доступных цветовых пар. OKLCH также может описывать цвета за пределами sRGB (например, Display P3); если вы введёте такой цвет, инструмент обрежет его до sRGB и отметит это.
Как создаётся палитра 50–950
Палитра сохраняет оттенок вашего цвета и работает в OKLCH: каждый шаг получает фиксированную целевую светлоту (от очень светлого 50 до очень тёмного 950) и долю хромы вашего цвета, которая уменьшается там, где это необходимо, чтобы каждый образец оставался в пределах sRGB. Если включена опция Сохранить мой точный цвет, введённый цвет заменяет шаг с наиболее близкой светлотой, поэтому фирменный цвет в шкале появляется без изменений. Нужно проверить пары из палитры на доступность? Используйте Проверку контраста.
Примечание о CMYK
Перевод экранных цветов в печатные зависит от краски, бумаги и ICC-профиля вашей типографии. Значения CMYK здесь рассчитаны по стандартной некалиброванной формуле (K = 1 − max(R, G, B)). Этого достаточно для макетов, но не для печати с критичным к бренду цветом — запросите у типографии профилированный перевод.
Использование цветов в Webflow
Вставьте значение HEX в палитру цветов Webflow или в Color variable (панель Variables). Создание отдельной переменной для каждого шага палитры — например, Brand 50 … Brand 950 — даёт ту же структуру токенов, что и вывод CSS-переменных, поэтому классы могут ссылаться на оттенки вместо жёстко заданных значений.
Часто задаваемые вопросы
Как перевести HEX в RGB вручную?
#4F46E5: 4F = 79, 46 = 70, E5 = 229, поэтому цвет равен rgb(79 70 229). Трёхзначный код вроде #f60 сначала удваивает каждую цифру (#ff6600).Что означает 8-значный HEX-цвет?
00 (полностью прозрачный) до ff (непрозрачный). #4f46e580 — это индиго с непрозрачностью 128/255 ≈ 50%. Все современные браузеры поддерживают HEX из 4 и 8 цифр.Стоит ли использовать OKLCH вместо HEX или HSL?
Почему значение HSL немного меняется после конвертации?
В чём разница между HSL и HWB?
hwb(0 0% 0%) — чистый красный, а hwb(0 50% 0%) — красный, смешанный с 50% белого (розовый). HWB часто проще понять в пипетках цветов.Можно ли установить Конвертер цветов как веб-приложение и пользоваться им офлайн?
Похожие инструменты
Генератор CSS-градиентовСоздайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресет…
Генератор box-shadowДобавляйте несколько слоёв теней, меняйте смещение, размытие, спред и прозрачность на живой карточке, затем…
Конвертер систем счисленияВведите число в любой системе и сразу увидите его во всех остальных. Смотрите знаковое 8–64-битное дополнит…