Что такое HEX-код цвета и как его читать
HEX-код цвета простыми словами: из чего состоит #RRGGBB, как перевести HEX в RGB, короткая запись #RGB, прозрачность #RRGGBBAA и частые ошибки.
Основы цвета · · 2 мин чтения
HEX-код цвета — это запись цвета в шестнадцатеричной системе в формате #RRGGBB: первые два символа задают яркость красного канала, следующие два — зелёного, последние два — синего. Каждый канал принимает значения от 00 (0) до FF (255), поэтому HEX описывает те же 16,7 млн цветов, что и RGB.
Из чего состоит HEX-код
Возьмём #DE7C56 — терракотовый цвет из палитры заката:
| Часть | Канал | HEX | Десятичное |
|---|---|---|---|
| DE | красный (R) | DE | 222 |
| 7C | зелёный (G) | 7C | 124 |
| 56 | синий (B) | 56 | 86 |
Итого #DE7C56 = rgb(222, 124, 86).
Как перевести HEX в RGB вручную
В шестнадцатеричной системе 16 цифр: 0–9 и A–F, где A = 10, B = 11, … F = 15. Двузначное число переводится так: первая цифра × 16 + вторая цифра.
DE= 13 × 16 + 14 = 2227C= 7 × 16 + 12 = 12456= 5 × 16 + 6 = 86
В обратную сторону: делим число на 16 — частное даёт первую цифру, остаток вторую. 222 / 16 = 13 (D), остаток 14 (E) → DE.
Опорные цвета
| Цвет | HEX | RGB |
|---|---|---|
| Чёрный | #000000 |
0, 0, 0 |
| Белый | #FFFFFF |
255, 255, 255 |
| Красный | #FF0000 |
255, 0, 0 |
| Зелёный | #00FF00 |
0, 255, 0 |
| Синий | #0000FF |
0, 0, 255 |
| Серый 50% | #808080 |
128, 128, 128 |
Совет: если все три пары одинаковые (#4E4E4E), цвет — оттенок серого.
Короткая и длинная запись
- #RGB — сокращение, где каждая цифра удваивается:
#F80=#FF8800. - #RRGGBBAA — восемь символов с прозрачностью: последние два задают альфа-канал.
#DE7C5680— тот же терракотовый с непрозрачностью около 50%. - #RGBA — короткая форма с прозрачностью:
#F808.
Регистр букв не важен: #de7c56 и #DE7C56 — один и тот же цвет.
Где используется HEX
- CSS и HTML:
color: #DE7C56; - Figma, Sketch, Canva, Photoshop — поле цвета принимает HEX.
- Брендбуки и гайдлайны: HEX — самый распространённый способ передать экранный цвет.
Сравнение с другими форматами — в статье RGB, HEX и HSL: в чём разница. Получить HEX-коды любого фото можно в генераторе палитры.
Частые вопросы
Сколько цветов можно записать в HEX?
256 × 256 × 256 = 16 777 216 цветов — столько же, сколько в 8-битном RGB.
Нужна ли решётка # перед кодом?
В CSS — обязательно. В Figma и большинстве редакторов решётку можно не вводить.
Подходит ли HEX для печати?
HEX описывает цвет экрана (RGB). Для печати нужен CMYK или Pantone, и цвет стоит проверять пробным оттиском.