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

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

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

Дизайнер присылает палитру в HEX, а верстка, Canvas, Android или скрипт на Python ждут три числа от 0 до 255. Вставьте код вида #00FF7F в поле HEX Color, нажмите «КОНВЕРТИРОВАТЬ» — и страница разложит цвет по каналам Red, Green, Blue и соберет строку RGB Output для CSS. Разбор шестнадцатеричного кода идет прямо в браузере на стороне вашего устройства, палитра никуда не отправляется и нигде не сохраняется. Смотрите также: обратный конвертер RGB в HEX, тот же цвет, но с каналом прозрачности, интерактивная палитра HEX и RGB.

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

  1. Вставьте шестнадцатеричный код в поле HEX Color — по умолчанию там стоит пример #00FF7F.
  2. Решетку в начале можно не набирать: строка вида 00FF7F тоже разбирается корректно.
  3. Нажмите кнопку «КОНВЕРТИРОВАТЬ», чтобы посчитать значения каналов.
  4. Считайте числа из полей Red, Green и Blue — это десятичные значения от 0 до 255.
  5. Скопируйте готовую строку из поля RGB Output и вставьте ее в CSS-свойство color или background.

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

Понимает ли конвертер короткую запись из трех символов, например #FA0?

Надежнее развернуть короткую форму вручную: каждый символ дублируется, поэтому #FA0 равен #FFAA00, а #ABC равен #AABBCC. Впишите развернутый шестизначный код — тогда каналы посчитаются без сюрпризов. Короткая запись встречается в старом CSS, но в шестнадцатеричном виде она означает ровно тот же цвет.

Что делать, если после нажатия «КОНВЕРТИРОВАТЬ» в полях появились пустые значения?

Почти всегда причина в лишних символах: пробел в конце строки, кириллическая буква вместо латинской или скопированный вместе с кодом текст вроде «цвет:». Оставьте в поле только шесть знаков из набора 0-9 и A-F, при необходимости с решеткой впереди, и повторите преобразование.

Зачем переводить HEX в RGB, если браузер понимает оба формата?

Числа по каналам нужны там, где HEX не принимается: параметры функций рисования на Canvas, цвета в Python и OpenCV, значения в After Effects и Figma-плагинах, поля настроек светодиодных лент и умных ламп. Кроме того, только из RGB удобно вычислять яркость и подбирать контрастную пару к тексту.

Меняется ли цвет при переводе, теряется ли точность?

Нет. Шестнадцатеричная запись — это те же самые три байта, записанные другой системой счисления, поэтому преобразование обратимо один в один. #1A2B4C и rgb(26, 43, 76) — один и тот же пиксель на экране. Разница появится только при переходе в CMYK, где часть оттенков физически не печатается.

Куда уходит код цвета, который я вставляю в поле?

Никуда: расчет выполняет небольшой скрипт на самой странице, обращений к серверу при нажатии «КОНВЕРТИРОВАТЬ» не происходит. Закрытая палитра нового бренда останется в вашей вкладке. Страница работает и на мобильном браузере, но при копировании из мессенджера следите за автозаменой дефисов и лишними пробелами.

Как получить обратный перевод — из RGB обратно в HEX?

Для этого в каталоге есть отдельная страница с полями R, G и B, которая собирает шестнадцатеричный код. Пара инструментов удобна, когда часть макета описана в HEX, а часть значений пришла из скриншота или пипетки в виде трех чисел, и надо привести палитру к одному виду.

Примеры

Фирменный зеленый из брендбука
До: #00FF7F
После: Red 0, Green 255, Blue 127 → rgb(0, 255, 127)
Темно-синий фон шапки сайта
До: #1A2B4C
После: Red 26, Green 43, Blue 76 → rgb(26, 43, 76)