Введите цвет в формате RGB и мгновенно получите точное значение HEX, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод RGB в HEX
Значения часто приходят строкой rgb(...) или тройкой чисел: getComputedStyle возвращает цвета именно в таком виде, getImageData в canvas отдаёт числа пикселей, а библиотеки обработки изображений печатают кортежи. Чтобы сохранить цвет в файл дизайн-токенов, конфиг Tailwind, атрибут fill в SVG или шаблон HTML-письма, удобнее одна короткая строка HEX: она занимает меньше места, и её легче сравнивать в диффе при проверке кода. Введите три канала, получите шестизначный код и проверьте, нельзя ли сократить его до трёх символов.
Где это пригодится
- Превратить результат getComputedStyle вроде rgb(34, 139, 34) обратно в HEX для файла дизайн-токенов.
- Подписать образец палитры кодом HEX после чтения пикселя через getImageData в canvas.
- Вставить кортеж из Pillow или OpenCV в атрибут fill в SVG или в шаблон HTML-письма.
Как перевести RGB в HEX
HEX-код представляет собой тот же цвет RGB, записанный в шестнадцатеричной системе (base-16). Шесть символов после решётки: три пары RR, GG и BB, по одной на канал.
Чтобы перевести HEX в RGB, переведите каждую пару из base-16 в десятичную систему: FF равно 255, 57 равно 87, 33 равно 51. Обратный перевод: запись каждого канала (0-255) двузначным шестнадцатеричным числом.
Пример расчёта
- R: 30 ÷ 16 = 1, остаток 14 → 1E
- G: 144 ÷ 16 = 9, остаток 0 → 90
- B: 255 ÷ 16 = 15, остаток 15 → FF
rgb(30, 144, 255) = #1E90FF
Совет: Если числа взяты из OpenCV, помните, что по умолчанию там порядок каналов BGR. Переставьте их в порядок R, G, B перед вводом, иначе в HEX красный и синий поменяются местами, и цвет будет выглядеть неверно.
Популярные цвета: RGB в HEX
| Цвет | RGB | HEX |
|---|---|---|
| Красный | rgb(255, 0, 0) | #FF0000 |
| Оранжевый | rgb(255, 165, 0) | #FFA500 |
| Жёлтый | rgb(255, 255, 0) | #FFFF00 |
| Лайм | rgb(0, 255, 0) | #00FF00 |
| Зелёный | rgb(0, 128, 0) | #008000 |
| Голубой | rgb(0, 255, 255) | #00FFFF |
| Бирюзовый | rgb(0, 128, 128) | #008080 |
| Синий | rgb(0, 0, 255) | #0000FF |
| Тёмно-синий | rgb(0, 0, 128) | #000080 |
| Фиолетовый | rgb(128, 0, 128) | #800080 |
| Пурпурный | rgb(255, 0, 255) | #FF00FF |
| Розовый | rgb(255, 192, 203) | #FFC0CB |
| Коричневый | rgb(165, 42, 42) | #A52A2A |
| Серый | rgb(128, 128, 128) | #808080 |
| Чёрный | rgb(0, 0, 0) | #000000 |
| Белый | rgb(255, 255, 255) | #FFFFFF |
Часто задаваемые вопросы
Какой регистр букв выбрать в полученном коде?
Подойдёт любой: в CSS, SVG и HTML браузер считает #FF5733 и #ff5733 одним и тем же цветом. Выберите один стиль на весь проект и закрепите его линтером или форматтером, чтобы диффы и поиск по коду оставались единообразными.
Можно ли сократить результат до трёх символов?
Только если в каждой паре две одинаковые цифры. Например, rgb(255, 136, 0) даёт #ff8800 и сокращается до #f80. Число 87 в шестнадцатеричной записи равно 57, и короткой формы у него нет. Сокращение необязательно, шестизначная запись допустима всегда.
Это одна и та же цветовая модель для HEX и RGB?
Да. HEX-код просто компактно записывает те же каналы красного, зелёного и синего. #FF5733 и rgb(255, 87, 51) описывают один и тот же цвет, поэтому перевод в обе стороны происходит без потерь.
Что означают шесть символов HEX-кода?
Это три двузначных шестнадцатеричных числа: первая пара отвечает за красный канал, вторая за зелёный, третья за синий. Каждая пара принимает значения от 00 (0) до FF (255). Короткая запись из трёх символов, например #F53, разворачивается удвоением каждого знака (#FF5533).
Поддерживает ли HEX прозрачность?
Да, восьмизначный код #RRGGBBAA добавляет пару альфа-канала, где 00 означает полную прозрачность, а FF означает полную непрозрачность. В CSS также можно использовать запись rgba(), например rgba(255, 87, 51, 0.5).
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →