Шестнадцатеричный код из значений RGB

Онлайн-конвертер вычисляет точный шестнадцатеричный код из значений RGB, переводя десятичные параметры цвета в стандартный формат HEX. Инструмент преобразует показатели интенсивности трех базовых цветовых каналов - красного, зеленого и синего. Каждое исходное число пересчитывается из десятичной системы счисления в шестнадцатеричную с объединением в единый строковый идентификатор. Готовый код сразу подходит для переноса в таблицы стилей и графические редакторы.

На вход подаются три целых числа в диапазоне от 0 до 255, а на выходе формируется шестизначная комбинация символов с префиксом решетки вида #RRGGBB.

Такое преобразование постоянно требуется в веб-разработке, верстке интерфейсов и цифровом дизайне. Все вычисления выполняются в рамках стандартного цветового пространства sRGB. Графические программы часто выдают параметры палитры в виде отдельных числовых значений каналов, тогда как при написании разметки HTML и правил CSS удобнее использовать компактную запись HEX. Точный пересчет исключает искажение оттенков при переносе визуальных макетов в программный код.

Структура цветовой модели RGB и шестнадцатеричного формата HEX

Входные и выходные данные при конвертации цвета описывают абсолютно идентичные физические параметры свечения экрана, отличаясь исключительно системой счисления и формой записи. Оба представления опираются на аддитивную цветовую модель RGB, в которой любой видимый на цифровом дисплее оттенок формируется за счет направленного смешения трех базовых световых лучей. Изменяя яркость свечения каждого субпикселя, матрица монитора складывает потоки света: отсутствие свечения во всех каналах воспринимается как темнота, а работа всех трех компонентов на максимальной мощности образует чистый светлый тон.

В стандартной 24-битной глубине цвета на кодирование одного базового канала выделяется ровно 1 байт информации, что эквивалентно 8 битам. Поскольку один бит принимает только два состояния (0 или 1), восемь бит дают 2 в восьмой степени возможных комбинаций, то есть ровно 256 дискретных уровней яркости. С учетом нулевого значения, обозначающего полное отключение свечения субпикселя, десятичный диапазон каждого канала укладывается в интервал от 0 до 255. Перемножение 256 уровней трех независимых каналов формирует палитру из 16 777 216 уникальных цветовых оттенков.

Формат HEX представляет собой компактную упаковку тех же самых трех байтов информации в шестнадцатеричной системе счисления. Поскольку один байт (число от 0 до 255) всегда однозначно записывается ровно двумя шестнадцатеричными знаками, вся цветовая схема укладывается в строгую шестизначную структуру. Такая запись в технической документации называется шестнадцатеричной тройкой (hexadecimal triplet), так как строка состоит из трех последовательных пар символов.

Стандартная строка формата #RRGGBB включает четыре структурных элемента:

• Символ решетки на первой позиции выступает техническим префиксом, который указывает парсерам браузеров и графическим средам, что далее следует шестнадцатеричное значение.
• Первая пара символов ( RR ) фиксирует уровень интенсивности первого канала.
• Вторая пара символов ( GG ) определяет яркость второго канала.
• Третья пара символов ( BB ) задает насыщенность третьего канала.

Соотношение параметров и архитектуры хранения данных в обоих представлениях наглядно демонстрирует таблица соответствия:

Сокращенный трехзначный формат записи

Спецификации таблиц стилей предусматривают укороченную форму записи шестнадцатеричного кода по шаблону #RGB , состоящую из префикса и трех символов. Такое сжатие допустимо только при выполнении строгого математического условия: оба знака внутри каждой из трех шестнадцатеричных пар в исходном коде должны быть полностью идентичными.

Если в шестизначной строке дублируются символы в первом, втором и третьем канале одновременно, каждую пару можно свернуть до одного знака без потери точности цветопередачи. Например, код #FF00CC состоит из пар FF , 00 и CC , поэтому его можно записать в виде #F0C . Аналогичным образом комбинация #336699 сокращается до #369 . При чтении трехзначного кода рендеринг-движок продублирует каждый символ до полноценной пары, восстанавливая исходную 24-битную структуру. Если хотя бы в одной паре знаки различаются (например, в коде #FF05CC присутствует несимметричная пара 05 ), сокращенная форма не применяется, и цвет записывается полностью.

Математический алгоритм перевода десятичных значений RGB в HEX

