HEX, RGB и RGBA в CSS
HEX и RGB описывают один и тот же экранный цвет разными способами. В HEX цвет записывается шестнадцатеричными парами каналов, например #ff5500. В RGB те же каналы задаются десятичными числами, например rgb(255, 85, 0).
RGBA добавляет alpha-канал, то есть прозрачность. Для CSS это удобно, когда цвет должен оставаться тем же, но слой нужно сделать частично прозрачным, например rgba(255, 85, 0, 0.5).
Поддерживаемые HEX-записи
HEX-запись может быть короткой или полной:
- #rgb — 3 символа без alpha, например #f50;
- #rgba — 4 символа с alpha, например #f508;
- #rrggbb — 6 символов без alpha, например #ff5500;
- #rrggbbaa — 8 символов с alpha, например #ff550080.
Короткая запись разворачивается удвоением каждого символа.
$$ \#rgb \rightarrow \#rrggbb $$
$$ \#rgba \rightarrow \#rrggbbaa $$
Например, #f50 становится #ff5500, а #f508 становится #ff550088.
Как считается RGB
Каждая пара HEX-символов переводится из шестнадцатеричной системы в десятичное значение канала.
$$ R = \operatorname{hex}(RR)_{16} $$
$$ G = \operatorname{hex}(GG)_{16} $$
$$ B = \operatorname{hex}(BB)_{16} $$
Для CSS-формата RGB каждый канал остается в диапазоне от 0 до 255.
$$ 0 \le R,G,B \le 255 $$
Например, в цвете #ff5500 красный канал равен 255, зеленый равен 85, а синий равен 0, поэтому та же запись в CSS выглядит как rgb(255, 85, 0).
Как считается alpha
В 8-символьном HEX alpha записывается последней парой символов AA. Эта пара переводится в число от 0 до 255, а затем нормализуется в CSS-диапазон от 0 до 1.
$$ \alpha = \frac{AA_{16}}{255} $$
Для короткой 4-символьной записи alpha сначала разворачивается так же, как цветовые каналы: #f508 использует 88 как alpha-пару.
В CSS значение 0 означает полностью прозрачный цвет, а 1 — полностью непрозрачный.
$$ 0 \le \alpha \le 1 $$
Например, #ff550080 дает alpha около 0.5, поэтому цвет можно записать как rgba(255, 85, 0, 0.5).
Ограничения формата
Инструмент работает с HEX, RGB и RGBA для CSS-цветов. Он проверяет HEX-символы, длину HEX-записи и диапазоны RGB-каналов. Если нужен другой цветовой формат или профильная полиграфическая конвертация, результат этой страницы не следует использовать как замену специализированному инструменту.