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

Конвертируйте любой HEX-код цвета в RGB прямо в браузере — поддерживаются 3-значные, 6-значные и 8-значные HEX с альфой. Бесплатно, мгновенно, без регистрации, ваши цвета никогда не покидают страницу.

Без отслеживания Работает в браузере Бесплатно

Вся конвертация цветов происходит локально в браузере. Никакие данные не отправляются на сервер.

HEX

RGB

HSL

HSV

HWB

CMYK

OKLCH

OKLAB

Named

Цветовой охват: sRGB Display P3 Rec2020

Контраст против: —

AA AA-Lg AAA AAA-Lg · APCA Lc —

Симуляция дальтонизма (8 типов)

Протанопия (нечувствительность к красному) —

Дейтеранопия (нечувствительность к зелёному) —

Тританопия (нечувствительность к синему) —

Ахроматопсия (полная) —

Протаномалия (слабая чувствительность к красному) —

Дейтераномалия (слабая чувствительность к зелёному) —

Тританомалия (слабая чувствительность к синему) —

Ахроматомалия (частичная) —

Tints / Shades / Tones / Harmonies

Светлые оттенки

Тёмные оттенки

Тона

Гармонии

Скопировать как код

CSS Custom Property —

Tailwind v4 —

SwiftUI —

Android Compose —

Flutter Dart —

Справочник распространённых цветов

Проверено на соответствие CSS Color 4, поддержку HEX форм 3/4/6/8 цифр, корректность декодирования альфа-пары и бит-точность перехода туда-обратно между HEX и RGB в диапазоне 0–255. — Команда Go Tools Engineering · May 27, 2026

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

Конвертер HEX в RGB — это небольшая утилита, которая превращает HEX-код цвета (`#FF5733`) в три целочисленных значения каналов, которые он представляет (`rgb(255 87 51)`). HEX и RGB — это два формата, вокруг которых строились все веб-таблицы стилей, дизайн-инструменты и конвейеры обработки пикселей с конца 1990-х, и конвертация между ними — самая распространённая операция в инструментарии цвета. HEX — это лаконичный формат копи-паста, который Figma, Sketch, Photoshop и каждый PDF брендбука экспортируют по умолчанию: 6-символьная строка по основанию 16, которая комфортно умещается в CSS custom property и читается с одного взгляда, как только глаза учатся узнавать паттерны. RGB — это формат с адресацией по каналам, который ожидают аппаратные API, вызовы отрисовки canvas, манипуляции с буфером изображения, атрибуты цвета OpenGL и большинство графических SDK: три отдельных целых 0–255 (или нормализованных 0–1 float), которые напрямую отображаются на красный, зелёный и синий субпиксели LCD или люминофоры CRT. Конвертация между ними механическая: разделите HEX на три пары по 2 цифры и прочитайте каждую пару как число по основанию 16. Этот инструмент выполняет конвертацию вживую по мере ввода, без кнопки «Convert», и поднимает каждый другой распространённый формат цвета (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, плюс 148 именованных CSS-цветов) рядом с выводом RGB бесплатно.

**Сам формат RGB заслуживает более пристального взгляда.** Стандартный 24-битный sRGB кодирует каждый канал как 8-битное беззнаковое целое от 0 до 255 — 256 значений на канал, 16 777 216 цветов всего (256³). Эталонный стандарт — IEC 61966-2-1, спецификация sRGB 1996 года, привязанная к люминофорам CRT, которые доминировали на дисплеях того времени. CSS предоставляет RGB через функцию `rgb()` в трёх синтаксических разновидностях. Исходная форма CSS 1 использует запятые в качестве разделителей: `rgb(255, 87, 51)`. CSS Color 4 (W3C Candidate Recommendation с 2022 года) добавил современную форму через пробел: `rgb(255 87 51)`, с опциональным альфа-каналом после слэша: `rgb(255 87 51 / 0.5)`. Обе формы взаимозаменяемы и поставляются в каждом вечнозелёном браузере. RGB также принимает каналы в процентах: `rgb(100% 33% 20%)` эквивалентен `rgb(255 87 51)`, иногда предпочтительнее в рукописных таблицах стилей ради читаемости. Конкретно для альфы есть отдельная функция `rgba()` для legacy-поддержки — `rgba(255, 87, 51, 0.5)` — каноническая форма, которая работает везде вплоть до IE 9. CSS Color 4 также добавил синтаксис `color(srgb 1 0.341 0.2)` для явной адресации sRGB и параллельные функции `color(display-p3 ...)` и `color(rec2020 ...)` для значений с широким охватом, которые HEX закодировать не может.