В основе преобразования цветовых координат лежит переход от десятичной системы счисления (основание 10) к позиционной шестнадцатеричной системе (основание 16). Поскольку стандартный десятичный ряд содержит только десять цифр от 0 до 9, для записи значений от 10 до 15 в пределах одного разряда используются первые шесть букв латинского алфавита.

Соответствие между десятичными числами от 0 до 15 и символами шестнадцатеричного алфавита представлено в справочной таблице:

Формула поразрядного расчета и правило ведущего нуля

Конвертация выполняется независимо для каждого из трех каналов (R, G и B). Так как входное число всегда находится в пределах от 0 до 255, его шестнадцатеричный эквивалент гарантированно укладывается в два разряда. Вычисление этих двух символов для отдельного канала (обозначим его десятичное значение как X) сводится к двум базовым арифметическим операциям с числом 16:

• Вычисление старшего (первого) разряда пары: исходное число X делится на 16 нацело, а дробная часть отбрасывается. Математически это записывается как D1 = floor(X / 16) .
• Вычисление младшего (второго) разряда пары: определяется остаток от целочисленного деления числа X на 16. Формула расчета имеет вид D2 = X - (D1 × 16) или X mod 16 .
• Перевод в символьный вид: полученные числа D1 и D2 (каждое из которых находится в диапазоне от 0 до 15) заменяются соответствующими знаками шестнадцатеричного алфавита и соединяются в пару.

При расчете малых значений интенсивности (от 0 до 15 включительно) возникает важный технический нюанс. Целочисленное деление любого числа меньше 16 на 16 дает в результате 0 в старшем разряде. Например, при конвертации значения 5 математическим результатом будет одиночный символ 5 . Однако спецификация формата #RRGGBB требует жесткой шестизначной структуры, где под каждый цветовой канал отводится ровно две позиции. Если опустить нулевой старший разряд, общая длина строки сократится, и парсер таблиц стилей не сможет распознать цвет. Поэтому для всех десятичных значений от 0 до 15 обязательно применяется правило добавления ведущего нуля: число 5 записывается как 05 , число 12 - как 0C , а 0 - как 00 .

Сквозной пример математического расчета

Рассмотрим последовательное преобразование сложного оттенка с исходными параметрами rgb(45, 9, 218) , где интенсивность красного канала равна 45, зеленого - 9, а синего - 218.

На первом этапе вычисляется шестнадцатеричная пара для красного канала (R = 45). Делим 45 на 16: целая часть равна 2 (так как 2 × 16 = 32). Это значение старшего разряда. Находим остаток для младшего разряда: 45 - 32 = 13. По таблице соответствия числу 2 отвечает цифра 2 , а числу 13 - буква D . Пара красного канала принимает вид 2D .

На втором этапе обрабатывается зеленый канал (G = 9). Поскольку 9 меньше 16, целая часть от деления 9 на 16 равна 0, а остаток составляет 9. С учетом правила сохранения двухзначной разрядности и добавления ведущего нуля формируется комбинация 09 .

На третьем этапе рассчитывается синий канал (B = 218). При делении 218 на 16 получаем целую часть 13 (13 × 16 = 208). Вычисляем остаток: 218 - 208 = 10. Переводим оба полученных числа в шестнадцатеричные символы: 13 соответствует букве D , а 10 - букве A . Результат для синего канала равен DA .

На финальном шаге вычисленные пары объединяются строго в порядке следования каналов (R, затем G, затем B) и дополняются префиксом решетки. Сборка строк 2D , 09 и DA дает итоговый код #2D09DA . Для обратной проверки правильности перевода достаточно умножить старший разряд каждой пары на 16 и прибавить младший: для DA это (13 × 16) + 10 = 208 + 10 = 218, что полностью совпадает с исходным параметром синего канала.

Примеры преобразования базовых и эталонных цветов из RGB в HEX

Анализ эталонных цветовых точек в пространстве sRGB позволяет визуально считывать оттенок непосредственно по шестнадцатеричной записи без промежуточных вычислений. Сопоставление граничных и комбинированных параметров R, G и B с их результатами в HEX наглядно демонстрирует, как распределение интенсивности каналов формирует базовую палитру.

Справочная таблица соответствия эталонных цветов

