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

Что такое конвертер RGB в HEX?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Ключевые возможности

Альтернативы конвертеру RGB в HEX

Примеры RGB в HEX

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Распространённые конвертации RGB → HEX

Справочная таблица 10 самых часто конвертируемых кортежей RGB и их HEX-эквивалентов — чистые primaries, чистые secondaries и два реальных брендовых цвета из палитры Tailwind.

Как пользоваться конвертером RGB в HEX

1. 1

   Введите или вставьте кортеж RGB в поле RGB

   Бросьте любое значение rgb() во ввод RGB — современный синтаксис через пробел rgb(255 87 51), legacy через запятую rgb(255, 87, 51), с альфой через слэш rgb(255 87 51 / 0.5) или через форму rgba(255, 87, 51, 0.5), или каналы в процентах rgb(100% 34% 20%). Инструмент нормализует все входные формы в один и тот же внутренний кортеж RGB перед вычислением HEX. Невалидные символы, целые вне диапазона или искажённый синтаксис дают тихую инлайн-ошибку; валидный RGB обновляет все остальные поля форматов в реальном времени.

2. 2

   Считайте HEX-код из поля HEX

   Поле HEX над полем RGB показывает соответствующее HEX-значение: #FF5733 для непрозрачного цвета, #FF573380 для цвета с альфой (8-значная форма). По умолчанию вывод использует заглавные HEX-цифры для согласованности с большинством брендбуков; нижний регистр (#ff5733) — одна механическая замена и одинаково валидный CSS. Конвертация бит-точная — переход туда-обратно RGB → HEX → RGB восстанавливает исходный кортеж дословно без дрейфа плавающей точки.

3. 3

   Нажмите Copy, чтобы получить HEX-строку

   У каждой карточки формата есть кнопка Copy справа. Один клик — и значение оказывается в буфере обмена; метка кнопки кратко переключается на «Copied!», чтобы вы знали. Скопированная строка включает ведущий #, поэтому она вставляется напрямую в правило CSS, поле цвета Figma, HEX-расширение SwiftUI или Android colors.xml. Для платформенно-специфического синтаксиса (SwiftUI Color(red:green:blue:), Compose Color(0xFF...), токены Tailwind v4 @theme) используйте раздел Copy as code под пипеткой.

4. 4

   Также видны: HSL, OKLCH, OKLAB, CMYK, именованный цвет

   Тот же RGB, который вы вставляете, зажигает и остальные поля форматов — HSL для legacy CSS, OKLCH и OKLAB для перцептивно-равномерных дизайн-систем, HSV и HWB для рабочих процессов с пипеткой у дизайнеров, CMYK для оценки печати и ближайший именованный CSS-цвет для документации и прозы. Вы никогда не заперты только в RGB → HEX; если вам также нужна тройка OKLCH для блока @theme Tailwind v4, она прямо там, в поле OKLCH, со своей кнопкой Copy.

5. 5

   Используйте пипетку для визуальной правки

   Под сеткой форматов — квадрат SL + слайдер оттенка + слайдер альфы для визуального исследования. Перетащите любой элемент управления, и каждое текстовое поле обновится в реальном времени, включая RGB и HEX, с которых вы начали. На браузерах на базе Chromium (Chrome, Edge, Brave) кнопка EyeDropper активирует нативный API EyeDropper для выбора любого пикселя на экране, включая за пределами окна браузера — полезно, когда вы хотите захватить кортеж RGB из UI другого приложения без предварительного скриншота, чтобы затем сразу считать HEX.

Типичные ошибки RGB / HEX

Пропустить padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Даёт невалидный 5-символьный HEX.

Использовать padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Валидный 6-символьный HEX; работает корректно для всех значений каналов 0-255.

Пропустить округление:
(0.5 * 255).toString(16) → '7f.8'
Даёт невалидный HEX с десятичной точкой.

Сначала округлить до целого:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Валидная 2-значная HEX-пара; соответствует нормализации CSS Color 4.

Выдать HEX с ведущей альфой Android в CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (формат Android)
CSS парсит как alpha=128, R=255, G=87, B=51 — совсем не тот цвет.

Используйте задокументированный формат целевой платформы:
для CSS: #FF573380 (альфа как последний байт)
для Android Compose: Color(0x80FF5733) (альфа как первый байт)
Не переставляйте между ними без переупорядочивания.

