🎨

Конвертер 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.

1

Основной цвет: RGB(79, 70, 229) → #4F46E5 (индиго)

2

Акцентный: RGB(16, 185, 129) → #10B981 (изумрудный)

3

Фоновый: RGB(249, 250, 251) → #F9FAFB (почти белый)

4

Все 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

ЦветНазваниеRGBHEX
Красный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 — пошаговая инструкция

1

Введите значения каналов R, G и B

Используйте ползунки или числовые поля, чтобы задать интенсивность каждого цветового канала от 0 до 255. Красный (Red), зелёный (Green) и синий (Blue) вместе определяют итоговый цвет. Также вы можете нажать на палитру, пипетку или кнопку случайного цвета.

2

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

HEX-код обновляется мгновенно при каждом изменении. Большой цветовой блок показывает выбранный оттенок, а справа отображаются готовые значения: HEX-код, RGB-запись и CSS-свойства для вставки в код.

3

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

Нажмите кнопку "Копировать" рядом с нужным значением: 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 (Red, Green, Blue) — это цветовая модель, в которой каждый оттенок задаётся тремя числами от 0 до 255, определяющими интенсивность красного, зелёного и синего каналов. HEX (hexadecimal) — шестнадцатеричная запись того же цвета в виде шести символов после решётки (#). По сути это два способа записи одного и того же значения: RGB(255, 0, 0) и #FF0000 — оба обозначают красный цвет. HEX чаще используется в CSS и HTML, а RGB — в графических редакторах и интерфейсах настроек.
Как вручную перевести RGB в HEX без калькулятора?
Для ручной конвертации нужно перевести каждое из трёх десятичных чисел (0–255) в шестнадцатеричную систему. Разделите число на 16: целая часть — первая цифра, остаток — вторая. Цифры 10–15 записываются буквами A–F. Пример: 200 ÷ 16 = 12 остаток 8, значит 200 = C8. Повторите для каждого канала и объедините результат после #. На практике гораздо быстрее и надёжнее использовать онлайн-конвертер.
Зачем переводить RGB в HEX для сайта?
HEX-коды исторически стали стандартом в веб-разработке. Они компактнее (6 символов вместо трёх чисел), универсально поддерживаются всеми браузерами и email-клиентами, удобны для хранения в переменных CSS и препроцессорах (SASS, LESS). Многие UI-фреймворки, конструкторы сайтов и CMS используют именно HEX-формат в полях настройки цвета. Перевод из RGB в HEX обеспечивает совместимость с максимальным количеством инструментов и платформ.
Конвертер работает бесплатно? Данные отправляются на сервер?
Конвертер RGB в HEX полностью бесплатный и работает без регистрации. Вся обработка происходит локально в вашем браузере — никакие данные не отправляются на сервер. Вы можете пользоваться инструментом без ограничений по количеству конвертаций, без рекламных пауз и без необходимости устанавливать программы или расширения.
Что такое именованные CSS-цвета и зачем они нужны?
CSS поддерживает 140 именованных цветов (named colors) — это стандартные оттенки, которые можно указывать по имени вместо числового кода: red, blue, coral, tomato и т.д. Наш конвертер автоматически определяет ближайший именованный цвет к вашему RGB-значению. Это удобно для быстрого прототипирования и улучшения читаемости CSS-кода, хотя для точного цветового соответствия рекомендуется использовать HEX или RGB.
Можно ли использовать конвертер на телефоне?
Да, конвертер полностью адаптирован для мобильных устройств. Ползунки и поля ввода удобно работают на смартфонах и планшетах. Кнопки копирования позволяют мгновенно сохранить результат в буфер обмена для вставки в любое приложение. Интерфейс автоматически подстраивается под размер экрана.
Как работает пипетка (EyeDropper) в конвертере?
Кнопка пипетки использует EyeDropper API — встроенную функцию браузера, позволяющую выбрать любой цвет прямо с экрана. При нажатии курсор превращается в пипетку: наведите его на нужный пиксель и кликните. Цвет автоматически загрузится в конвертер. Функция доступна в Chrome, Edge и Opera на десктопных устройствах. В Firefox и Safari пипетка пока не поддерживается — в этом случае кнопка не отображается.

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

Конвертер RGB в HEX постоянно обновляется и дополняется новыми функциями.

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

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

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

Был ли полезен этот инструмент?
Руслан Авдеев (автор проекта)1 янв. 2024 г., 00:00
🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