В таблице представлены ключевые точки пространства sRGB, включая первичные и вторичные цвета, а также ахроматическую шкалу, с распределением десятичных и шестнадцатеричных значений по каналам:

Крайние точки и первичные цвета пространства sRGB

Граничные состояния цветовой модели определяются нулевым или предельным заполнением каждого канала. Нижняя граница выражается комбинацией rgb(0, 0, 0) . При переводе каждый нулевой параметр формирует пару 00 , образуя код черного цвета #000000 . Верхняя граница представлена значением rgb(255, 255, 255) . Поскольку десятичное число 255 при делении на 16 дает целую часть 15 ( F ) и остаток 15 ( F ), максимальная яркость каждого канала записывается как FF . Слияние трех пар на полной мощности дает эталонный белый цвет #FFFFFF .

Базовые (первичные) цвета спектра формируются при изолированном включении одного канала на максимум (255) при полном отключении двух остальных (0):

• Чистый красный цвет rgb(255, 0, 0) преобразуется в #FF0000 , где старшая пара символов FF фиксирует пиковую яркость первого канала, а четыре последующих нуля указывают на отсутствие зеленой и синей составляющих.
• Чистый зеленый цвет rgb(0, 255, 0) переводится в #00FF00 , смещая активную пару FF в центральную позицию шестнадцатеричной строки.
• Чистый синий цвет rgb(0, 0, 255) конвертируется в #0000FF , где максимальное значение занимает две крайние правые позиции.

