HEX код упаковывает три 8‑битных числа в шесть шестнадцатеричных цифр. Конвертация HEX в RGB значит разделить эти цифры на пары и прочитать каждую пару как десятичное число от 0 до 255 — именно такие значения ожидают CSS, Figma и редакторы изображений.
Как работает конвертация HEX в RGB
- Убери ведущий # и, если код состоит из трёх цифр, удвой каждую: #f53 превращается в #ff5533.
- Раздели шесть цифр на три пары — RR, GG и BB.
- Прочитай каждую пару как число в базе 16 и конвертируй в базу 10: FF становится 255, 57 становится 87, 33 становится 51.
- Запиши три результата как rgb(R, G, B).
Рабочий пример
Эта конвертация точна. HEX и RGB описывают одни и те же sRGB‑значения в разной записи, поэтому ничего не округляется и не теряется в любом направлении.
HEX и RGB объяснено
Что такое HEX?
HEX — шестизначное шестнадцатеричное число, которое хранит каналы красного, зелёного и синего цвета после лидирующего #. Каждая пара цифр соответствует одному каналу от 00 (нет) до FF (максимум), что даёт те же 16,7 миллиона цветов, что и RGB, но в более короткой записи. HEX — стандарт в CSS, инструментах дизайна и брендбуках.
- Синтаксис:
- #RRGGBB
- Диапазон:
- 00–FF на канал
- Лучше всего для:
- CSS, передача дизайна, брендбуки
Что такое RGB?
RGB описывает цвет как три световых канала — red, green и blue — каждый от 0 до 255. Это отражает работу экранов: все три на 255 дают белый, все на 0 — чёрный. RGB подходит, когда нужно вычислять с цветом, а rgba() добавляет прозрачность.
- Синтаксис:
- rgb(R, G, B)
- Диапазон:
- 0–255 на канал
- Лучше всего для:
- код, canvas, прозрачность через rgba()
Таблица соответствий HEX → RGB
Наиболее распространённые цвета CSS, сконвертированные из HEX в RGB.
| Цвет | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |