🎨

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

Мгновенный перевод HEX-кода цвета в RGB, HSL, CMYK и другие форматы

Загрузка инструмента...

Конвертер HEX в RGB онлайн — мгновенная конвертация цветовых кодов

Бесплатный онлайн конвертер HEX в RGB позволяет мгновенно перевести шестнадцатеричный код цвета в формат RGB и обратно. Наш инструмент незаменим для веб-дизайнеров, верстальщиков, разработчиков интерфейсов и всех, кто работает с цифровыми цветами. Достаточно ввести HEX-код (например, #FF5733), и калькулятор цветов тут же покажет соответствующие значения R (Red), G (Green) и B (Blue) — трёх каналов, из которых складывается любой экранный цвет.

Формат HEX (hexadecimal, шестнадцатеричный) — это способ записи цвета с помощью шести символов после знака решётки: каждая пара обозначает интенсивность красного, зелёного и синего каналов в диапазоне от 00 до FF (от 0 до 255 в десятичной системе). Формат RGB (Red, Green, Blue) использует десятичные значения от 0 до 255 для каждого канала. Оба формата описывают один и тот же цвет, но применяются в разных контекстах: HEX чаще встречается в CSS и HTML-коде, а RGB — в графических редакторах, языках программирования и функциях CSS вроде rgb() и rgba().

Конвертер цветов HEX в RGB на ТулФокс не просто переводит один формат в другой. Он автоматически рассчитывает цвет во всех популярных цветовых моделях: HSL (оттенок, насыщенность, светлота), HSV/HSB (оттенок, насыщенность, яркость), CMYK (голубой, пурпурный, жёлтый, чёрный) — модель, используемая в полиграфии. Дополнительно инструмент определяет яркость цвета (luminance), показывает контрастность с белым и чёрным текстом по стандарту WCAG 2.1 для проверки доступности, генерирует готовый CSS-код для применения в проектах.

Калькулятор HEX-цветов поддерживает все распространённые форматы записи шестнадцатеричного кода: полный шестисимвольный (#RRGGBB), сокращённый трёхсимвольный (#RGB), восьмисимвольный с альфа-каналом (#RRGGBBAA), а также ввод без символа решётки. Кроме того, поддерживается ввод CSS-имён цветов (red, blue, coral, tomato и более 140 других). Системная пипетка позволяет выбрать любой цвет прямо с экрана вашего устройства, а палитра популярных цветов ускоряет работу с часто используемыми оттенками.

Перевод HEX в RGB необходим при работе с API, которые принимают числовые значения каналов, при настройке цветовых схем в графических приложениях, при миграции дизайна из Figma, Photoshop или Sketch в код, при написании скриптов обработки изображений на Python, JavaScript или других языках. Конвертация цветов онлайн экономит время и исключает ошибки ручного перевода между системами счисления.

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

Инструмент перевода HEX в RGB пригодится широкому кругу специалистов и любителей. Веб-дизайнеры используют его для быстрого перевода цветов из макетов Figma в CSS-код. Frontend-разработчики конвертируют значения цветов между разными форматами при вёрстке. UX/UI-дизайнеры проверяют контрастность для обеспечения доступности интерфейса. Графические дизайнеры переводят экранные цвета в полиграфическую модель CMYK. Программисты получают числовые значения каналов для обработки изображений. Блогеры и SMM-специалисты подбирают точные цвета для оформления публикаций. Студенты изучают цветовые модели и принципы цифрового представления цвета.

Шестнадцатеричная запись цвета (#RRGGBB) состоит из трёх пар символов, каждая из которых обозначает один канал. Пара «RR» задаёт красный канал, «GG» — зелёный, «BB» — синий. Каждая пара представляет число от 00 до FF в шестнадцатеричной системе, что эквивалентно диапазону 0–255 в десятичной. Например, #FF5733 означает: R = FF (255), G = 57 (87), B = 33 (51). Таким образом, rgb(255, 87, 51) — тот же самый цвет, записанный в формате RGB.

Сокращённая запись #RGB разворачивается путём дублирования каждого символа: #F53 превращается в #FF5533. Восьмисимвольный формат #RRGGBBAA добавляет четвёртую пару для прозрачности (альфа-канал), где 00 — полностью прозрачный, FF — полностью непрозрачный.

  • Мгновенная конвертация HEX-кода в значения RGB (R, G, B отдельно)
  • Автоматическое определение цвета во всех форматах: RGB, RGBA, HEX, HSL, HSLA, HSV/HSB, CMYK
  • Поддержка сокращённой записи HEX (#RGB #RRGGBB)
  • Поддержка HEX с альфа-каналом (#RRGGBBAA) и настраиваемая прозрачность
  • Ввод CSS-имён цветов (red, blue, coral, tomato и другие)
  • Системная пипетка для выбора цвета прямо с экрана
  • Визуальный предпросмотр выбранного цвета с большой областью превью
  • Палитра из 20 популярных цветов для быстрого выбора
  • Проверка контрастности текста по стандарту WCAG 2.1 (доступность)
  • Генерация готового CSS-кода для применения в проекте
  • Копирование результата в любом формате одним кликом
  • Расчёт яркости (luminance) и определение типа цвета (светлый/тёмный)
  • Целочисленное представление цвета (Integer) для программирования

Примеры конвертации HEX в RGB

HEX-кодRGBЦветНазвание
#FF0000rgb(255, 0, 0)Красный
#00FF00rgb(0, 255, 0)Зелёный
#0000FFrgb(0, 0, 255)Синий
#FF5733rgb(255, 87, 51)Красно-оранжевый
#3498DBrgb(52, 152, 219)Ярко-голубой
#2ECC71rgb(46, 204, 113)Изумрудный
#9B59B6rgb(155, 89, 182)Аметистовый
#F39C12rgb(243, 156, 18)Оранжевый
#1ABC9Crgb(26, 188, 156)Бирюзовый
#E74C3Crgb(231, 76, 60)Алый

Сравнение цветовых моделей

МодельФормат записиГде применяетсяДиапазон значений
HEX#RRGGBBCSS, HTML, дизайн-макеты00–FF на канал
RGBrgb(R, G, B)CSS, JavaScript, Python0–255 на канал
RGBArgba(R, G, B, A)CSS с прозрачностью0–255 + alpha 0–1
HSLhsl(H, S%, L%)CSS, подбор палитр0–360 / 0–100%
HSV/HSBhsv(H, S%, V%)Photoshop, графика0–360 / 0–100%
CMYKcmyk(C%, M%, Y%, K%)Полиграфия, печать0–100% на канал

Как перевести HEX в RGB — пошаговая инструкция

1

Введите HEX-код цвета

Вставьте или введите шестнадцатеричный код цвета в поле ввода. Подойдут форматы: #RRGGBB, #RGB, RRGGBB или CSS-имя цвета (red, blue, coral). Символ # можно не указывать — конвертер добавит его автоматически. Также можно воспользоваться пипеткой для выбора цвета с экрана или выбрать цвет из палитры популярных оттенков.

2

Получите результат мгновенно

Конвертация происходит автоматически в реальном времени — нажимать кнопку не нужно. Вы сразу увидите значения R, G, B, визуальный предпросмотр цвета, а также все доступные форматы: RGB, RGBA, HSL, HSLA, HSV, CMYK, CSS-переменная и Integer-представление.

3

Скопируйте нужный формат

Нажмите на любой формат цвета для копирования в буфер обмена. Вы можете скопировать RGB, RGBA, HEX, HSL, CMYK или готовый CSS-код. При необходимости включите настройку прозрачности (Alpha-канал) для получения значений с альфой.

Практические кейсы использования конвертера

🎨 Перенос дизайна из Figma в CSS-код

Дизайнер создал макет в Figma с цветом кнопки #4F46E5. Вставляем этот код в конвертер и получаем rgb(79, 70, 229) для функции rgba(), hsl(243, 75%, 59%) для CSS-переменной, готовый CSS-фрагмент для стилизации. Это ускоряет вёрстку и исключает ошибки при ручном переводе.

♿ Проверка доступности интерфейса

Необходимо проверить, читается ли белый текст на фоне #3B82F6. Конвертер показывает контрастность по WCAG 2.1 и сразу видно, проходит ли комбинация минимальный порог 4.5:1 для обычного текста. Если контрастность недостаточна, можно подобрать более тёмный оттенок.

🖨️ Подготовка макета для печати

Экранный цвет #E11D48 нужно перевести в CMYK для типографии. Конвертер мгновенно покажет значения CMYK, которые можно передать в печатный макет. Это помогает избежать расхождений между цветами на экране и в печатной продукции.

💻 Программирование и обработка изображений

При работе с библиотеками обработки изображений (PIL/Pillow в Python, Canvas API в JavaScript) часто требуются числовые значения каналов RGB. Конвертер позволяет быстро получить отдельные значения R, G, B и целочисленное представление (Integer) для использования в коде.

Частые вопросы о конвертации HEX в RGB

Что такое HEX-код цвета и как он устроен?
HEX-код (hexadecimal) — это шестнадцатеричное представление цвета, используемое в веб-разработке и дизайне. Он записывается в формате #RRGGBB, где RR, GG и BB — пары шестнадцатеричных цифр (от 00 до FF), обозначающие интенсивность красного, зелёного и синего каналов соответственно. Например, #FF0000 означает максимум красного, ноль зелёного и ноль синего, что даёт чистый красный цвет. Существует также сокращённая запись #RGB (например, #F00) и расширенная #RRGGBBAA для цветов с прозрачностью.
В чём разница между HEX и RGB форматами?
HEX и RGB описывают один и тот же цвет, но используют разные системы записи. HEX записывает значения каналов в шестнадцатеричной системе счисления (0–9, A–F), а RGB — в десятичной (0–255). Формат HEX компактнее и чаще используется в CSS-свойствах (color: #FF5733), тогда как RGB удобнее для программной работы с цветами (функции rgb() и rgba() в CSS, массивы в JavaScript/Python). RGBA добавляет к RGB четвёртый параметр прозрачности (alpha) от 0 до 1.
Как вручную перевести HEX в RGB?
Для ручной конвертации разделите HEX-код на три пары: например, #3498DB 34, 98, DB. Каждую пару переведите из шестнадцатеричной системы в десятичную: 34₁₆ = 3 16 + 4 = 52, 98₁₆ = 9 16 + 8 = 152, DB₁₆ = 13 16 + 11 = 219. Итого: rgb(52, 152, 219). Буквы A–F соответствуют числам 10–15. Конвертер выполняет этот перевод мгновенно и без ошибок.
Как работает сокращённая запись HEX (#RGB)?
Сокращённый HEX-формат #RGB использует один символ на каждый канал вместо двух. Браузер автоматически дублирует каждый символ: #F5A превращается в #FF55AA. Это работает только когда обе цифры каждой пары одинаковы. Например, #fff = #FFFFFF (белый), #000 = #000000 (чёрный), #f00 = #FF0000 (красный). Наш конвертер автоматически распознаёт и корректно обрабатывает оба формата.
Как задать прозрачность цвета (Alpha-канал)?
Прозрачность можно задать двумя способами: через HEX-формат #RRGGBBAA (восемь символов, где AA — альфа от 00 до FF) или включив переключатель «Прозрачность (Alpha)» в конвертере и настроив ползунок от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Результат будет отображаться в форматах RGBA и HSLA, которые поддерживают альфа-канал.
Что такое контрастность WCAG и зачем её проверять?
WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента. Он требует минимальное соотношение контрастности 4.5:1 для обычного текста и 3:1 для крупного текста, чтобы люди с нарушениями зрения могли комфортно читать содержимое. Конвертер автоматически показывает контрастность выбранного цвета с белым и чёрным текстом, помогая выбрать доступные цветовые комбинации.
В чём отличие RGB от CMYK и когда какой формат использовать?
RGB — аддитивная модель для экранов: смешение красного, зелёного и синего света даёт белый цвет. CMYK — субтрактивная модель для печати: смешение голубого, пурпурного, жёлтого и чёрного пигментов поглощает свет. Для экранов (сайты, приложения, презентации) используйте RGB/HEX, для печати (визитки, буклеты, баннеры) — CMYK. Конвертер показывает оба формата одновременно.

Полезная информация

Конвертер HEX в RGB постоянно обновляется и совершенствуется.

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

Если у вас есть предложения по улучшению конвертера цветов или вопросы о цветовых моделях, обращайтесь через форму обратной связи. Мы постоянно расширяем функционал и добавляем новые возможности.

Комментарии (1)

Был ли полезен этот инструмент?
💬

Загрузка комментариев...

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