Как пользоваться: Конвертер цветов
- Введите или вставьте цвет в поле Значение цвета — подходит любой 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 — это chroma (насыщенность цвета), а H — угол оттенка. Поэтому он идеально подходит для генерации согласованных оттенков, состояний при наведении и доступных цветовых пар. 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, rgb в hex, hex в hsl, конвертер oklch, цвет cmyk, названия css цветов, палитра tailwind.
Инструменты, которые хорошо сочетаются с Конвертер цветов
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Конвертер систем счисления — Введите число в любой системе счисления и сразу увидите его во всех остальных.
- Изображение в Base64 — Превратите PNG, JPEG, SVG, WebP или GIF в Base64 Data URI с готовыми CSS и HTML или вставьте строку Base64, чтобы просмотреть и скачать изображение.
Часто задаваемые вопросы
Как перевести 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 часто проще воспринимать в пипетках цвета.