Конвертер 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 | Цвет | Название |
|---|---|---|---|
| #FF0000 | rgb(255, 0, 0) | Красный | |
| #00FF00 | rgb(0, 255, 0) | Зелёный | |
| #0000FF | rgb(0, 0, 255) | Синий | |
| #FF5733 | rgb(255, 87, 51) | Красно-оранжевый | |
| #3498DB | rgb(52, 152, 219) | Ярко-голубой | |
| #2ECC71 | rgb(46, 204, 113) | Изумрудный | |
| #9B59B6 | rgb(155, 89, 182) | Аметистовый | |
| #F39C12 | rgb(243, 156, 18) | Оранжевый | |
| #1ABC9C | rgb(26, 188, 156) | Бирюзовый | |
| #E74C3C | rgb(231, 76, 60) | Алый |
Сравнение цветовых моделей
| Модель | Формат записи | Где применяется | Диапазон значений |
|---|---|---|---|
| HEX | #RRGGBB | CSS, HTML, дизайн-макеты | 00–FF на канал |
| RGB | rgb(R, G, B) | CSS, JavaScript, Python | 0–255 на канал |
| RGBA | rgba(R, G, B, A) | CSS с прозрачностью | 0–255 + alpha 0–1 |
| HSL | hsl(H, S%, L%) | CSS, подбор палитр | 0–360 / 0–100% |
| HSV/HSB | hsv(H, S%, V%) | Photoshop, графика | 0–360 / 0–100% |
| CMYK | cmyk(C%, M%, Y%, K%) | Полиграфия, печать | 0–100% на канал |
Как перевести HEX в RGB — пошаговая инструкция
Введите HEX-код цвета
Вставьте или введите шестнадцатеричный код цвета в поле ввода. Подойдут форматы: #RRGGBB, #RGB, RRGGBB или CSS-имя цвета (red, blue, coral). Символ # можно не указывать — конвертер добавит его автоматически. Также можно воспользоваться пипеткой для выбора цвета с экрана или выбрать цвет из палитры популярных оттенков.
Получите результат мгновенно
Конвертация происходит автоматически в реальном времени — нажимать кнопку не нужно. Вы сразу увидите значения R, G, B, визуальный предпросмотр цвета, а также все доступные форматы: RGB, RGBA, HSL, HSLA, HSV, CMYK, CSS-переменная и Integer-представление.
Скопируйте нужный формат
Нажмите на любой формат цвета для копирования в буфер обмена. Вы можете скопировать 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 и RGB форматами?
Как вручную перевести HEX в RGB?
Как работает сокращённая запись HEX (#RGB)?
Как задать прозрачность цвета (Alpha-канал)?
Что такое контрастность WCAG и зачем её проверять?
В чём отличие RGB от CMYK и когда какой формат использовать?
Полезная информация
Конвертер HEX в RGB постоянно обновляется и совершенствуется.
Все расчёты выполняются локально в вашем браузере. Никакие данные не отправляются на сервер, что гарантирует полную конфиденциальность. Инструмент работает без интернета после первой загрузки страницы, на любых устройствах и в любых современных браузерах.
Если у вас есть предложения по улучшению конвертера цветов или вопросы о цветовых моделях, обращайтесь через форму обратной связи. Мы постоянно расширяем функционал и добавляем новые возможности.
Комментарии (1)
Загрузка комментариев...
🎨Похожие инструменты
Конвертер RGB в HEX
Мгновенный перевод цвета из RGB в шестнадцатеричный HEX-код
Конвертер HEX в HSL
Мгновенный перевод HEX-цвета в формат HSL/HSLA с превью и копированием
Конвертер HSL в HEX
Мгновенный перевод цвета из HSL в HEX-код с визуальным подбором
Конвертер RGB в HSL
Мгновенный перевод цвета из RGB в HSL с превью, слайдерами и копированием CSS-кода
Конвертер HSL в RGB
Мгновенный перевод цвета из HSL в RGB, HEX и CSS
Конвертер HEX в RGBA
Мгновенный перевод HEX-цвета в формат RGBA с настройкой прозрачности
Конвертер RGBA в HEX
Мгновенный перевод цвета из RGBA в HEX с поддержкой альфа-канала
Конвертер RGB в CMYK
Перевод цветов из RGB в CMYK для печати