🎨

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

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

HEX-код цвета

Поддерживаются форматы: #RGB, #RRGGBB, #RRGGBBAA, RGB, RRGGBB, а также CSS-имена цветов (red, blue, coral…)

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

Что такое 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-код (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)

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

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

Перевод цветов из RGB в CMYK для печати

Перейти к инструменту →