Конвертер RGB в HEX

Как перевести RGB в HEX

1. Введите значения красного, зелёного и синего (0–255) или перетащите ползунки.
2. Следите, как образец цвета обновляется при изменении каждого канала.
3. Hex-код появляется мгновенно в стандартной форме #rrggbb.
4. Нажмите «Копировать», чтобы забрать код для CSS, дизайн-токена или SVG.
5. Нужно в обратную сторону? Используйте конвертер HEX в RGB, ссылка есть на этой странице.

Что делает этот конвертер RGB в HEX

Инструмент берёт три канала — красный, зелёный и синий от 0 до 255 — и упаковывает их в единый hex-токен стандартной формы #rrggbb, обновляя его на лету, пока вы вводите числа или тянете ползунки. Образец цвета подтверждает результат, а кнопка копирования отдаёт вам код, готовый для CSS, конфига Tailwind, заливки SVG или файла дизайн-токенов.

Он намеренно прост и работает целиком в вашем браузере. Хотите ли вы вводить точные числа или подбирать соседние оттенки ползунками — перевод rgb в hex происходит мгновенно, ничего не отправляется на сервер и ничего не нужно устанавливать.

Как работает преобразование

Каждый канал 0–255 записывается как двузначное шестнадцатеричное число, и три числа сцепляются вместе. Красный 255 — это ff, зелёный 102 — 66, синий 0 — 00, поэтому rgb(255, 102, 0) превращается в #ff6600. Значения меньше 16 получают ведущий ноль — вот почему 10 становится 0a, а не a; пропуск этого нуля — самая частая ошибка при ручном переводе.

Поскольку hex — это просто шестнадцатеричная запись тех же самых значений каналов sRGB, преобразование точно в обе стороны. Каждое значение 0–255 соответствует ровно одной двузначной паре, поэтому при переходе из RGB в hex не теряется ни бита цветовой информации.

Как достать значения RGB из картинок и программ

Если нужно повторить цвет с фотографии, чужого сайта или макета, сначала возьмите пипетку: большинство графических редакторов, инструменты разработчика в браузере и системные утилиты скриншотов умеют считать пиксель и показать его значения RGB. Введите эти три числа сюда — и hex-код для боевого кода готов.

На что обратить внимание: некоторые программы выдают RGB в процентах или дробях 0–1 (0.13, 0.55, 0.91). Умножьте дроби на 255 и округлите перед конвертацией, иначе итоговый hex окажется совершенно не тем.

Почему hex — стандарт для веба

Hex-код — это один короткий однозначный токен, а именно такое любит код. #228b22 легко вставить, легко найти поиском по кодовой базе и легко прочитать в диффе, тогда как три отдельных числа — это три шанса переставить местами или потерять значение. Стайлгайды, линтеры и системы дизайн-токенов почти все стандартизируют hex именно поэтому.

Но это не делает RGB устаревшим. Скрипты, работа с canvas и любой код, который управляет отдельным каналом, куда охотнее имеют дело с числами, чем с упакованной строкой. Перевод RGB в hex нужен, чтобы получить хранимую и удобную для обмена форму, когда цвет уже выбран.

Работа с прозрачностью

Стандартный hex описывает только непрозрачный цвет. Если у источника есть альфа-значение, переведите его отдельно: умножьте альфу 0–1 на 255, округлите и добавьте четвёртой hex-парой. Так rgba(255, 102, 0, 0.5) превращается в #ff660080, ведь 0.5 × 255 ≈ 128, а это 80 в hex.

Поддержка 8-значного hex сейчас широка в современных браузерах, но если вы ориентируетесь на устаревшее окружение или почтовый клиент, оставьте цвет шестизначным, а прозрачность выразите через rgba() или отдельное свойство opacity.

Контрастность и доступность

Проверки контрастности для доступности работают со значениями каналов RGB, поэтому, если вы начинаете с RGB, у вас уже есть числа, которые нужны чекеру, ещё до перевода в hex. Так легко убедиться, что текст проходит соотношение 4.5:1 для основного текста или 3:1 для крупного текста на своём фоне.

Практичный подход — проверять контраст в RGB, подкручивать один-два канала, пока соотношение не пройдёт, и только потом переводить финальное значение в hex для таблицы стилей. Поскольку преобразование точное, одобренный оттенок — ровно тот оттенок, что попадёт в продакшн.

Связанные инструменты для цвета

Обратный путь встречается не реже, поэтому держите под рукой конвертер HEX в RGB на случай, когда таблица стилей или брендбук даёт hex-код, а вам нужны каналы для rgba() или работы с canvas. Оба направления без потерь.

Если цвет ещё не выбран, палитра цветов позволяет перетащить курсор к оттенку и прочитать HEX, RGB и HSL сразу, а генератор CSS-градиентов превращает выбранные цвета в готовые к вставке линейные и радиальные фоны.

Часто задаваемые вопросы

Похожие инструменты