HEX в RGB: конвертация цветовых форматов

Введение

Цвета в вебе описываются десятками способов, но два формата встречаются чаще всего — это HEX и RGB. Первый вы видите в дизайн-макетах Figma и Sketch, второй — в стилях, инспекторе браузера и JavaScript-библиотеках для работы с графикой. Понимать, как устроены обе модели и как переводить одну в другую, необходимо фронтенд-разработчику, дизайнеру и верстальщику. В этой статье разберём, что такое HEX и RGB, в чём между ними разница, как выполнять конвертацию вручную и почему в современных проектах всё чаще используется HSL. Для быстрого перевода без формул используйте наш конвертер HEX в RGB — он работает прямо в браузере и не требует установки.

Что такое HEX и почему он популярен

HEX (от hexadecimal — шестнадцатеричный) — это способ записи цвета в системе счисления с основанием 16. В ней используются цифры от 0 до 9 и буквы от A до F, где A = 10, а F = 15. Один байт, то есть значение от 0 до 255, в шестнадцатеричной системе записывается ровно двумя символами: от 00 до FF.

Стандартная HEX-запись цвета в вебе состоит из символа решётки и шести знаков после неё. Первые два знака задают красный канал (Red), следующие два — зелёный (Green), последние два — синий (Blue). Например,#FF5733 означает: красный = 255, зелёный = 87, синий = 51. В формате RGB это запишется как rgb(255, 87, 51).

Причина популярности HEX — компактность. Шесть знаков короче, чем три числа от 0 до 255, разделённые запятыми. Кроме того, HEX удобен для восприятия: визуально заметно, что #FFFFFF — белый, а#000000 — чёрный. Именно поэтому HEX используют дизайнеры в макетах и брендбуках, а также включают в спецификации Tailwind, Material Design и других дизайн-систем.

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

Если в каждой паре символов обе цифры совпадают, CSS допускает сокращённую запись из трёх знаков. Например, #FFFразворачивается в #FFFFFF, а #A33 — в#AA3333. Это сокращает размер CSS-файла и упрощает чтение.

RGB: модель аддитивного смешения

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

В CSS RGB-цвет записывается функцией rgb():

background: rgb(255, 87, 51);
color: rgb(0, 0, 0);
border-color: rgb(255, 255, 255);

Удобство RGB в том, что каждый канал виден как число. Это позволяет легко менять оттенок программно — например, увеличить красный на 10 или уменьшить синий вдвое. В JavaScript это особенно полезно при анимациях и динамической генерации палитры.

RGBA и прозрачность

Чтобы добавить прозрачность, используют функцию rgba() с четвёртым параметром — alpha. Значение alpha лежит в диапазоне от 0 (полностью прозрачно) до 1 (полностью непрозрачно):

background: rgba(255, 87, 51, 0.5);
/* полупрозрачный оранжево-красный */

В HEX прозрачность тоже можно задать — добавлением седьмого и восьмого символов. Например, #FF573380 — тот же цвет с alpha = 0x80 / 0xFF ≈ 0.5. Эта запись называется HEX8 и поддерживается во всех современных браузерах, но встречается реже, чем rgba().

Как перевести HEX в RGB вручную

Алгоритм перевода прост. Разбиваем HEX-строку на три пары символов, каждую пару воспринимаем как шестнадцатеричное число и переводим в десятичную систему. Формула для одной пары:

value = firstDigit * 16 + secondDigit

Например, для #FF5733:

• FF = 15 × 16 + 15 = 255
• 57 = 5 × 16 + 7 = 87
• 33 = 3 × 16 + 3 = 51

Итог: rgb(255, 87, 51). На практике подобные расчёты удобно поручать функции JavaScript:

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return { r, g, b };
}

hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }

Обратный перевод выполняется функцией toString(16):

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

Сравнение форматов: что выбрать