Математика конвертации идёт чисто в обоих направлениях. **HEX в RGB**: распарсите 6-значный HEX `#RRGGBB` как три 2-значных числа по основанию 16 через `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. Для 3-значного сокращения `#RGB` раскройте каждую цифру удвоением (`#F73` → `#FF7733`) перед парсингом — это *не* дополнение слева. Для 8-значной альфы `#RRGGBBAA` распарсите конечную пару тем же способом и разделите на 255, чтобы получить 0–1 float альфы. Для 4-значного альфа-сокращения `#RGBA` сначала раскройте каждую цифру (`#F738` → `#FF773388`). **RGB в HEX** — обратная операция: для каждого канала вызовите `value.toString(16).padStart(2, '0')`, чтобы получить 2-значную пару HEX (`padStart` важен — без него значение канала 5 сериализовалось бы как `'5'` вместо `'05'`, давая невалидный HEX), затем склейте. Оба направления бит-точные: 16² = 256, точно совпадая с байтовым диапазоном 0–255, который занимает каждый канал, поэтому переход туда-обратно HEX → RGB → HEX даёт исходный ввод дословно без дрейфа плавающей точки.

**Почему HEX, а не RGB?** HEX короче, нативен для дизайн-инструментов и это формат, который ваш глаз учится узнавать со временем — большинство frontend-разработчиков могут опознать `#3b82f6` как Tailwind blue-500 с одного взгляда. RGB — это явная адресация по каналам, проще вычислять против неё в JavaScript и единственный из двух, который чисто принимает альфу и проценты. Два формата сосуществуют, потому что решают разные задачи. Веб-таблицы стилей и брендбуки склоняются к HEX, потому что доминирует стоимость копи-паста. Вызовы отрисовки canvas, обработка изображений, API аппаратных LED и любой код, делающий поканальную арифметику, склоняются к RGB, потому что индексирование в кортеж быстрее, чем нарезка строки. Переключение между ними случается десятки раз в типичном веб-проекте — вставьте HEX из Figma, конвертируйте в целые RGB для вызова `ctx.fillStyle = ...`, конвертируйте обратно в HEX для определения CSS-переменной.

Рабочий процесс HEX → RGB в этом инструменте — это одно направление семейства из 5 спиц, которые все используют один и тот же базовый унифицированный конвертер цветов. Специализированный унифицированный конвертер цветов — это хаб: он показывает все 9 форматов одновременно редактируемыми и это правильный инструмент, когда вашему рабочему процессу нужно больше, чем HEX и RGB. Однонаправленные спицы целятся в конкретные поисковые интенты Google: обратный конвертер RGB в HEX для обратного направления, конвертер HEX в HSL для legacy designer-cognitive пространства, конвертер HEX в OKLCH для современных перцептивно-равномерных дизайн-систем (Tailwind v4 и shadcn оба сейчас по умолчанию используют OKLCH) и конвертер HEX в CMYK для приближений подготовки к печати. Все пять спиц и хаб используют один и тот же парсинговый движок и ту же математику конвертации, поэтому результаты гарантированно идентичны во всём семействе. Каждая конвертация выполняется локально в браузере — ваши HEX-коды никогда не загружаются, никогда не логируются и ноль сетевых запросов срабатывает по мере ввода. Проверьте в DevTools.

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

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

Все пять форм HEX парсятся одинаково

3-значный `#F73`, 4-значный с альфой `#F738`, 6-значный `#FF5733`, 8-значный с альфой `#FF5733CC`, плюс вариант без `#` для каждого (`F73`, `FF5733` и т. д.). Парсер нормализует их все в один и тот же внутренний кортеж RGB перед отображением, поэтому вы можете вставить ту форму, которую использует ваш источник, без ручного раскрытия сокращения сначала. Регистр тоже нормализуется — `#ff5733` и `#FF5733` дают идентичный вывод.

Вывод RGB в современном синтаксисе через пробел

Поле RGB поднимает значение в современной форме CSS Color 4: `rgb(255 87 51)` для непрозрачных цветов, `rgb(255 87 51 / 0.5)` для цветов с альфой. Обе формы работают в каждом вечнозелёном браузере (Chrome 65+, Safari 13+, Firefox 52+). Legacy-форма через запятую `rgb(255, 87, 51)` — это одна механическая замена, если её требует ваша цель; современный синтаксис предпочтительнее в новом коде, потому что выравнивается с другими функциональными синтаксисами CSS Color 4.

