Преобразование цветовых моделей RGB и HEX¶

RGB to HEX — процесс преобразования цвета из аддитивной цветовой модели RGB (Red, Green, Blue) в шестнадцатеричное представление HEX, используемое преимущественно в веб-дизайне и компьютерной графике для задания цвета. В модели RGB каждый цвет описывается тремя числами (каналами) от 0 до 255, а в HEX — шестизначным шестнадцатеричным числом, где первые две цифры отвечают за красный канал, вторые две — за зелёный, последние две — за синий.

¶Цветовые модели

¶Модель RGB

Модель RGB основана на физиологии восприятия цвета человеческим глазом. Сетчатка содержит три типа колбочек, чувствительных к длинноволновой (красной), средневолновой (зелёной) и коротковолновой (синей) части спектра. Смешивая эти три базовых цвета с различной интенсивностью, можно получить большинство видимых человеком оттенков. В компьютерной технике интенсивность каждого канала обычно кодируется одним байтом, что даёт 256 градаций (от 0 до 255). Таким образом, модель RGB описывает 16 777 216 возможных цветов (256³).

¶Модель HEX

HEX (от англ. hexadecimal — шестнадцатеричный) — это способ записи того же цвета, что и RGB, но в другой системе счисления. Вместо трёх десятичных чисел от 0 до 255 используются три пары шестнадцатеричных цифр от 00 до FF. Шестнадцатеричная система счисления имеет основание 16 и использует цифры 0–9 и буквы A–F (где A = 10, B = 11, C = 12, D = 13, E = 14, F = 15). Запись обычно начинается с символа решётки (#), например, #FF0000 — чистый красный, #00FF00 — чистый зелёный, #0000FF — чистый синий, #FFFFFF — белый, #000000 — чёрный.

¶Алгоритм преобразования

¶Прямое преобразование (RGB → HEX)

Для перевода цвета из RGB в HEX необходимо выполнить следующие действия:

Взять десятичное значение каждого канала (R, G, B).
Разделить каждое значение на 16. Целая часть от деления даёт первую шестнадцатеричную цифру, остаток — вторую.
Заменить числа 10–15 на буквы A–F.
Объединить полученные пары в строку вида #RRGGBB.

Например, для цвета RGB(255, 128, 0):

Красный: 255 ÷ 16 = 15 (остаток 15) → FF
Зелёный: 128 ÷ 16 = 8 (остаток 0) → 80
Синий: 0 ÷ 16 = 0 (остаток 0) → 00
Результат: #FF8000 (оранжевый).

¶Обратное преобразование (HEX → RGB)

Обратный процесс выполняется следующим образом:

Убрать символ # из строки.
Разбить строку на три пары символов.
Каждую пару перевести из шестнадцатеричной системы в десятичную: первую цифру умножить на 16, прибавить вторую цифру.
Полученные три числа и будут значениями каналов RGB.

Например, для цвета #336699:

33 → 3×16 + 3 = 51
66 → 6×16 + 6 = 102
99 → 9×16 + 9 = 153
Результат: RGB(51, 102, 153).

¶Сокращённая запись HEX

Для цветов, где каждый канал состоит из двух одинаковых цифр (например, #FF0000, #00FF00, #FFFFFF), допустима сокращённая трёхзначная запись: #F00, #0F0, #FFF. Браузеры и программы автоматически интерпретируют трёхзначный HEX как шестизначный, удваивая каждую цифру. Это свойство используется для экономии места в CSS-коде.

¶Применение

¶Веб-разработка

HEX-коды являются стандартом де-факто в каскадных таблицах стилей (CSS). Свойство color и background-color принимают значения в формате #RRGGBB. Преимущество HEX перед RGB в CSS заключается в компактности записи: #4285F4 короче, чем rgb(66, 133, 244). Кроме того, HEX-коды удобно копировать из графических редакторов.

¶Графические редакторы

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

¶Программирование

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

``javascript function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } ``

В Python аналогичная функция использует форматирование строк: '#%02x%02x%02x' % (r, g, b). Многие библиотеки (PIL, OpenCV) предоставляют встроенные методы для таких преобразований.

¶Автоматические инструменты

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

¶Особенности и ограничения

¶Точность

Преобразование между RGB и HEX является взаимно однозначным, поскольку обе модели описывают одно и то же цветовое пространство с одинаковой разрядностью (8 бит на канал). Потери точности не происходит. Однако при переводе из других моделей (HSL, HSV, CMYK) в RGB и далее в HEX возможны округления.

¶Символ решётки

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

¶Регистр символов

Буквы A–F в HEX-записи могут быть как заглавными, так и строчными. Оба варианта (#FF0000 и #ff0000) эквивалентны и корректно обрабатываются браузерами и программами. Выбор регистра — вопрос соглашения о стиле кода.

¶Связь с другими форматами

¶RGBA и ARGB

Для задания прозрачности используется расширенный формат RGBA, где добавляется четвёртый канал — альфа (от 0 до 1 или от 0 до 255). В HEX-записи прозрачность может быть добавлена как четвёртая пара цифр: #RRGGBBAA. Например, #FF000080 — полупрозрачный красный. Однако поддержка восьмизначного HEX в CSS появилась относительно недавно (CSS Color Module Level 4), поэтому для совместимости чаще используют функцию rgba().

¶HSL

Модель HSL (Hue, Saturation, Lightness) описывает цвет через тон, насыщенность и светлоту. Преобразование RGB в HSL требует более сложных вычислений и используется в случаях, когда необходимо менять яркость или насыщенность цвета программно. Современные браузеры поддерживают функцию hsl() в CSS, что позволяет задавать цвет без предварительного перевода в HEX.

¶История

Шестнадцатеричная запись цветов появилась вместе с развитием веб-технологий в начале 1990-х годов. Первоначально в HTML цвет задавался английскими названиями (red, blue, green) или RGB-триплетами в десятичной системе. Однако с ростом популярности CSS в конце 1990-х годов HEX-формат стал основным, так как позволял точнее и компактнее описывать цвета. Спецификация HTML 3.2 (1997 год) официально закрепила использование HEX-кодов для атрибутов цвета.