IT Market
Инструменты/Дизайн/Цвет/Перевести RGB в HEX онлайн — конвертер цвета
RGB → HEX

Конвертер цветов из RGB в HEX

Коротко об инструменте

Перевести RGB в HEX онлайн — конвертер цвета

Пипетка в графическом редакторе, скриншот интерфейса или ответ API выдают цвет тремя числами, а в стилях, брендбуке и Figma принято писать короткий шестизначный код. Заполните поля R (0-255), G (0-255) и B (0-255), нажмите «Конвертировать» и заберите готовый HEX кнопкой «Копировать». Числа обрабатываются скриптом внутри открытой вкладки, никакой отправки данных на сервер при расчете не происходит. Смотрите также: обратное разложение HEX на R, G и B, тот же цвет в координатах тона и светлоты, найти нужный цвет пипеткой на экране.

Как пользоваться

  1. Впишите красный канал в поле R (0-255) — форма не примет число больше 255.
  2. Заполните поля G (0-255) и B (0-255) значениями зеленого и синего каналов.
  3. Дробные значения округлите до целых: шестнадцатеричный код записывается только целыми байтами.
  4. Нажмите «Конвертировать» и посмотрите полученный код под полями ввода.
  5. Нажмите «Копировать», чтобы забрать HEX в буфер обмена и вставить его в стили или в макет.

Вопросы и ответы

Почему поле не принимает значение 300 или отрицательное число?

Каждый канал занимает один байт, а байт вмещает ровно 256 состояний — от 0 до 255. Поэтому у полей выставлены границы min 0 и max 255. Если ваш источник выдает значения в долях от нуля до единицы, умножьте их на 255 и округлите: 0,5 превращается в 128.

Как записать полученный код: строчными или заглавными буквами?

Разницы для браузера нет, #ff0000 и #FF0000 читаются одинаково. Верхний регистр чаще используют в брендбуках и в Figma, нижний привычнее в CSS-файлах. Важно другое — держать один стиль во всем проекте, иначе автоматический поиск дублей цветов в стилях перестанет находить совпадения.

Что делать с прозрачностью, если у цвета есть альфа-канал?

Обычный шестизначный код прозрачность не хранит. Есть восьмизначная запись, где два последних символа отвечают за альфу, но поддерживают ее не все инструменты. Для CSS надежнее оставить цвет в виде rgba: для перевода кода в такую форму в каталоге есть отдельная страница HEX → RGBA.

Можно ли так подобрать цвет по фотографии или скриншоту?

Эта страница только считает код по введенным числам, распознавания картинок в ней нет. Сначала снимите значения каналов пипеткой в редакторе, инструментах разработчика браузера или через анализатор цветов на изображении, а затем перенесите три числа в поля R, G и B.

Сохраняются ли где-то введенные значения каналов?

Нет, страница ничего не записывает и не пересылает: расчет живет в памяти вкладки и исчезает при ее закрытии. Историю преобразований инструмент тоже не ведет, поэтому нужные коды имеет смысл сразу копировать в свой файл со стилями или в описание палитры.

Почему на экране цвет выглядит не так, как в макете, хотя код совпадает?

Обычно виноват цветовой профиль дисплея и режимы вроде True Tone или ночной подсветки. Один и тот же HEX на профессиональном мониторе и на телефоне выглядит по-разному. Сверяйте оттенки на калиброванном экране, а сам код используйте как единственный источник истины.

Примеры

Цвет кнопки, снятый пипеткой в Photoshop
До: R 255, G 0, B 0
После: #FF0000
Серый фон карточки из макета
До: R 244, G 245, B 247
После: #F4F5F7