Конвертер RGB в HEX
Мгновенный перевод цвета из RGB в шестнадцатеричный HEX-код
Конвертер RGB в HEX онлайн — перевод цвета из RGB в шестнадцатеричный код
Бесплатный онлайн-конвертер RGB в HEX позволяет быстро и точно перевести цвет из формата RGB (Red, Green, Blue) в шестнадцатеричный HEX-код. Инструмент незаменим для веб-дизайнеров, разработчиков, верстальщиков и всех, кто работает с цветовыми значениями в CSS, HTML, графических редакторах и цифровом дизайне. Конвертация RGB в HEX выполняется мгновенно в реальном времени — вы видите результат при каждом изменении любого из трёх каналов: красного (R), зелёного (G) или синего (B).
Формат RGB задаёт цвет тремя числами от 0 до 255, каждое из которых определяет интенсивность одного из базовых каналов — красного, зелёного и синего. Формат HEX (hexadecimal, шестнадцатеричный) записывает тот же цвет в виде шести символов после решётки, например #3B82F6 . Оба формата описывают один и тот же цвет, но HEX-код чаще применяется в веб-разработке и CSS-стилях благодаря компактности записи. Наш конвертер автоматически преобразует числовые значения RGB в эквивалентный HEX-код, что экономит время и исключает ошибки ручного перевода.
Переводчик цвета из RGB в HEX пригодится при вёрстке сайтов, создании макетов в Figma, Photoshop, Sketch, Illustrator или Canva, при настройке темы WordPress, написании CSS-кода или подготовке фирменного стиля. Если дизайнер передал вам RGB-значения, а вам нужен HEX для вставки в код — просто введите числа или двигайте ползунки, и результат появится мгновенно. Калькулятор цвета также показывает готовый CSS-код для свойств color и background-color, что позволяет сразу копировать его в таблицу стилей.
Помимо базовой конвертации, инструмент предоставляет дополнительную информацию о выбранном цвете: ближайшее именованное CSS-имя из 140 стандартных цветов (named colors), расчётную яркость, рекомендацию контрастного текста (белый или чёрный) для обеспечения читаемости по стандартам WCAG. Есть палитра из 16 популярных цветов-пресетов для быстрого старта, генерация случайного цвета, встроенная пипетка (EyeDropper API в поддерживаемых браузерах) и стандартная палитра операционной системы. Всё это делает конвертер RGB в HEX универсальным помощником для работы с цветом в веб-среде.
Инструмент будет полезен широкому кругу пользователей. Веб-разработчики и фронтенд-программисты используют его для быстрого получения HEX-кодов при написании CSS. Дизайнеры и верстальщики применяют конвертер при переносе макетов из графических редакторов в код. Маркетологи и контент-менеджеры подбирают точные цвета для баннеров, email-рассылок и социальных сетей. Студенты и преподаватели используют инструмент для изучения цветовых моделей и принципов кодирования цвета. Владельцы сайтов на WordPress, Tilda, Wix и других конструкторах подбирают оттенки при настройке оформления.
Формула перевода RGB в HEX проста: каждое десятичное число (0–255) переводится в двузначное шестнадцатеричное число (00–FF). Три таких пары объединяются после символа решётки. Например, RGB(255, 165, 0) — это #FFA500 (оранжевый). Красный канал 255 = FF, зелёный 165 = A5, синий 0 = 00. Наш калькулятор выполняет эту конвертацию мгновенно и без ошибок, избавляя от необходимости считать вручную или искать таблицы соответствия.
- Мгновенный перевод RGB-значений в шестнадцатеричный HEX-код в реальном времени
- Удобные ползунки и числовые поля для точной настройки каждого канала (R, G, B)
- Большое цветовое превью с отображением HEX-кода и RGB-записи прямо на фоне
- Копирование в один клик: HEX, RGB, CSS color, CSS background-color
- Определение ближайшего именованного CSS-цвета из 140 стандартных значений
- Расчёт яркости и рекомендация контрастного цвета текста (WCAG)
- Пипетка для захвата цвета прямо с экрана (EyeDropper API)
- Палитра из 16 популярных пресетов, генерация случайного цвета
- Работает полностью в браузере — ничего не отправляется на сервер
Перенос цветов из Figma в CSS
Дизайнер Анна передала разработчику цвета бренда в формате RGB, а CSS требует HEX.
Основной цвет: RGB(79, 70, 229) → #4F46E5 (индиго)
Акцентный: RGB(16, 185, 129) → #10B981 (изумрудный)
Фоновый: RGB(249, 250, 251) → #F9FAFB (почти белый)
Все HEX-коды вставлены в CSS-переменные дизайн-системы
Цвета перенесены без потери точности за 1 минуту — ни одного расхождения между макетом и вёрсткой
Факты о RGB и HEX
HEX-цвет — это RGB в шестнадцатеричной записи: #FF0000 = R:255 G:0 B:0 = чистый красный.
CSS поддерживает сокращённый HEX: #FFF = #FFFFFF, #F00 = #FF0000. Экономит 3 символа.
RGBA добавляет альфа-канал (прозрачность): rgba(0,0,0,0.5) = полупрозрачный чёрный. В HEX: #00000080.
Человеческий глаз различает около 10 миллионов цветов, но HEX кодирует 16,7 миллионов (256³).
Веб-безопасная палитра (216 цветов) — наследие эпохи 256-цветных мониторов. Сегодня неактуальна.
Самый используемый цвет в вебе — #000000 (чёрный), второй — #FFFFFF (белый), третий — #333333 (тёмно-серый для текста).
Таблица популярных цветов: RGB и HEX
| Цвет | Название | RGB | HEX |
|---|---|---|---|
| Красный | 255, 0, 0 | #FF0000 | |
| Лайм | 0, 255, 0 | #00FF00 | |
| Синий | 0, 0, 255 | #0000FF | |
| Жёлтый | 255, 255, 0 | #FFFF00 | |
| Маджента | 255, 0, 255 | #FF00FF | |
| Циан | 0, 255, 255 | #00FFFF | |
| Оранжевый | 255, 165, 0 | #FFA500 | |
| Пурпурный | 128, 0, 128 | #800080 | |
| Бирюзовый (Teal) | 0, 128, 128 | #008080 | |
| Золотой | 255, 215, 0 | #FFD700 | |
| Серый | 128, 128, 128 | #808080 | |
| Белый | 255, 255, 255 | #FFFFFF |
HEX не поддерживает прозрачность
Стандартный HEX (#RRGGBB) не включает альфа-канал. Для прозрачности используйте 8-символьный HEX (#RRGGBBAA) или формат rgba() в CSS.
Как перевести цвет из RGB в HEX — пошаговая инструкция
Введите значения каналов R, G и B
Используйте ползунки или числовые поля, чтобы задать интенсивность каждого цветового канала от 0 до 255. Красный (Red), зелёный (Green) и синий (Blue) вместе определяют итоговый цвет. Также вы можете нажать на палитру, пипетку или кнопку случайного цвета.
Посмотрите результат в реальном времени
HEX-код обновляется мгновенно при каждом изменении. Большой цветовой блок показывает выбранный оттенок, а справа отображаются готовые значения: HEX-код, RGB-запись и CSS-свойства для вставки в код.
Скопируйте нужный формат в один клик
Нажмите кнопку "Копировать" рядом с нужным значением: HEX-код, RGB, CSS color или CSS background-color. Результат моментально попадёт в буфер обмена для вставки в ваш проект, редактор или конструктор сайтов.
Примеры использования конвертера RGB в HEX
🎨 Перенос цветов из Figma и Photoshop в CSS
Дизайнер передал макет с цветами в формате RGB, например rgb(59, 130, 246) для акцентных кнопок. Откройте конвертер, введите 59, 130, 246 — и мгновенно получите #3B82F6 для вставки в CSS-файл. Больше не нужно переключаться между вкладками и вручную считать шестнадцатеричные значения.
🖥️ Настройка темы сайта на WordPress или Tilda
При настройке визуальной темы конструктор может требовать HEX-код. Если в брендбуке указаны значения RGB, просто переведите их через конвертер. Например, фирменный зелёный rgb(0, 128, 0) станет #008000 — вставьте его в поле настройки цвета темы.
📧 Подбор цветов для email-рассылки
Email-клиенты лучше поддерживают HEX-коды, чем RGB в inline-стилях. Конвертер позволяет быстро перевести подобранный оттенок и скопировать готовое CSS-свойство background-color для вставки в шаблон письма.
🎓 Изучение цветовых моделей и кодирования
Студенты и начинающие разработчики используют конвертер для понимания связи между десятичной записью RGB и шестнадцатеричным HEX-кодом. Двигая ползунки, можно наглядно увидеть, как меняется каждый символ в HEX-записи при изменении числового значения канала.
Часто задаваемые вопросы о конвертации RGB в HEX
Что такое RGB и HEX — в чём разница форматов?
Как вручную перевести RGB в HEX без калькулятора?
Зачем переводить RGB в HEX для сайта?
Конвертер работает бесплатно? Данные отправляются на сервер?
Что такое именованные CSS-цвета и зачем они нужны?
Можно ли использовать конвертер на телефоне?
Как работает пипетка (EyeDropper) в конвертере?
Полезная информация
Конвертер RGB в HEX постоянно обновляется и дополняется новыми функциями.
Все вычисления выполняются локально в вашем браузере. Никакие данные не передаются на сервер. Инструмент работает без регистрации, без ограничений по количеству конвертаций и полностью бесплатно.
Если у вас есть предложения по улучшению конвертера или вы нашли неточность, напишите нам через форму обратной связи. Мы ценим каждый отзыв и стремимся сделать инструмент максимально полезным для работы с цветом.
Комментарии (1)
🎨Похожие инструменты
Конвертер 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 для печати
Конвертер CMYK в RGB
Мгновенный перевод цвета из CMYK в RGB, HEX и HSL с превью