Усреднить гамма-кодированный RGB напрямую:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Выглядит как тёмный оливковый, а не яркий жёлтый.

Усреднить в линейном RGB:
декодировать → линейный RGB → усреднить → перекодировать → rgb(188, 188, 0)
Видимо яркий жёлтый, соответствует тому, что даёт физическое смешивание света.

Кто пользуется RGB в HEX

Frontend-разработчики, конвертирующие RGB из Canvas в CSS HEX

Функции отрисовки Canvas API выдают и принимают цвета как кортежи RGB (ctx.fillStyle = 'rgb(255 87 51)'), но окружающая CSS-таблица стилей хочет HEX-переменные (--color-fill: #FF5733). Вставка RGB один раз даёт соответствующий HEX, готовый бросить в CSS custom property. Полезно при извлечении брендовых цветов из отрисованного на canvas графика или визуализации данных для повторного использования в статичном UI.

Дизайнеры, конвертирующие RGB из Photoshop в HEX для Figma

Пипетка цвета Adobe (в Photoshop, Illustrator и InDesign) выдаёт RGB как три целых 0–255 в трёх полях каналов. Figma, напротив, отображает значения цвета как HEX по умолчанию в своих дизайн-панелях. Вставьте три целых из Photoshop как rgb(...) здесь, скопируйте HEX-вывод, бросьте в поле цвета Figma. Точно подбирает исходный цвет Photoshop без обхода через скриншот и пипетку.

Hardware-разработчики, конвертирующие RGB с LED-датчика в веб-HEX

Адресуемые LED-ленты, датчики цвета и аппаратные RGB-камеры все выдают значения каналов как целые 0–255. Когда показания должны управлять веб-дашбордом («лампа сейчас светится этим цветом»), соответствующий HEX-код — это то, что ожидает атрибут style="background: ..." в CSS. Вставьте RGB-тройку датчика, скопируйте HEX, подключите к разметке дашборда.

Геймдев, экспортирующий цвет Unity в веб-мокап

Конструкторы Color в Unity и FLinearColor в Unreal принимают нормализованные 0–1 float; умножение каждого на 255 даёт соответствующие целые RGB. Вставьте получившийся rgb(...) здесь, скопируйте HEX, бросьте в веб-мокап или маркетинговый сайт, который должен точно совпадать с акцентным цветом в игре. Одновременный вид OKLCH также поднимает воспринимаемую светлоту, поэтому палитру мокапа можно вручную подстроить под уровни яркости игры.

Инженеры доступности, аудитирующие брендовые цвета из Photoshop

Когда брендбук выдаёт цвета как целочисленные тройки RGB («брендовый оранжевый — RGB 255 / 87 / 51»), а инструмент аудита WCAG хочет HEX-коды, этот конвертер — мост. Вставьте тройку RGB, скопируйте HEX, прогоните через аудит. Бейджи контраста WCAG и APCA в этом инструменте также поднимают вердикт за один шаг, поэтому не нужно прыгать между тремя отдельными инструментами.

Email-разработчики, мигрирующие rgba() в 8-значный HEX

HTML современных email-клиентов поддерживает 8-значный HEX (#FF573380) для цветов с альфой, но legacy-шаблоны часто хранят то же значение как rgba(255, 87, 51, 0.5). Вставка rgba() сюда и считывание 8-значного HEX-вывода делает миграцию механической. Поле HEX показывает #FF573380 для случая 50% альфы; legacy-форма rgba() остаётся в поле RGB для fallback-контекстов, которым она по-прежнему нужна.

Разработчики, документирующие брендовые токены в обоих форматах

Документация дизайн-токенов часто показывает один и тот же цвет в двух формах RGB и HEX: HEX для CSS-блока кода, RGB для аннотации в прозе («брендовый оранжевый — #FF5733, эквивалент RGB 255 / 87 / 51»). Когда оба видны бок о бок, автор документации может скопировать каждый за один проход вместо запуска двух отдельных инструментов. URL-хэш, которым можно поделиться, также позволяет читателям кликом перейти к точному обсуждаемому цвету.

QA-инженеры, утверждающие пиксельные цвета против HEX-спецификаций

Тесты визуальной регрессии иногда захватывают пиксельные цвета как целые RGB (expect(pixel).toMatchRgb([255, 87, 51])), при этом базовая спецификация дана в HEX («кнопки должны рендериться как #FF5733»). Вставка захваченного RGB сюда даёт соответствующий HEX, который QA-инженер может напрямую сравнить со спецификацией. Бит-точность конвертации означает, что сравнение не будет флакать на различиях дрейфа плавающей точки.

Математика и сериализация RGB в HEX

toString(16).padStart(2, '0') — однострочная реализация

Вся конвертация RGB-в-HEX умещается в одно выражение на канал: value.toString(16).padStart(2, '0'). toString(16) в JavaScript конвертирует десятичное целое в его строковое представление по основанию 16. padStart(2, '0') — это легко забываемая деталь — без неё значение канала 5 сериализовалось бы как '5' вместо '05', давая невалидный 5-символьный HEX вроде #55733 при склеивании с другими каналами. Стандартная идиома — [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('') с последующим префиксом '#'.

Нормализация процентов: × 255 / 100, затем округление

CSS Color 4 допускает каналы в процентах в rgb(): rgb(100% 34% 20%) эквивалентен rgb(255 87 51). Правило нормализации: Math.round(percent × 255 / 100). 50% × 255 / 100 = 127.5 округляется до 128 (банковское округление от .5). То же правило применяется к альфе, когда она выражена как процент (rgb(255 87 51 / 50%) ↔ rgb(255 87 51 / 0.5)). Целая и процентная формы дают идентичный HEX-вывод после нормализации; инструмент поднимает каноническую целую форму в поле RGB после ре-нормализации.

Альфа в HEX: умножить на 255, округлить, закодировать как конечную пару

RGB с альфой (rgb(255 87 51 / 0.5)) выдаёт 8-значный HEX, умножая альфу на 255, округляя до ближайшего целого и кодируя как 4-ю HEX-пару, приписываемую после RGB. 0.5 × 255 = 127.5, округляется до 128 = 0x80, вывод #FF573380. Спецификация CSS Color 4 использует банковское округление (round-half-to-even) для этой конвертации, чему следует и инструмент. 8-значная форма возвращается к 6-значной, когда альфа ровно 1, чтобы избежать утечки конечных пар FF в таблицы стилей.

Ввод RGB: принимаются и CSS Color 4 через пробел, и legacy через запятую

Парсер принимает и современную форму CSS Color 4 rgb(255 87 51), и legacy-форму CSS 1 rgb(255, 87, 51). Современная форма выравнивается с другими функциональными нотациями CSS Color 4 (hsl(), lab(), oklch(), color()), которые все используют разделение пробелом и слэш для альфы. Legacy-форма через запятую по-прежнему поддерживается в каждом вечнозелёном браузере и остаётся распространённой в старых кодовых базах. Обе дают идентичный HEX-вывод; HEX-сериализатор инструмента не различает, какая входная форма пришла.

OKLCH как внутренний источник истины для стабильности перехода туда-обратно

Хотя эта спица целится конкретно в RGB → HEX, общий базовый конвертер хранит канонический цвет как тройку OKLCH внутри. Это значит, что переходы туда-обратно RGB → HEX → HSL → OKLAB → CMYK → RGB происходят без пошагового дрейфа плавающей точки; legacy-конвертеры, маршрутизирующие через HSL или sRGB как точку опоры, накапливают ошибку округления на каждой конвертации. Выбор OKLCH (вместо OKLAB) сохраняет оттенок как стабильную ось, поэтому перетаскивание слайдера оттенка не приводит к случайному кросс-фейду через серый. Согласно статье Бьорна Оттоссона об OKLAB 2020 года.

Кодирование канала: 8-битное беззнаковое, sRGB с гамма-кодированием

Каждый канал RGB — это 8-битное беззнаковое целое (0–255), закодированное в цветовом пространстве sRGB, определённом в IEC 61966-2-1 (1996). Значения *закодированы по гамме* — то есть отношение между значением канала и воспринимаемой яркостью нелинейное, оно следует кусочной передаточной функции sRGB (примерно показатель 2,4 с маленьким линейным сегментом возле нуля). Это важно, когда вы делаете математику цвета: усреднение двух значений RGB в их гамма-кодированной форме даёт неверную перцептивную середину. Для корректного смешивания цветов сначала декодируйте в линейный RGB (CSS Color 4 §11.2), затем усредните, затем перекодируйте. Внутренняя модель OKLCH в инструменте делает это прозрачным.

Лучшие практики для RGB / HEX

Предпочитайте верхний регистр HEX в брендбуках, нижний — в коде

Брендбуки, маркетинговые PDF и дизайнер-ориентированная документация обычно используют верхний регистр HEX (#FF5733) ради визуальной согласованности — all-caps читается как брендовый идентификатор. Код (CSS, JSON, JavaScript-исходники) обычно использует нижний регистр (#ff5733) по конвенции, потому что нижний регистр быстрее набирать и более распространён в автогенерируемом выводе линтеров. Обе формы — валидный CSS и парсятся идентично; выберите одну для каждого контекста и будьте последовательны. Инструмент по умолчанию выдаёт верхний регистр; одна механическая замена переключает на нижний.

Выдавайте 8-значный HEX, только когда альфа < 1

Когда альфа равна 1 (полностью непрозрачный), возвращайтесь к 6-значной форме. Конечная пара FF (#FF5733FF) — это легальный CSS, но визуально засоряет таблицы стилей и сбивает с толку некоторые legacy-парсеры, которые рендерят неверно. 8-значная форма должна появляться только когда альфа значимо прозрачна. Этот инструмент следует этому правилу автоматически — непрозрачные цвета выдают 6-значный HEX, цвета с альфой выдают 8-значный HEX, и порог точный (альфа = 1.0 выдаёт 6 цифр; альфа = 0.9999 выдаёт 8 цифр, чтобы сохранить данные).

Не усредняйте каналы RGB напрямую для математики цвета

Каналы RGB закодированы по гамме — усреднение двух значений RGB даёт неверную перцептивную середину. (255, 0, 0), усреднённое с (0, 255, 0), даёт (127, 127, 0), мутный тёмный оливковый, а не визуально-яркий жёлтый средний, который вы бы ожидали. Для корректного смешивания цветов сначала декодируйте в линейный RGB (CSS Color 4 §11.2), затем усредните, затем перекодируйте. Или, лучше, работайте в OKLAB или OKLCH, где перцептивное расстояние равномерно — именно это делают генераторы палитр дизайн-систем.

Предпочитайте HEX для CSS-переменных, RGB — для аппаратуры

Когда вы пишете CSS custom property или токен конфигурации Tailwind, предпочитайте HEX — он лаконичнее и чисто умещается в JSON или YAML. Когда потребляющий код делает поканальную арифметику (вызовы canvas, манипуляции с изображением, драйверы аппаратных LED, атрибуты цвета OpenGL), целочисленная форма RGB быстрее в потреблении. Два формата описывают один и тот же цвет; выбор полностью о том, кто читает и пишет, а не о корректности. Одновременный вид полей в этом инструменте делает оба одинаково дешёвыми.

Проверяйте диапазон альфы перед умножением на 255

При реализации собственного конвертера RGB в 8-значный HEX проверяйте, что float альфы попадает в [0, 1] перед шагом × 255. Альфа вне диапазона (отрицательная или > 1) тихо даёт невалидные HEX-пары, которые одни парсеры принимают, а другие отвергают — хрупкий режим отказа. Сначала клампируйте (Math.max(0, Math.min(1, alpha))), затем умножьте, затем округлите, затем закодируйте в HEX. Инструмент поднимает тихую инлайн-ошибку для альфы вне диапазона вместо выдачи сломанной HEX-строки.

Используйте URL-хэш, чтобы делиться живыми решениями по цвету

Каждое изменение цвета автоматически обновляет URL-хэш как #hex=ff5733. Скопируйте URL в тред Slack или GitHub-issue, и любой, кто откроет, попадёт на тот же цвет с тем же HEX. Это надёжнее, чем вставка кортежа RGB в чат — получатели иногда опечатываются на запятых или роняют канал при ручном вводе значения — и позволяет треду design-review ссылаться на точный цвет вместо «оранжевого, который мы обсуждали во вторник». Хэш никогда не передаётся на сервер.

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