Цветовое значение RGB из HEX-кода

Получить точное цветовое значение RGB из HEX-кода требуется при переносе палитры из дизайн-макетов в таблицы стилей CSS, настройке прозрачности элементов или программном расчете контрастности интерфейса. Инструмент выполняет прямое математическое преобразование шестнадцатеричной строки в отдельные десятичные показатели интенсивности трех базовых каналов. Пользователь подает на вход стандартный шестизначный или сокращенный трехзначный код, а на выходе получает готовый триплет целых чисел. Каждое число находится в диапазоне от 0 до 255 и определяет яркость свечения своего субпикселя.

Оба формата описывают одну и ту же аддитивную цветовую модель в стандартном пространстве sRGB. Разница заключается исключительно в системе счисления: компактная запись с основанием 16 переводится в привычный десятичный вид для раздельного управления каналами.

Процесс конвертации опирается на жесткое соответствие между разрядами входной строки и итоговыми цветовыми координатами:

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

Структура HEX-кода и шестнадцатеричное представление цвета

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

При чтении и передаче цветовых кодов регистр букв не имеет технического значения: строчные символы от a до f полностью эквивалентны прописным от A до F. Точное соответствие между шестнадцатеричными знаками и их числовыми весами представлено в справочной таблице ниже:

Стандартная запись RRGGBB и распределение байтов

Классический веб-формат цвета записывается по шаблону #RRGGBB . Символ решетки (октоторп) в начале строки служит синтаксическим маркером для парсеров CSS и графических программ, указывая, что следующие за ним знаки нужно интерпретировать как шестнадцатеричный код. Сама информационная часть состоит из шести позиций, жестко разделенных на три последовательные пары.

Каждая пара символов кодирует 1 байт (8 бит) данных и отвечает за свой цветовой канал в строгом порядке:

• Первые два знака ( RR ) задают уровень красного канала.
• Средняя пара ( GG ) определяет насыщенность зеленого канала.
• Последние два символа ( BB ) фиксируют долю синего канала.

Внутри каждой двухзначной группы левый символ является старшим разрядом (множитель 16), а правый - младшим (единицы). Минимальное значение пары записывается как 00 , а максимальное - как FF . В совокупности три пары формируют 24-битную глубину цвета (TrueColor), где на каждый пиксель приходится по 3 байта данных.

Правило раскрытия трехзначного формата RGB

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

Перед переводом в десятичные числа трехзначный код приводится к стандартному шестизначному виду путем дублирования каждого знака на своей позиции. Символ R превращается в пару RR , G - в GG , а B - в BB . Например, компактная запись #F0C математически раскрывается в полную строку #FF00CC , а код #3A9 идентичен записи #33AA99 . Обратное сокращение возможно только для тех шестизначных кодов, где обе позиции в каждом из трех байтов имеют одинаковое значение (например, #445566 сжимается до #456 , тогда как #445567 сократить нельзя).

Расширенные 8-символьные спецификации

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

• Запись #RRGGBBAA используется в современных таблицах стилей CSS. Здесь первые шесть знаков работают по стандартной схеме для цвета, а завершающая пара символов ( AA ) определяет непрозрачность от полной прозрачности ( 00 ) до сплошной заливки ( FF ).
• Нотация 0xAARRGGBB применяется в низкоуровневых графических API, мобильной разработке (например, в ресурсах Android) и языках программирования. Префикс 0x указывает компилятору на шестнадцатеричное число, а байт прозрачности вынесен на первые две позиции перед цветовыми каналами.

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

Цветовая модель RGB и формирование каналов

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

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

Структура триплета и базовые цветовые каналы

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

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

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

Восьмибитная запись и десятичный диапазон интенсивности

В стандартной цифровой графике с глубиной цвета 24 бита на каждый из трех цветовых каналов выделяется ровно 1 байт, то есть 8 бит данных. В двоичном исчислении восьмибитная ячейка способна принимать 2 ⁸ различных состояний, что дает ровно 256 дискретных уровней яркости для каждого отдельного субпикселя.