HEX и RGB описывают один и тот же цвет — разница только в записи. Но на практике выбор формата влияет на читаемость и поддерживаемость кода. Сравним по ключевым параметрам:

Когда выбирать HEX

HEX оптимален для брендовых цветов, дизайн-токенов и переменных в Tailwind, SCSS или CSS-переменных. Дизайнеры передают цвета в HEX, и сохранение формата упрощает синхронизацию между макетом и кодом.

Когда выбирать RGB или RGBA

RGB удобен, когда значение цвета вычисляется в JavaScript или когда нужно явно указать прозрачность. RGBA — единственный осмысленный выбор для слоёв с прозрачностью в старых проектах, не поддерживающих HEX8. Также RGB-запись понятнее для тех, кто только начинает работать с цветом.

HEX, RGB и другие форматы в CSS

Современный CSS поддерживает несколько способов описать один и тот же цвет. Все эти записи эквивалентны:

/* Один и тот же оранжево-красный */
background: #FF5733;
background: rgb(255, 87, 51);
background: hsl(11, 100%, 60%);
background: color(display-p3 1 0.34 0.2);
background: oklch(0.65 0.21 34);

HSL и OKLCH удобнее, когда нужно менять оттенок, насыщенность или светлоту независимо. Подробнее об этом — в статье проHSL цветовую модель. А для проверки контраста между двумя цветами используйтеинструмент проверки контраста — он считает коэффициент по стандарту WCAG.

Новые цветовые функции CSS

В CSS Color Module Level 4 появилась функция color-mix(), которая умеет смешивать два цвета в любом формате. Например:

background: color-mix(in srgb, #FF5733 60%, #FFFFFF);
/* 60% оранжево-красного + 40% белого */

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

Прозрачность и смешение цветов

Прозрачность в вебе — не только визуальный эффект, но и инструмент композиции. RGBA-слой поверх другого цвета математически смешивается по формуле «альфа-композитинга»:

result = foreground * alpha + background * (1 - alpha)

Например, если наложить rgba(255, 0, 0, 0.5) на белый фон, результат будет rgb(255, 128, 128) — бледно-розовый. Понимание этой формулы помогает предсказывать результат до рендеринга и выбирать подходящую степень прозрачности для оверлеев, плашек и модальных окон.

Частые ошибки при работе с HEX и RGB

• Пропущенная решётка. В CSS FF5733 без# — это невалидное значение, и правило игнорируется.
• Смешивание регистров. Технически #ff5733и #FF5733 одинаковы, но в проекте лучше держать единый стиль. Чаще используют верхний регистр для лучшей читаемости.
• Невалидные значения в RGB. Значения больше 255 или отрицательные числа браузер обрежет, но в JavaScript это даст некорректный цвет. Всегда валидируйте ввод.
• Забытый alpha в RGBA. Если в функции rgba()указать только три значения, синтаксис останется валидным, но прозрачность не применится — используйте rgb(), если альфа не нужна.

Инструменты для конвертации и подбора цветов

ConvertHub предлагает набор цветовых утилит, которые покрывают большинство задач без установки:

• HEX в RGB — мгновенный перевод цвета в десятичную запись.
• RGB в HEX — обратная конвертация.
• HEX в HSL — перевод в модель, удобную для подбора оттенков.
• Пипетка цвета — подбор цвета в визуальном интерфейсе.
• Генератор палитры — создание цветовых схем на основе одного цвета.

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

Заключение

HEX и RGB — две формы записи одного и того же цвета. HEX компактнее и привычнее в дизайне, RGB нагляднее для программных манипуляций и прозрачности. Умение переводить форматы друг в друга — базовый навык, который экономит время при работе с макетами и стилями. Для повседневных задач используйте наш онлайн конвертер HEX в RGB — это быстрее, чем писать функцию парсинга в каждом проекте. А если вы хотите глубже разобраться в цветовых моделях, читайте статью про HSL и проосновы теории цвета.