Как конвертировать цвет HEX в RGB для вёрстки и дизайна

Цветовые форматы HEX и RGB описывают один и тот же оттенок разными способами. Первый удобен для копирования из дизайна, второй — для работы с прозрачностью, градиентами и canvas. Разберёмся, как переводить один формат в другой и когда это действительно нужно.

Что такое HEX и RGB

HEX-код — это шестнадцатеричная запись цвета. Каждая пара символов отвечает за интенсивность красного, зелёного и синего канала: #FF5733 расшифровывается как FF (красный), 57 (зелёный), 33 (синий).

RGB — десятичная система. Тот же цвет записывается как rgb(255, 87, 51), где каждое число от 0 до 255 показывает яркость канала. 255 — максимум, 0 — канал выключен.

Оба формата описывают цвет в модели RGB, где любой оттенок получается смешением красного, зелёного и синего света. Разница только в системе счисления: 16-ричная против 10-ричной.

Как конвертировать вручную

Конвертация сводится к переводу шестнадцатеричных чисел в десятичные. Берём HEX-код и разбиваем на пары:

#FF5733
 RR GG BB

Каждую пару переводим из шестнадцатеричной системы:

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

Итого: rgb(255, 87, 51).

В шестнадцатеричной системе цифры от 0 до 9 остаются собой, а буквы A–F соответствуют числам 10–15. Например, A3 = 10×16 + 3 = 163.

Для обратной конвертации делим десятичное число на 16 с остатком: 255 ÷ 16 = 15 остаток 15, что даёт FF. Но на практике проще использовать калькулятор или автоматический инструмент.

Когда нужен RGB вместо HEX

Canvas и JavaScript

Метод fillStyle в canvas принимает оба формата, но для динамических цветов удобнее RGB:

const red = 255;
const green = Math.floor(Math.random() * 255);
const blue = 87;

ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;

С HEX пришлось бы конвертировать числа в шестнадцатеричные строки и склеивать их.

Прозрачность

RGBA добавляет четвёртый параметр — альфа-канал от 0 до 1:

background: rgba(255, 87, 51, 0.7);

Современный CSS поддерживает #FF573380 (где 80 — прозрачность в HEX), но RGBA читается проще и работает везде.

Градиенты и анимации

При работе с градиентами в CSS или SVG RGB-формат удобнее редактировать:

background: linear-gradient(90deg, 
  rgb(255, 87, 51) 0%, 
  rgb(51, 87, 255) 100%
);

Числа наглядно показывают, как меняется каждый канал. В HEX это менее очевидно.

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

Photoshop, Figma и Sketch показывают RGB-значения в палитре цвета. Если нужно точно воспроизвести оттенок в коде, проще скопировать rgb(255, 87, 51), чем переводить HEX вручную.

Автоматическая конвертация в коде

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

JavaScript

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

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

Функция parseInt(string, 16) переводит строку из 16-ричной системы в число.

Python

def hex_to_rgb(hex_code):
    hex_code = hex_code.lstrip('#')
    return tuple(int(hex_code[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#FF5733')  # (255, 87, 51)

PHP

function hexToRgb($hex) {
    $hex = ltrim($hex, '#');
    return [
        'r' => hexdec(substr($hex, 0, 2)),
        'g' => hexdec(substr($hex, 2, 2)),
        'b' => hexdec(substr($hex, 4, 2))
    ];
}

Функция hexdec() конвертирует шестнадцатеричную строку в число.

Обратная конвертация: RGB в HEX

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

JavaScript

function rgbToHex(r, g, b) {
  return "#" + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}

rgbToHex(255, 87, 51); // "#ff5733"

Метод toString(16) переводит число в шестнадцатеричную строку, padStart(2, '0') добавляет ведущий ноль, если нужно.

CSS Custom Properties

Можно хранить компоненты RGB в переменных и собирать оба формата:

:root {
  --color-r: 255;
  --color-g: 87;
  --color-b: 51;
}

.element {
  background: rgb(var(--color-r), var(--color-g), var(--color-b));
  border-color: rgba(var(--color-r), var(--color-g), var(--color-b), 0.5);
}

Это удобно для тем и динамической смены палитры.

Частые ошибки

Потеря решётки. HEX-код всегда начинается с # в CSS. Без неё браузер не распознает цвет.

Короткая запись. #F53 эквивалентно #FF5533, но при конвертации это нужно учитывать — каждый символ удваивается.

Выход за диапазон. RGB-значения больше 255 браузер обрежет до максимума. В вычислениях проверяйте границы:

const clamp = (value) => Math.max(0, Math.min(255, value));

Регистр. HEX-коды нечувствительны к регистру: #FF5733 = #ff5733. Но в регулярных выражениях это нужно учитывать флагом i.

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

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

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