При снижении десятичного параметра единственного активного канала (например, rgb(128, 0, 0) -> #800000 ) цветовой тон остается прежним, но оттенок смещается в сторону черного, становясь темно-бордовым.

Формирование вторичных цветов аддитивного синтеза

Попарное смешение первичных каналов на максимальной интенсивности (255) при нулевом значении третьего канала образует вторичные цвета палитры. В шестнадцатеричном представлении такие цвета легко распознать по наличию двух пар FF и одной пары 00 :

• Желтый цвет возникает при сложении красного и зеленого каналов без участия синего - rgb(255, 255, 0) . В результате конвертации первые четыре символа после префикса заполняются значениями F , формируя код #FFFF00 .
• Голубой (Cyan) образуется за счет одновременного свечения зеленого и синего при отключенном красном - rgb(0, 255, 255) . Шестнадцатеричный эквивалент принимает вид #00FFFF .
• Пурпурный (Magenta) является результатом синтеза красного и синего каналов при нулевом зеленом - rgb(255, 0, 255) . В коде #FF00FF активные пары располагаются по краям от центральной нулевой группы.

Изменение пропорций внутри активных пар позволяет управлять оттенком вторичного цвета. Если в формуле желтого снизить интенсивность зеленого канала примерно вдвое, задав rgb(255, 128, 0) , вторая шестнадцатеричная пара изменится с FF на 80 . Итоговый код #FF8000 даст чистый оранжевый цвет.

Закономерность построения оттенков серого

Ахроматическая шкала (все градации серого между черным и белым) строится по строгому математическому правилу: десятичные значения красного, зеленого и синего каналов должны быть абсолютно идентичны (R = G = B). Так как при равной мощности всех трех излучателей ни один цветовой тон не доминирует, глаз воспринимает результат как нейтральный серый цвет различной светлоты.

При переводе в HEX равенство входных чисел приводит к трехкратному повторению одной и той же двухсимвольной комбинации. Классический пример - нейтральный серый цвет со средней интенсивностью rgb(128, 128, 128) . Деление 128 на 16 дает ровно 8 без остатка (младший разряд равен 0), что переводит каждый канал в пару 80 и формирует симметричный код #808080 .

Смещение общего числового показателя вверх или вниз равномерно меняет яркость оттенка по всей шкале. Темно-серый цвет rgb(64, 64, 64) преобразуется в #404040 (64 / 16 = 4, остаток 0), а светло-серый rgb(192, 192, 192) конвертируется в #C0C0C0 (192 / 16 = 12, что соответствует символу C , остаток 0). Любое нарушение симметрии между тремя парами в HEX-коде означает появление цветового подтона: например, запись #808580 из параметров rgb(128, 133, 128) указывает на серый цвет с легким смещением в зеленый спектр.

Применение полученного HEX-кода в HTML, CSS и UI/UX-дизайне

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

Стилизация элементов и градиентов в CSS

В каскадных таблицах стилей полученный результат подставляется напрямую в качестве значения для свойств, отвечающих за визуальное оформление элементов разметки HTML. Браузерный движок считывает шестнадцатеричную строку и окрашивает целевой узел без дополнительных вычислений со стороны разработчика.

Базовые сценарии записи сконвертированного цвета охватывают следующие свойства верстки:

• Текстовый контент и иконки: свойство color: #1E293B; (получено из параметров 30, 41, 59) задает цвет шрифта и векторных элементов, использующих значение currentColor .
• Заливка контейнеров: правило background-color: #F8FAFC; (из комбинации 248, 250, 252) формирует сплошной фон блоков, карточек или всей страницы.
• Рамки и разделители: декларация border-color: #CBD5E1; (из значений 203, 213, 225) или краткая запись border: 1px solid #CBD5E1; определяет оттенок обводки таблиц, полей ввода и кнопок.
• Генерация теней: в свойстве box-shadow: 0 4px 6px #94A3B8; (из 148, 163, 184) шестнадцатеричный код определяет базовый цвет отбрасываемой блоком тени.

Отдельная область применения - построение плавных цветовых переходов. В функциях linear-gradient и radial-gradient шестнадцатеричные коды выступают опорными точками (color stops). Например, при переводе двух пар значений - насыщенного синего (37, 99, 235) и фиолетового (124, 58, 237) - получаются коды #2563EB и #7C3AED . Их подстановка в правило background-image: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%); формирует горизонтальный градиент между двумя точными оттенками.

Организация токенов в CSS-переменных, SASS/SCSS и Tailwind CSS

В крупных проектах цвета редко прописываются в свойствах напрямую: вместо этого создается система дизайн-токенов. Конвертация цветовых каналов в формат HEX позволяет стандартизировать хранение палитры на уровне глобальных конфигураций.

В нативном CSS полученные значения объявляются внутри псевдокласса :root через пользовательские свойства (CSS Custom Properties). Это позволяет задать цвет один раз и переиспользовать его во всех компонентах:

:root {
  --brand-primary: #0F172A;
  --brand-accent: #3B82F6;
  --surface-muted: #F1F5F9;
}

.action-button {
  background-color: var(--brand-accent);
  color: var(--surface-muted);
}

При использовании препроцессоров SASS или SCSS шестнадцатеричное представление выступает базовым форматом для переменных (например, $color-warning: #F59E0B; ). Компилятор препроцессора распознает такую запись как цветовой объект, что позволяет применять к переменной встроенные математические функции модификации тона - например, осветление lighten($color-warning, 15%) или затемнение darken($color-warning, 10%) .

В утилитарном фреймворке Tailwind CSS кастомная палитра проекта расширяется в конфигурационном файле tailwind.config.js . Переведенные из десятичного формата коды записываются в объект theme.extend.colors в виде строковых значений, после чего фреймворк генерирует готовые классы для HTML-разметки.

Способы внедрения сконвертированного кода #10B981 (из значений 16, 185, 129) в различные инструменты стилизации различаются синтаксисом объявления и вызова:

Перенос палитр и стайлгайдов из графических редакторов

При проектировании интерфейсов и фирменного стиля на стыке дизайна и разработки часто возникает задача синхронизации цветовых форматов. Брендбуки, гайдлайны компании или технические задания на печать и цифровую графику нередко содержат спецификации фирменных цветов (Brand Colors), записанные исключительно по каналам - например, R: 220, G: 38, B: 38 .

Такое преобразование используется при переносе утвержденной цветовой схемы в рабочее пространство графических редакторов Figma, Adobe Photoshop и Adobe Illustrator, а также при сборке единой дизайн-системы:

• Импорт в инспектор свойств: в большинстве графических пакетов ввод цвета через три отдельных поля для красного, зеленого и синего каналов требует трех последовательных действий с переключением фокуса ввода. Перевод значений в единый шестнадцатеричный код (например, #DC2626 ) позволяет скопировать и вставить оттенок в поле выбора цвета (Color Picker) за одну операцию.
• Формирование библиотек стилей (Style Guides): при создании локальных или облачных стилей в Figma дизайнеры закрепляют за каждым оттенком его шестнадцатеричный индекс в описании токена, чтобы фронтенд-разработчики могли забирать готовые значения из режима инспекции макета (Dev Mode).
• Документирование дизайн-систем: в платформах документации компонентов (таких как Storybook или Zeroheight) принято указывать параллельно оба формата. Десятичные значения дают представление о физическом балансе каналов и яркости, а HEX-код служит готовой строкой для копирования в буфер обмена при верстке.

Программная реализация конвертации RGB в HEX на JavaScript, Python и C#

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

JavaScript и TypeScript

В экосистеме веб-разработки на JavaScript и TypeScript задача решается двумя основными способами: через прямое преобразование каждого числа в строку или через побитовые операции над единым числовым значением.

Классический подход опирается на метод Number.prototype.toString(16) , который переводит десятичное число в шестнадцатеричное представление. Поскольку значения меньше 16 при таком вызове возвращают только один символ, результат дополняется ведущим нулем с помощью метода String.prototype.padStart(2, '0') :

function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, '0');
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

// Пример вызова: rgbToHex(220, 38, 38) -> "#DC2626"

Альтернативный алгоритм использует побитовый сдвиг и объединяет все три канала в одно 24-битное число перед переводом в строку:

const rgbToHexBitwise = (r, g, b) => 
  '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();

Логика работы побитового выражения основана на последовательном смещении разрядов в двоичной памяти:

• Операция r << 16 сдвигает биты красного канала на 16 позиций влево, помещая их в старший байт.
• Операция g << 8 смещает зеленый канал на 8 позиций в средний байт, а значение b занимает младшие 8 бит.
• Выражение 1 << 24 создает техническую единицу в 25-м бите (число 16777216 или 0x1000000 ). Это гарантирует, что при нулевом значении красного канала старшие нули не будут отброшены при вызове toString(16) .
• Метод slice(1) отсекает техническую единицу с первого индекса строки, оставляя ровно 6 символов шестнадцатеричного кода.

Python

В языке Python перевод десятичных каналов в формат HEX выполняется за счет встроенного механизма форматирования строк без явного вызова математических функций конвертации систем счисления. Наиболее компактная запись достигается через синтаксис f-strings или метод str.format() :

def rgb_to_hex(r: int, g: int, b: int) -> str:
    return f'#{r:02x}{g:02x}{b:02x}'

# Альтернативный вариант через метод format():
# hex_color = '#{:02x}{:02x}{:02x}'.format(r, g, b)

Внутри фигурных скобок задается спецификатор формата :02x , где каждый символ отвечает за отдельное правило обработки числа: x указывает интерпретатору вывести значение в шестнадцатеричной системе в нижнем регистре (для получения заглавных букв используется спецификатор :02X ), цифра 2 задает минимальную ширину поля в два символа, а 0 предписывает заполнить пустующий старший разряд ведущим нулем.

C# и платформа .NET

В приложениях на платформе .NET для работы с графическими примитивами и цветовыми моделями предусмотрена штатная структура System.Drawing.Color . Передача десятичных каналов осуществляется через фабричный метод Color.FromArgb , а итоговая сборка строки выполняется стандартным спецификатором формата ToString("X2") :

using System;
using System.Drawing;

public class ColorConverter
{
    public static string RgbToHex(int r, int g, int b)
    {
        Color color = Color.FromArgb(r, g, b);
        return $"#{color.R.ToString("X2")}{color.G.ToString("X2")}{color.B.ToString("X2")}";
    }
}

Аргумент "X2" внутри метода ToString форматирует байтовое свойство каждого цветового компонента в двухзначное шестнадцатеричное число в верхнем регистре. Если в проекте не требуется подключение пространства имен System.Drawing , метод ToString("X2") применяется напрямую к целочисленным переменным r , g и b внутри интерполированной строки: $"#{r:X2}{g:X2}{b:X2}" .

Сводное сравнение синтаксиса в разных языках

Ниже приведена сравнительная таблица базовых языковых конструкций, отвечающих за конвертацию основания системы счисления и выравнивание длины шестнадцатеричной пары:

Независимо от выбранного языка программирования, перед выполнением строкового или побитового преобразования в пользовательских функциях рекомендуется проверять или принудительно ограничивать входные аргументы диапазоном от 0 до 255 . Передача отрицательных чисел или значений свыше 255 без предварительной валидации приведет к нарушению шестизначной структуры #RRGGBB , искажению соседних байтов при побитовом сдвиге или вызову исключения времени выполнения, как это происходит в методе Color.FromArgb в C#.