Конвертер HEX в RGB
Мгновенный перевод HEX-кода цвета в RGB, HSL, CMYK и другие форматы
Инструмент справился с вашей задачей?
Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.
Ваш ответ здесь будет первым.
Этот инструмент ещё ждёт первого комментария
Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня
Что такое HEX и RGB
HEX (#RRGGBB) и RGB (r, g, b) — два способа записать один и тот же цвет. HEX компактнее и используется в CSS, RGB удобнее для расчётов и анимаций.
Каждая пара HEX (00–FF) — это значение от 0 до 255 в десятичной системе. Например, #FF8800 = rgb(255, 136, 0).
Когда нужен конвертер
Конвертер помогает быстро перевести цвет из дизайн-макета в формат CSS, JavaScript или Python. Особенно полезно при работе с rgba() для прозрачности.
Многие графические редакторы (Figma, Photoshop, Sketch) показывают цвета в HEX, а CSS-анимации и Canvas API работают с RGB(A).
Фронтенд-разработчик и брендбук
Андрей получил брендбук с цветами в HEX, но проект использовал rgba() для полупрозрачных оверлеев. Конвертер сэкономил 40 минут — все 24 цвета бренда были переведены за пару минут.
Маленький инструмент может убрать рутину из ежедневной работы.
Факты о HEX и RGB
HEX был стандартизирован в HTML 3.2 в 1997 году.
Всего в RGB можно закодировать 16 777 216 цветов (256³).
Человеческий глаз различает около 10 миллионов цветовых оттенков.
#FFFFFF — белый, #000000 — чёрный, #FF0000 — чистый красный.
CSS поддерживает короткий HEX вида #F80 (это #FF8800).
Существует ещё HSL и LCH — более «человеческие» способы задать цвет.
Примеры конвертации 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% на канал |
Подсказка
В CSS можно использовать #RGB вместо #RRGGBB, если каждая пара повторяется: #F00 = #FF0000.
Как перевести HEX в RGB — пошаговая инструкция
Введите HEX
Введите цвет с # или без, в коротком (#F80) или полном (#FF8800) формате. Регистр не важен.
Получите RGB
Конвертер мгновенно покажет значения red, green, blue от 0 до 255.
Скопируйте формат
Доступны варианты: rgb(255, 136, 0), rgba(255, 136, 0, 1), массив [255, 136, 0] для JS.
Практические кейсы использования конвертера
🎨 Перенос дизайна из 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–2 дня
Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.