При переводе в привычную десятичную систему счисления эти 256 состояний образуют непрерывный целочисленный диапазон от 0 до 255, так как отсчет начинается с нуля. Граничные и промежуточные показатели внутри каждого канала интерпретируются следующим образом:

Поскольку каждый из трех каналов независимо принимает одно из 256 значений, общее количество возможных комбинаций в триплете составляет 256 × 256 × 256 = 16 777 216 оттенков. Именно такое число уникальных цветовых координат доступно в стандартной восьмибитной записи на канал.

Связь числовых координат с пространством sRGB

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

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

Математика и алгоритмы перевода из HEX в RGB

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

Пошаговый математический алгоритм

Базовый расчет выполняется в четыре последовательных этапа:

• Очистка и нормализация входной строки: удаление префикса решетки (символа # ) и, если исходный код записан в трехзначном сокращении, дублирование каждого символа для получения полной шестизначной последовательности.
• Сегментация строки на три независимые пары символов: первые два знака образуют сегмент RR , третий и четвертый - сегмент GG , пятый и шестой - сегмент BB .
• Замена буквенных символов A-F в каждой паре на их десятичные эквиваленты от 10 до 15.
• Вычисление итогового десятичного числа для каждой пары по формуле разложения по степеням основания 16.

Математическая формула для расчета каждого отдельного канала имеет вид:

Значение = (Старший_разряд × 16¹) + (Младший_разряд × 16⁰)

Так как 16 в первой степени равно 16, а любое число в нулевой степени равно 1, выражение упрощается до умножения первой цифры пары на 16 и прибавления к результату второй цифры: (Старший_разряд × 16) + Младший_разряд .

Пример расчета на конкретном цвете

В качестве учебного примера можно разобрать перевод шестнадцатеричного кода #2A7FCD . После отбрасывания символа решетки строка разделяется на три шестнадцатеричных байта: 2A , 7F и CD . Ниже в таблице приведен подробный расчет для каждого канала:

В результате вычислений шестнадцатеричный код #2A7FCD преобразуется в десятичный триплет 42, 127, 205 .

Представление цвета в виде единого 24-битного числа

Шестизначный HEX-код можно рассматривать не только как три отдельные пары символов, но и как единое 24-битное целое число в диапазоне от 0 ( #000000 ) до 16 777 215 ( #FFFFFF ). В таком представлении каналы R, G и B выступают как разряды позиционной системы счисления с основанием 256, поскольку каждый байт вмещает ровно 256 состояний.

Обратная математическая связь, объединяющая три десятичных канала в одно 24-битное числовое значение, описывается формулой:

Число_24бит = (256 × 256 × R) + (256 × G) + B

Так как 256 × 256 равно 65 536, для рассмотренного выше триплета 42, 127, 205 расчет общего 24-битного индекса выглядит следующим образом: (65 536 × 42) + (256 × 127) + 205 = 2 752 512 + 32 512 + 205 = 2 785 229 . Если перевести десятичное число 2 785 229 напрямую в шестнадцатеричную систему, получится исходное значение 2A7FCD . Эта прямая арифметическая зависимость лежит в основе алгоритмов быстрого побитового извлечения каналов.

Программная реализация в JavaScript и TypeScript

При написании кода для фронтенд-приложений, парсеров стилей или утилит работы с графикой задача перевода HEX в RGB обычно оформляется в виде чистой функции hexToRGB . На практике применяются два основных алгоритмических подхода: через разбор подстрок и через битовые операции.

Метод со строковыми операциями

Первый подход повторяет ручной алгоритм: строка очищается от решетки, при необходимости разворачивается из 3-значной формы до 6 символов, а затем нарезается на три фрагмента методом slice . Каждая двухсимвольная подстрока передается в стандартную функцию parseInt с явно указанным основанием системы счисления 16 .

function hexToRGB(hex: string): { r: number; g: number; b: number } {
  const cleanHex = hex.replace(/^#/, '');
  const fullHex = cleanHex.length === 3
    ? cleanHex[0] + cleanHex[0] + cleanHex[1] + cleanHex[1] + cleanHex[2] + cleanHex[2]
    : cleanHex;

  const r = parseInt(fullHex.slice(0, 2), 16);
  const g = parseInt(fullHex.slice(2, 4), 16);
  const b = parseInt(fullHex.slice(4, 6), 16);

  return { r, g, b };
}

Метод с побитовыми операциями

Второй способ работает быстрее на больших объемах данных, так как вызывает парсер parseInt всего один раз, превращая всю шестизначную строку в единое 24-битное число. После этого отдельные байты извлекаются на уровне процессора с помощью побитового сдвига вправо ( >> ) и побитового логического И ( & ) с маской 0xff (что соответствует десятичному числу 255 или восьми единицам в двоичном коде 11111111 ).

function hexToRGBBitwise(hex: string): [number, number, number] {
  let cleanHex = hex.replace(/^#/, '');
  if (cleanHex.length === 3) {
    cleanHex = cleanHex[0] + cleanHex[0] + cleanHex[1] + cleanHex[1] + cleanHex[2] + cleanHex[2];
  }

  const num = parseInt(cleanHex, 16);

  const r = (num >> 16) & 0xff;
  const g = (num >> 8) & 0xff;
  const b = num & 0xff;

  return [r, g, b];
}

Механика работы битовых операторов в этом коде основана на смещении двоичных разрядов:

• Для получения красного канала 24-битное число сдвигается на 16 бит вправо ( num >> 16 ). Младшие 16 бит (зеленый и синий каналы) отбрасываются, а старшие 8 бит занимают их место. Маска & 0xff гарантирует отсечение любых лишних старших разрядов.
• Для извлечения зеленого канала выполняется сдвиг на 8 бит вправо ( num >> 8 ). Синий канал исчезает, а на позиции младшего байта оказываются биты зеленого канала. Применение маски & 0xff обнуляет стоящий левее красный канал, оставляя только искомые 8 бит.
• Синий канал уже находится в младших 8 битах числа, поэтому сдвиг не требуется. Операция num & 0xff сразу отсекает первые 16 бит (красный и зеленый каналы) и возвращает чистое значение синего компонента.

Использование значений RGB и RGBA в CSS и веб-разработке

В верстке HTML-документов, оформлении векторной графики SVG и написании таблиц стилей CSS или CSS3 шестнадцатеричный код удобен своей компактностью, но ограничен при динамической работе со свойствами цвета. Десятичные значения отдельных каналов необходимы фронтенд-разработчику, когда цвет перестает быть статичной константой и требует программного или стилевого модифицирования прямо в браузере. Основная причина отказа от монолитной строки HEX в пользу триплета чисел - управление прозрачностью элементов и построение гибких архитектурных систем стилей.

В отличие от свойства opacity , которое делает полупрозрачным весь HTML-элемент вместе с его дочерним текстом и вложенными блоками, задание альфа-канала через цвет применяется точечно к конкретному CSS-свойству. Это позволяет оставить текст кнопки полностью читаемым, сделав полупрозрачным только ее фон ( background-color ), рамку ( border-color ), тень ( box-shadow ) или заливку векторного контура в SVG (атрибут или свойство fill ).

Синтаксис функции цвета и управление прозрачностью

Для добавления альфа-канала (параметр Alpha, отвечающий за непрозрачность) к десятичным значениям красного, зеленого и синего в веб-стандартах предусмотрено два варианта записи: классический функциональный синтаксис с разделителями-запятыми и обновленная спецификация CSS Color Level 4.

В классическом стандарте CSS3 для плотного цвета используется функция rgb(R, G, B) , а при необходимости задать прозрачность вызывается отдельная функция rgba(R, G, B, A) . Четвертый аргумент определяет степень непрозрачности в диапазоне от 0 (полностью прозрачный, невидимый слой) до 1 (абсолютно плотный цвет). Дробные значения записываются через точку, например 0.5 или в сокращенном виде .5 .

Современный стандарт CSS Color Level 4 унифицировал этот подход. Функция rgba() переведена в разряд устаревших псевдонимов (хотя полностью сохраняет обратную совместимость в браузерах), а передача альфа-канала выполняется напрямую внутри базовой функции rgb() . В новой спецификации запятые между каналами убраны: значения R, G и B разделяются пробелами, а параметр прозрачности отделяется косой чертой (слэш-нотация) и может указываться как десятичной дробью, так и в процентах.

Сравнение допустимых вариантов записи одного и того же полупрозрачного оттенка (на примере исходного кода #2563EB , переведенного в десятичный триплет 37, 99, 235 с непрозрачностью 50%) демонстрирует эволюцию синтаксиса:

Динамическая прозрачность через CSS Custom Properties

При работе с дизайн-токенами и кастомными свойствами (CSS Custom Properties, вызываемыми через функцию var() ) хранение бренд-цвета в формате HEX создает архитектурную проблему. Если объявить переменную --brand-color: #2563EB; , ее невозможно передать внутрь классической функции rgba(var(--brand-color), 0.2) . Парсер CSS ожидает получить четыре раздельных аргумента, а при подстановке HEX-строки получает один слитный токен, что приводит к синтаксической ошибке и игнорированию правила браузером.

Для решения этой задачи результат конвертации HEX в RGB сохраняют в CSS-переменную не как готовую цветовую функцию, а в виде изолированного списка десятичных каналов (через запятую или пробел, в зависимости от выбранной спецификации CSS). Это позволяет использовать одну базовую переменную для генерации десятков оттенков разной плотности в любых компонентах интерфейса:

:root {
  /* Хранение каналов через запятую для классического синтаксиса */
  --primary-rgb-comma: 37, 99, 235;

  /* Хранение каналов через пробел для CSS Color Level 4 */
  --primary-rgb-space: 37 99 235;
}

.card-legacy {
  /* Плотный цвет текста */
  color: rgb(var(--primary-rgb-comma));
  /* Фон с непрозрачностью 10% */
  background-color: rgba(var(--primary-rgb-comma), 0.1);
}

.card-modern {
  /* Рамка с непрозрачностью 40% через слэш-нотацию */
  border: 1px solid rgb(var(--primary-rgb-space) / 40%);
  /* Тень с непрозрачностью 15% */
  box-shadow: 0 4px 12px rgb(var(--primary-rgb-space) / 0.15);
}

При таком подходе изменение основного фирменного цвета в корневом селекторе :root мгновенно обновит все плотные элементы, полупрозрачные подложки, состояния наведения ( :hover ), фокуса и тени во всем веб-приложении без необходимости вручную пересчитывать и заменять десятки отдельных кодов.

Применение каналов в препроцессорах SASS и конфигурации Tailwind CSS

В проектах, использующих препроцессор SASS (в синтаксисе SCSS), работа с цветом часто автоматизируется через миксины и встроенные функции. Хотя компилятор SASS умеет самостоятельно разбирать HEX-коды на составляющие при сборке проекта, при генерации нативных CSS-переменных для клиентской темизации (например, для переключения светлой и темной темы в браузере без перезагрузки) компилятору требуются явно разделенные каналы:

@mixin theme-color($name, $r, $g, $b) {
  --color-#{$name}: #{$r} #{$g} #{$b};
}

:root {
  @include theme-color('accent', 220, 38, 38);
}

.alert-box {
  background-color: rgb(var(--color-accent) / 12%);
  color: rgb(var(--color-accent));
}

Аналогичный принцип лежит в основе работы утилитарного фреймворка Tailwind CSS. Когда разработчику нужно подключить кастомную палитру через CSS-переменные и сохранить работоспособность встроенных модификаторов прозрачности (таких как классы bg-brand/50 , text-brand/80 или ring-brand/20 ), в глобальном файле стилей задаются именно три десятичных числа, разделенных пробелами.

Процесс интеграции сконвертированных значений в конфигурацию Tailwind CSS включает два шага:

• В основном CSS-файле внутри директивы @layer base объявляется переменная с чистыми каналами без обертки rgb() , например: --color-brand: 37 99 235; .
• В файле конфигурации tailwind.config.js внутри секции theme.extend.colors регистрируется пользовательский токен с использованием плейсхолдера <alpha-value> : brand: 'rgb(var(--color-brand) / <alpha-value>)' .

Во время генерации таблицы стилей движок Tailwind автоматически подставляет на место <alpha-value> нужное числовое значение непрозрачности, соответствующее утилитарному классу в HTML-разметке. Если бы в переменной хранился исходный HEX-код, подобная динамическая подстановка альфа-канала на стороне клиента была бы невозможна.

Роль десятичных каналов в дизайне, графике и расчете контрастности

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

Работа с дизайн-системами, брендбуками и графическими редакторами

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

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

• Настройка цвета в прикладном и офисном программном обеспечении, презентационных пакетах и старых версиях графических редакторов, где палитра ввода ограничена тремя числовыми полями для красного, зеленого и синего компонентов.
• Передача цветовых значений в скрипты и плагины для Figma, где внутренний программный интерфейс оперирует нормализованными десятичными значениями каналов в диапазоне от 0 до 1 (получаемыми путем деления каждого числа R, G, B на 255).
• Ручная корректировка цветового баланса оттенка, когда дизайнеру нужно сделать цвет теплее или холоднее на фиксированный шаг - например, увеличить значение красного канала на 15 единиц при сохранении неизменных показателей зеленого и синего.
• Формирование JSON-файлов с дизайн-токенами для кроссплатформенной разработки, где цвета хранятся в виде структурированных объектов с отдельными числовыми свойствами r , g и b для последующей компиляции под iOS, Android и Web.

Линейная интерполяция цвета и построение градиентов

Любое плавное перетекание одного цвета в другой на экране монитора - будь то векторный градиент в графическом редакторе, кадровая анимация перехода состояния кнопки или генерация цветовой шкалы для инфографики - требует нахождения промежуточных оттенков. Вычислить средний цвет между двумя строками вроде #2563EB и #10B981 напрямую невозможно. Для этого оба кода предварительно переводятся в десятичные координаты RGB, после чего к каждой паре одноименных каналов применяется формула линейной интерполяции.

Математический расчет промежуточного значения для каждого канала на заданном шаге перехода выполняется по формуле:

C(t) = C₁ + (C₂ - C₁) × t

В этом выражении используются три базовых параметра:

• C₁ - десятичное значение канала (R, G или B) начального цвета в диапазоне от 0 до 255.
• C₂ - десятичное значение одноименного канала конечного цвета.
• t - коэффициент положения точки на градиентной прямой, выраженный десятичной дробью от 0.0 (начальная точка) до 1.0 (конечная точка). Для точной середины градиента параметр t равен 0.5 .

Например, требуется найти точный центральный оттенок (при t = 0.5 ) между синим цветом #2563EB (в десятичном виде: R=37, G=99, B=235) и изумрудным #10B981 (R=16, G=185, B=129). Вычисление проводится поканально с округлением результата до ближайшего целого числа:

• Красный канал (R): 37 + (16 - 37) × 0.5 = 37 - 10.5 = 26.5 → 27 .
• Зеленый канал (G): 99 + (185 - 99) × 0.5 = 99 + 43 = 142 .
• Синий канал (B): 235 + (129 - 235) × 0.5 = 235 - 53 = 182 .

Полученный триплет rgb(27, 142, 182) представляет собой математически точную середину перехода между двумя исходными цветами.

Расчет относительной яркости и контрастности по стандарту WCAG 2.1

Одна из главных прикладных задач при проектировании пользовательских интерфейсов - проверка читаемости текста на цветном фоне. Согласно международному руководству по обеспечению доступности веб-контента WCAG 2.1, достаточная различимость элементов определяется через коэффициент контрастности (Contrast Ratio). Этот показатель вычисляется исключительно на основе десятичных значений каналов R, G и B, поскольку человеческий глаз воспринимает яркость красного, зеленого и синего спектра неравномерно.

Преобразование шестнадцатеричного кода в триплет RGB служит отправной точкой для трехэтапного алгоритма оценки контрастности:

На первом этапе восьмибитные десятичные значения каналов R₈ , G₈ и B₈ (от 0 до 255) переводятся в нормализованный диапазон от 0 до 1 путем деления на 255:

R_sRGB = R₈ / 255
G_sRGB = G₈ / 255
B_sRGB = B₈ / 255

На втором этапе к каждому из трех полученных значений применяется функция линеаризации (снятие гамма-коррекции). Если нормализованное значение канала C_sRGB меньше или равно пороговому числу 0.03928 , оно делится на 12.92 . Если значение превышает 0.03928 , расчет идет по степенной формуле:

C_lin = ((C_sRGB + 0.055) / 1.055) ^ 2.4

На третьем этапе из линеаризованных каналов R_lin , G_lin и B_lin вычисляется относительная яркость цвета (Relative Luminance, обозначается как L ) с учетом спектральной чувствительности зрения:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

Как видно из весовых коэффициентов формулы, зеленый канал формирует более 71% воспринимаемой яркости цвета, красный - около 21%, а синий - лишь чуть более 7%. Именно поэтому чистый синий цвет #0000FF (0, 0, 255) визуально кажется темным, а чистый зеленый #00FF00 (0, 255, 0) при той же максимальной интенсивности канала воспринимается как ослепительно яркий.

Когда относительная яркость рассчитана для двух цветов - например, для текста и подложки - вычисляется итоговый коэффициент контрастности по формуле стандарта WCAG 2.1:

Contrast Ratio = (L₁ + 0.05) / (L₂ + 0.05)

В этом отношении L₁ всегда обозначает относительную яркость более светлого из двух сравниваемых цветов (в диапазоне от 0 для абсолютно черного до 1 для чисто белого), а L₂ - относительную яркость более темного цвета.

Полученное числовое значение сопоставляется с нормативными порогами читаемости текста в интерфейсах:

Без предварительного разложения HEX-кода на десятичные составляющие R, G и B выполнить проверку по формуле относительной яркости невозможно, так как шестнадцатеричная запись не позволяет напрямую выделить весовой вклад каждого светового канала.

Сравнение HEX и RGB со смежными цветовыми форматами

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

Перевод HEX в десятичные значения RGB часто выступает промежуточным звеном: полученные числа от 0 до 255 служат исходными данными для математического пересчета координат цвета в другие цветовые пространства.

Цилиндрические модели представления sRGB

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

В спецификациях CSS и графических редакторах используются три основные цилиндрические модели:

• HSL и HSLA представляют цвет через тон Hue (угол на цветовом круге от 0 до 360 градусов), насыщенность Saturation и светлоту Lightness (в процентах от 0 до 100%). В этой системе стопроцентная светлота всегда дает чисто белый цвет независимо от выбранного тона и насыщенности, что упрощает генерацию палитр состояний интерфейса в CSS.
• HSV (также обозначаемая как HSB) использует координаты тона Hue, насыщенности Saturation и яркости Value или Brightness. В отличие от HSL, максимальное значение яркости здесь соответствует чистому спектральному цвету при максимальном свечении субпикселей, а не белому. Эта модель не применяется напрямую в CSS, но служит стандартом для палитр выбора цвета в графических пакетах.
• HWB опирается на тон Hue и процентное добавление белой (Whiteness) и черной (Blackness) составляющих. Формат включен в спецификацию CSS Color Level 4 и ориентирован на интуитивное смешивание чистого хроматического тона с ахроматическими примесями.

Поскольку HSL, HSV и HWB работают внутри базового пространства sRGB, любой цвет в этих нотациях однозначно конвертируется из десятичных каналов R, G и B без потери цветового охвата, за исключением минимальных погрешностей округления при переводе целых чисел в проценты и градусы.

Расширенные и аппаратно-независимые цветовые пространства

Стандарт sRGB, к которому по умолчанию привязаны форматы HEX и классическая функция rgb() , охватывает лишь около трети видимого человеческим глазом спектра и использует нелинейную гамма-коррекцию. Для работы с современными мониторами широкого охвата и физически корректного рендеринга применяются другие пространства.

При вычислениях освещения в трехмерной графике и фильтрах SVG нелинейные координаты R, G и B сначала переводятся в Linear sRGB. В этом пространстве устранена гамма-кривая, поэтому числовые значения каналов прямо пропорциональны физическому количеству излучаемого света.

Для экранов с увеличенным цветовым охватом используются расширенные профили:

• Display P3 охватывает примерно на 25% больше оттенков, чем sRGB, преимущественно в области глубоких зеленых и насыщенных красных тонов. В современных таблицах стилей для обращения к этому пространству используется функция color(display-p3 R G B) , где каналы задаются десятичными дробями от 0 до 1, так как стандартный 6-символьный HEX-код не способен адресовать цвета за пределами sRGB.
• AdobeRGB применяется в профессиональной фотографии и допечатной подготовке, обеспечивая расширенный охват в сине-зеленом секторе спектра.

Чтобы связать различные профили устройств между собой и устранить искажения восприятия, используются аппаратно-независимые и перцептивно равномерные пространства. Базовой математической моделью здесь выступает эталонное пространство CIE 1931 XYZ, описывающее отклик стандартного наблюдателя на световые волны. На его основе построены перцептивные системы, включенные в современные стандарты CSS:

• Lab (или CIELAB) и его цилиндрическая форма LCH отделяют перцептивную светлоту от хроматических осей, охватывая весь диапазон человеческого зрения.
• OKLAB и цилиндрическая модель OkLCh представляют собой усовершенствованные перцептивные пространства, в которых исправлено смещение синих оттенков в сторону фиолетового при изменении светлоты. В OkLCh цвета с одинаковым числовым параметром светлоты воспринимаются человеческим глазом как одинаково яркие, чего невозможно добиться при прямом манипулировании каналами R, G и B.

Отличие от субтрактивных полиграфических систем CMYK и PANTONE

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

Модель CMYK работает с отраженным от бумаги светом. Краски четырех базовых цветов - голубого, пурпурного, желтого и ключевого черного - наносятся на белую подложку и поглощают (вычитают) определенные длины волн из падающего спектра. Отсутствие красок дает белый цвет бумаги, а их наложение формирует темные тона. Из-за разной физической природы свечения люминофора и поглощения света пигментом цветовые охваты sRGB и CMYK не совпадают: яркие неоновые оттенки синего и зеленого с экрана (например, #00FF00 со значениями 255 в зеленом канале) невозможно воспроизвести стандартной триадной печатью без потери насыщенности. Точный перевод между RGB и CMYK невозможен по простой математической формуле и всегда требует использования аппаратных ICC-профилей конкретной печатной машины и типа бумаги.

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

Сводное сравнение цветовых моделей и форматов записи

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

Справочная таблица соответствия базовых кодов HEX и значений RGB

Для быстрой проверки граничных значений каналов, базовых оттенков и стандартных именованных цветов из спецификаций HTML и SVG удобно сверяться с готовой матрицей пересчета. Значительная часть этих кодов относится к классической палитре WEBSAFE, где каждый канал принимает одно из шести фиксированных шестнадцатеричных значений (00, 33, 66, 99, CC, FF), что в десятичном выражении дает шаг ровно в 51 единицу (0, 51, 102, 153, 204, 255). Именно такие цвета допускают запись в трехсимвольном сокращенном формате без потери точности.

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

Нюансы интерпретации базовых и ахроматических значений

При ручной проверке и работе со стандартными таблицами цветов полезно учитывать несколько закономерностей распределения числовых значений по каналам:

• Ахроматическая шкала (оттенки серого от чёрного до белого) всегда имеет строго одинаковые значения во всех трех каналах. Любое отклонение хотя бы на одну единицу, например rgb(128, 128, 129) , смещает нейтральный оттенок в сторону холодного или теплого тона.
• В спецификациях HTML и CSS системное имя Green соответствует коду #008000 с половинным уровнем свечения канала (128), тогда как чистый эталонный зелёный канал с максимальной интенсивностью (255) и кодом #00FF00 закреплен за ключевым словом Lime .
• Чистая середина восьмибитного диапазона (256 значений от 0 до 255) не является целым числом (127.5). Поэтому стандартные тёмные оттенки базовых цветов ( Maroon , Green , Navy , Olive , Purple , Teal и Gray ) используют шестнадцатеричную пару 80 , что соответствует десятичному числу 128, а не 127 (код 7F ).
• Вторичные цвета аддитивной модели образуются попарным сложением максимумов двух каналов: жёлтый сочетает максимум красного и зелёного (255, 255, 0), циан - зелёного и синего (0, 255, 255), а маджента - красного и синего (255, 0, 255).