Бит-точно, без дрейфа плавающей точки

HEX → RGB — это математика «целое в целое»: `parseInt(hex, 16)` возвращает точное значение 0–255 без какого-либо участия плавающей точки. Обратное направление (`.toString(16).padStart(2, '0')`) тоже точное. Переход туда-обратно HEX → RGB → HEX → RGB → HEX даёт исходный ввод дословно, бесконечно. Внутренний источник истины в OKLCH означает, что даже длинная цепочка HEX → RGB → HSL → OKLAB → HEX остаётся бит-стабильной, чего legacy-конвертеры, маршрутизирующие через HSL, не гарантируют.

Альфа-канал декодируется чисто

8-значный и 4-значный HEX с альфой (`#RRGGBBAA` и `#RGBA`) парсятся корректно. Конечная пара отображается на 0–1 float альфы: `00` → 0, `80` → 0.502, `FF` → 1. Вывод по умолчанию использует синтаксис со слэшем из CSS Color 4 (`rgb(255 87 51 / 0.5)`); legacy-форма `rgba(255, 87, 51, 0.5)` — одна замена. Полезно для миграции дизайн-токенов, где значения альфы могли быть похоронены в 8-значных HEX-кодах.

Восемь других форматов видны одновременно

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

Встроенный контраст WCAG + APCA

Пропустите HEX через инструмент, и ряд контраста сразу же оценит его против белого и чёрного, используя WCAG 2.1 (регуляторный пол: 4.5:1 для основного текста, 7:1 для AAA) и APCA Lc (предложенный преемник WCAG 3: цель `|Lc| ≥ 75` для основного текста). Полезно, когда вы только что конвертировали брендовый HEX в RGB и хотите проверить, что он действительно читаем как цвет основного текста, прежде чем отгружать.

Copy as CSS / Tailwind v4 / SwiftUI / Compose / Flutter

Под пипеткой раздел Copy as code превращает текущий цвет в готовые к вставке сниппеты для пяти платформ: CSS custom property (`--color-brand: rgb(255 87 51)`), токен Tailwind v4 `@theme`, литерал SwiftUI `Color(red:green:blue:)`, константа Jetpack Compose `Color(0xFFFF5733)`, Flutter `Color(0xFFFF5733)`. Точный синтаксис, который ожидает каждая платформа, готовый бросить в asset-каталог iOS, файл темы Android или Flutter `ThemeData`.

100% в браузере — без загрузки, без отслеживания

Весь парсинг HEX, конвертация RGB, оценка контраста и генерация палитр работают локально в браузере. Ваши HEX-коды никогда не передаются, никогда не логируются ни на одном сервере, никогда не анализируются. Ноль сетевых запросов по мере ввода — проверьте в DevTools. Безопасно для необъявленных брендовых палитр, внутренних дизайн-токенов, черновых мокапов под NDA и любой другой конфиденциальной работы с цветом.

URL-хэш, которым можно поделиться, для точного цвета

Текущий цвет автоматически кодируется в URL-хэш как `#hex=ff5733` при каждом изменении. Скопируйте URL, вставьте в тред Slack или GitHub-issue, и любой, кто откроет ссылку, попадёт на тот же HEX с тем же результатом RGB. Хэш живёт только в адресной строке и никогда не передаётся на сервер (браузеры не включают URL-фрагменты в HTTP-запросы), поэтому даже общая ссылка не утекает цвет никакой третьей стороне.

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

RapidTables Hex to RGB

браузерный инструмент

Дефолтный результат Google по «hex to rgb» — однонаправленная форма с HEX на входе и RGB на выходе, других форматов не видно. Полезно для одноразовых проверок при переходе из поиска. Отсутствуют OKLCH, проверка контраста, определение цветового охвата, обработка альфы и одновременный многоформатный вид. Этот инструмент выигрывает по каждой оси, кроме голого случая одной конвертации.

ColorHexa

браузерный инструмент

Долгоживущие SEO-страницы по каждому цвету с глубокими метаданными: конвертации, палитры, гармонии, градиенты для любого запрашиваемого HEX. UI устарел (начало 2010-х), нет поддержки OKLCH, нет контраста APCA, нет обработки широкого охвата. Сильны для SEO-обнаружения конкретного HEX через Google; слабее для активных рабочих процессов конвертации, где ввод в UX с едиными полями быстрее.

W3Schools Hex Calculator

браузерный инструмент

