Что делает Конвертер цвета
Введи цвет в любом стандартном формате — HEX, RGB, HSL или HSV — и Конвертер цвета Microapp покажет соответствующие значения во всех других форматах рядом. Плюс живой образец, чтобы было видно, с каким цветом ты работаешь. Всё в браузере, мгновенно.
Дизайнерам и разработчикам постоянно нужно переводить форматы: в бренд-гайде HEX, в коде RGB с прозрачностью, в дизайн-системе токены HSL, в редакторе экспорт RGBA. Делать это вручную скучно и легко ошибиться. Это всегда-правильная версия.
Как пользоваться
- Введи или вставь значение цвета в любое из четырёх полей (HEX, RGB, HSL, HSV).
- Остальные три поля сразу обновляются эквивалентами. Образец показывает реальный цвет.
- Бери цвет пипеткой — двигай квадрат или ползунок тона, и все четыре формата обновляются в реальном времени.
- Нажми «Скопировать» рядом с любым форматом, чтобы поместить значение в буфер обмена.
HEX:
#1B6B45RGB:
rgb(27, 107, 69)HSL:
hsl(150, 60%, 26%)HSV:
hsv(150, 75%, 42%)Один и тот же цвет, четыре формата. Используй тот, что подходит твоему инструменту.
Четыре формата по полочкам
HEX. Шесть шестнадцатеричных символов, кодирующих красный, зелёный и синий (по два на каждый). #1B6B45 означает R=0x1B (27), G=0x6B (107), B=0x45 (69). Самый частый формат в веб-дизайне — каждый CSS-файл полон HEX. Трёхсимвольные сокращения (#1B6) удваивают каждый символ, но работают только для цветов с парными цифрами.
RGB. Три целых числа от 0 до 255 для тех же красного, зелёного и синего. rgb(27, 107, 69) идентично #1B6B45 — те же числа в десятичной системе. У RGB есть вариант с альфа-каналом — RGBA — для частичной прозрачности: rgba(27, 107, 69, 0.5) — наполовину прозрачный зелёный.
HSL. Hue (тон, 0-360 градусов цветового круга), Saturation (насыщенность, 0-100%), Lightness (светлота, 0-100% от чёрного к белому). hsl(150, 60%, 26%) — зелёно-голубой тон, умеренно насыщенный, довольно тёмный. HSL интуитивен для дизайнеров — можно «сделать темнее», уменьшив Lightness, без сдвига тона.
HSV. Hue, Saturation, Value (иногда HSB). Похоже на HSL, но Value представляет яркость от чёрного к чистому цвету, а не от чёрного к белому. HSV используют в большинстве графических редакторов (Photoshop, Figma) в их пипетках.
Когда какой формат
| Формат | Когда применять |
|---|---|
| HEX | CSS, дизайн-спецификации, сообщения в Slack — везде, где нужна одна короткая строка |
| RGB / RGBA | Программная работа с цветом, частичная прозрачность, CSS-анимации с интерполяцией цвета |
| HSL / HSLA | Генерация тем, цветовые палитры, программное осветление/затемнение бренд-цвета |
| HSV | Графические редакторы, пипетки — там, где «value» лучше соответствует ощущаемой яркости |
Тонкости, на которых спотыкаются дизайнеры
Lightness в HSL и Value в HSV — это НЕ одно и то же. Два цвета с Lightness 50% в HSL могут выглядеть очень разной яркости, потому что Lightness — это середина между чёрным и белым. Value 50% в HSV — «вдвое тусклее, чем чистый насыщенный». Когда автоматизируешь «сделать на 20% темнее», HSL даёт более однородный результат по разным тонам, чем HSV.
HEX по умолчанию — это sRGB. Когда ты пишешь #1B6B45, браузер читает это как sRGB. У современных дисплеев часто шире цветовой охват (P3, AdobeRGB), и CSS теперь умеет их указывать: color(display-p3 0.106 0.420 0.270). Для большинства веб-работы оставайся в sRGB/HEX; для HDR или почти-печатной работы более широкие форматы важны.
Альфа (прозрачность) не относится к HEX. Почти. Современный CSS поддерживает 8-символьный HEX с альфой в последних двух символах: #1B6B4580 — бренд-зелёный с альфой 50%. Старые браузеры альфа-байты игнорируют. RGBA и HSLA для прозрачности поддерживаются повсеместно.
Частые ошибки
Забытая # в HEX. CSS требует #1B6B45, а не 1B6B45. Конвертер Microapp принимает оба варианта на входе, но всегда выдаёт с #.
Маленькие/большие буквы в HEX. Функционально одинаково (#1b6b45 = #1B6B45). Большинство дизайн-систем приводит к верхнему регистру ради читаемости; CSS всё равно.
Ошибки округления при конвертации. Прогон HSL → HEX → HSL может дать чуть другой HSL из-за целочисленного округления (HEX — целые, HSL — с плавающей точкой). Конвертер Microapp считает с высокой точностью; ты должен видеть стабильные результаты, но в коде на многих циклах можешь словить дрейф.
Похожие инструменты
Для перевода только HEX → RGB подойдёт более простой Hex → RGB. Чтобы найти именованный цвет, ближайший к HEX, есть Поиск названия цвета. Чтобы сгенерировать согласованную палитру вокруг базового цвета — Генератор палитр.