В вебе один и тот же цвет можно записать несколькими способами. Все три основных формата — HEX, RGB и HSL — поддерживаются во всех современных браузерах и CSS-препроцессорах. Выбор формата — вопрос удобства и соглашений команды.
HEX
Самый популярный
#c8002a · #C8002A · #f00 = #ff0000
Шестнадцатеричная запись трёх байт: #RRGGBB. Каждая пара — значение канала от 00 до FF. Краткая форма #RGB раскрывается в #RRGGBB. Регистр не важен. Поддерживает прозрачность: #RRGGBBAA.
RGB
Для JS и Canvas
rgb(200, 0, 42) · rgba(200, 0, 42, 0.5)
Три канала Red / Green / Blue, каждый от 0 до 255. Форма rgba() добавляет четвёртый параметр — прозрачность от 0 (прозрачный) до 1 (непрозрачный). Удобен для вычислений и анимаций в JavaScript.
HSL
Для дизайнеров
hsl(348, 100%, 39%) · hsla(H, S%, L%, a)
Hue (оттенок) — угол на цветовом круге 0–360°. Saturation — 0% серый, 100% чистый цвет. Lightness — 0% чёрный, 50% цвет, 100% белый. Легко создавать светлые/тёмные варианты — просто меняйте L.
Когда что
Практика
дизайн-система → HSL · Figma → HEX · JS → любой
HEX — стандарт дизайн-передачи, копируется из Figma. RGB — для динамических стилей в JS, Canvas, SVG-фильтров. HSL — для дизайн-токенов, где нужно управлять вариантами --color-500, --color-600.
04
Частые вопросы
Вставьте код вида `#E4002B` — он разложится на три канала по два шестнадцатеричных знака: красный, зелёный, синий. Обратное преобразование работает так же: введите `rgb(228, 0, 43)` и получите HEX. Все три поля связаны, поэтому правка любого из них сразу пересчитывает остальные и обновляет превью.
HSL описывает цвет через тон, насыщенность и светлоту вместо смеси трёх каналов. Он удобнее, когда нужна вариация уже выбранного цвета: чтобы получить оттенок темнее, достаточно уменьшить светлоту, тогда как в RGB пришлось бы пересчитывать все три числа сразу и на глаз.
Краткая запись из трёх знаков раскрывается удвоением каждого: `#f00` превращается в `#ff0000`, `#abc` — в `#aabbcc`. Инструмент понимает обе формы и всегда показывает полную. Обратное неверно: сокращать можно только те цвета, у которых в каждой паре обе цифры одинаковы, — таких из шестнадцати миллионов оттенков всего четыре тысячи.
Моделью смешения. RGB складывает свет и живёт на экранах, CMYK смешивает краски и живёт в печати. Часть ярких экранных цветов красками физически невоспроизводима, поэтому в печати они тускнеют. Честный перевод требует цветового профиля устройства, и этот конвертер в CMYK не переводит намеренно.
Введите код — если он совпадает с одним из 148 именованных цветов CSS, название появится рядом. Именно совпадает: ближайшее имя не подбирается, потому что `#ff6347` — это `tomato`, а `#ff6348` уже безымянный оттенок, и выдавать его за томатный было бы неправдой.
Нет. Все преобразования выполняются в браузере, введённые значения никуда не передаются и между сессиями не сохраняются. После первой загрузки страница работает без сети — открыв её заранее, можно подбирать цвет в самолёте. На сервер уходит только название открытого инструмента, для счётчика популярности.