Дружественный к новичкам переключатель HEX/RGB/HSL на учебно-ориентированной странице, повсеместный в результатах поиска. Нет OKLCH, нет обработки альфы за пределами rgba, нет продвинутых возможностей. Полезен как справочник рядом с поясняющим контентом W3Schools. Этот инструмент выигрывает по каждой другой оси: больше форматов, перцептивная математика, цветовой охват + контраст + возможности CVD, современный экспорт кода для Tailwind v4 / SwiftUI / Compose / Flutter.

Пипетка цвета в DevTools браузера

встроенная возможность браузера

DevTools Chrome, Firefox и Safari все поставляют пипетку, которая конвертирует HEX в RGB инлайн, когда вы кликаете на образец цвета в CSS-панели. Бесплатно, без установки, всегда доступно. Отсутствуют OKLCH, отсутствуют ссылки, которыми можно поделиться, отсутствует экспорт кода для не-веб-платформ (SwiftUI, Compose). Берите DevTools, когда уже отлаживаете CSS; берите этот инструмент, когда нужен кросс-платформенный вывод.

macOS Digital Color Meter

нативное приложение macOS

Идёт в комплекте с каждым Mac со времён OS X — наведите на любой пиксель и считайте значения RGB / HEX / линейные. Отлично подходит для сэмплирования цветов пикселей из любого приложения на экране. Не конвертирует вставленные HEX-значения; это screen-sampler, а не конвертер. Используйте кнопку EyeDropper в пипетке этого инструмента (только браузеры Chromium) для той же возможности сэмплирования экрана внутри браузера.

ConvertingColors

браузерный инструмент

SEO-страницы по каждому цвету, покрывающие множество пространств (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Отсутствует современная поддержка OKLCH и UX редактирования с едиными полями. Автогенерированные страницы выглядят немного как content-farm, но данные конвертации корректны. Хорошо для копания в метаданных отдельных цветов через Google; этот инструмент быстрее для активных рабочих процессов.

Примеры HEX в RGB

Вставить HEX со скриншота → кортеж RGB

#FF5733

Вывод RGB: `rgb(255 87 51)`. Классический сценарий — дизайнер бросил брендовый цвет в Figma, вы сделали скриншот, пипетка дала вам HEX, и теперь нужны целочисленные каналы для вызова отрисовки canvas, аппаратной LED-ленты или пиксельной математики против буфера изображения. Показанный синтаксис CSS Color 4 через пробел — это современная форма; legacy-форма через запятую `rgb(255, 87, 51)` идентична по смыслу и поддерживается во всех браузерах со времён IE 3.

Конвертировать брендовый HEX Tailwind в RGB для Photoshop

#3b82f6

Вывод RGB: `rgb(59 130 246)`. Пипетка цвета Adobe (в Photoshop, Illustrator и InDesign) принимает целые RGB в диапазоне 0–255 как нативный ввод — вставьте 59 / 130 / 246 в три поля каналов, и вы точно подобрали `blue-500` от Tailwind. Полезно, когда дизайнеру нужно сделать макет веб-цвета в print-ориентированном приложении вёрстки, или когда вы собираете брендовые цвета в библиотеку образцов для правок изображений.

8-значный HEX с альфой → rgba

#FF573380

Вывод RGB: `rgb(255 87 51 / 0.5)`. Последняя пара (`80`) декодируется как `128/255 ≈ 0.502` и поднимается как альфа-канал через синтаксис со слэшем из CSS Color 4. Эквивалентная legacy-форма — `rgba(255, 87, 51, 0.5)`, она по-прежнему поддерживается везде и её ожидают старые препроцессоры. 8-значный HEX поставился нативно во всех вечнозелёных браузерах в 2018 году; до этого альфу приходилось выражать через функцию `rgba()`.

Расширение короткого 3-значного HEX

#F73

Вывод RGB: `rgb(255 119 51)`. CSS-спецификация определяет 3-значный HEX как сокращение, где каждая цифра удваивается до 6-значного эквивалента: `#F73` раскрывается в `#FF7733`, поэтому R = `FF` = 255, G = `77` = 119, B = `33` = 51. Это *не* дополнение слева — `#F73` **не равен** `#000F73`. Многие новички ошибаются на этом; поведение раскрытия в инструменте делает правило видимым с одного взгляда.

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

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

Чёрный

#000000 → rgb(0 0 0)

Чистый чёрный. Все три канала на нуле — отсутствие излучаемого света. Тройка RGB (0, 0, 0).

#000000 → rgb(0 0 0)

Чистый чёрный на экране редко правильный дизайн-выбор — попробуйте `#111` или OKLCH светлоту 0.1–0.15 для более мягкого основного текста.