Дизайнер прислал макет с кодом #3366FF, а нужно вставить этот цвет в код, который принимает только rgb(). Или наоборот - в графическом редакторе показывает значения R, G и B, а для CSS нужен компактный HEX. Перевод один и тот же, просто в разные стороны, и калькулятор выше делает это мгновенно в обоих направлениях.
Как HEX превращается в RGB
HEX-код цвета выглядит как #RRGGBB - решётка и шесть символов после неё. Символы идут парами, и каждая пара отвечает за свой канал: первая - за красный, вторая - за зелёный, третья - за синий. Внутри пары цифры записаны в шестнадцатеричной системе счисления, где кроме привычных 0-9 используются ещё буквы A, B, C, D, E, F вместо чисел 10-15.
Чтобы получить RGB, каждую пару переводят из шестнадцатеричной системы в десятичную отдельно, без привязки к соседним парам. Диапазон значений одной пары - от 00 до FF, что в десятичной записи соответствует числам от 0 до 255. Ровно 256 возможных уровней яркости на канал, потому что двумя шестнадцатеричными цифрами кодируется ровно один байт.
Разбираем пример: #3366FF
Возьмём код #3366FF и разложим его на пары: 33, 66, FF.
Пара 33 переводится так: первая цифра 3 стоит в разряде шестнадцатых, вторая 3 - в разряде единиц. Получаем 3×16 + 3 = 51. Это значение красного канала.
Пара 66 считается аналогично: 6×16 + 6 = 102. Это зелёный канал.
Пара FF - здесь буква F означает 15. Считаем: 15×16 + 15 = 255. Это синий канал, причём максимальное значение - канал выкручен на полную.
В итоге #3366FF - это rgb(51, 102, 255): умеренно выраженный красный, чуть больше зелёного и максимум синего. На глаз это яркий синий с лёгким сиреневым отливом, часто встречается в фирменных стилях IT-компаний.
Ещё примеры для проверки
Чистый красный цвет в HEX записывается как #FF0000. Первая пара FF даёт 255 - красный канал на максимуме. Вторая пара 00 даёт 0, третья тоже 00. Итог: rgb(255, 0, 0), никакой примеси зелёного или синего.
Крайние случаи полезно запомнить отдельно. #000000 - все три пары нулевые, значит все три канала выключены, получаем rgb(0, 0, 0) - чёрный. #FFFFFF - все три пары максимальные, rgb(255, 255, 255) - белый. Между этими двумя точками и располагается вся палитра, которую можно набрать шестизначным HEX-кодом.
Зачем нужны оба формата
HEX компактнее: шесть символов после решётки против трёх чисел через запятую в RGB. В CSS, дизайн-макетах и коде верстальщики чаще пишут именно HEX - он короче и его удобно вставлять в атрибут color или background без лишних символов.
RGB нагляднее показывает вклад каждого канала по отдельности - когда нужно, например, чуть приглушить красный или добавить синего, проще подкрутить одно число в rgb(), чем пересчитывать HEX в уме. Некоторые графические редакторы, библиотеки для рисования и API графики принимают цвет только в виде трёх отдельных чисел, поэтому перевод туда-обратно - обычная рабочая задача, а не разовая.
Обратный перевод: из RGB в HEX
Процесс работает и в обратную сторону. Берём три числа от 0 до 255, каждое переводим в шестнадцатеричную запись из двух цифр и склеиваем результат с решёткой впереди. Если число меньше 16, спереди добавляется ноль - например, 5 в HEX это не “5”, а “05”, иначе пара цифр не наберётся и код развалится. Переключите режим в калькуляторе выше на “RGB → HEX”, введите три канала - и получите готовый код для CSS.
Таблица основных цветов в HEX и RGB
| Цвет | HEX | RGB |
|---|---|---|
| Белый | #FFFFFF | 255, 255, 255 |
| Чёрный | #000000 | 0, 0, 0 |
| Красный | #FF0000 | 255, 0, 0 |
| Зелёный | #008000 | 0, 128, 0 |
| Синий | #0000FF | 0, 0, 255 |
| Серый | #808080 | 128, 128, 128 |
| Жёлтый | #FFFF00 | 255, 255, 0 |
Частая путаница при работе с цветом
Иногда HEX-код путают с короткой записью из трёх символов вроде #36F - это сокращённый формат, где каждая цифра дублируется дважды: #36F превращается в #3366FF. Калькулятор на этой странице работает с полной шестизначной записью, поэтому короткий вариант нужно сначала развернуть вручную, продублировав каждый символ.