Как конвертировать RGB с прозрачностью в HEX для CSS и дизайна

Дизайнер прислал вам цвет rgba(255, 100, 50, 0.8) в макете, а в CSS нужен HEX. Или наоборот — в старом коде нашли #FF6432CC, и непонятно, какая там прозрачность. Разбираемся, как конвертировать цвета между форматами, когда это нужно и какие подводные камни учесть.

Что такое RGB, RGBA и HEX

RGB — это способ задать цвет через три канала: Red (красный), Green (зелёный), Blue (синий). Каждый канал принимает значение от 0 до 255. Например, rgb(255, 0, 0) — чистый красный.

RGBA добавляет четвёртый параметр — Alpha (прозрачность). Значение от 0 (полностью прозрачный) до 1 (непрозрачный). Цвет rgba(255, 100, 50, 0.8) — это оранжевый с 80% непрозрачности.

HEX — шестнадцатеричная запись того же RGB. Формат #RRGGBB, где каждая пара символов — значение канала в hex (00–FF). Тот же красный: #FF0000. Для прозрачности существует расширенный формат #RRGGBBAA, где AA — альфа-канал в hex.

Когда нужна конвертация

Работа с макетами. Figma, Sketch и Adobe XD показывают цвета в RGB/RGBA. При экспорте стилей в CSS часто получаете RGBA, но не все браузеры одинаково обрабатывают прозрачность — иногда удобнее HEX.

Легаси-код. В старых проектах встречаются 8-значные HEX (#FF6432CC). Чтобы понять, какой там цвет и прозрачность, придётся конвертировать в RGBA.

Оптимизация CSS. HEX короче: #F64 вместо rgb(255, 102, 68). Для минификации каждый байт на счету.

Работа с Canvas API. JavaScript-методы fillStyle принимают любой формат, но если генерируете цвета программно, проще работать с RGB и конвертировать в HEX для вывода.

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

Возьмём rgb(255, 100, 50):

1. Переведите каждое значение в шестнадцатеричное
2. Red: 255 = FF
3. Green: 100 = 64 (6×16 + 4)
4. Blue: 50 = 32 (3×16 + 2)
5. Склейте: #FF6432

Для калькуляции в уме: делите число на 16, остаток — вторая цифра. Частное — первая. 100 ÷ 16 = 6 (остаток 4) → 64.

С прозрачностью сложнее. Alpha 0.8 нужно умножить на 255 и перевести в hex: 0.8 × 255 = 204 = CC. Итого: #FF6432CC.

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

Разберём #FF6432CC:

1. Разделите на пары: FF, 64, 32, CC
2. Переведите каждую в десятичное
3. FF = 255, 64 = 100, 32 = 50, CC = 204
4. Alpha: 204 ÷ 255 ≈ 0.8
5. Результат: rgba(255, 100, 50, 0.8)

Короткая запись #RGB разворачивается в #RRGGBB: #F64 = #FF6644.

Подводные камни

Поддержка в браузерах. Формат #RRGGBBAA появился в CSS Colors Level 4. IE11 его не понимает — нужен фолбэк с rgba() или отдельное свойство без прозрачности.

.element {
  background: #FF6432; /* фолбэк */
  background: #FF6432CC; /* с прозрачностью */
}

Округление alpha. При конвертации 0.8 → 204 → 0.8 всё совпадает. Но 0.33 × 255 = 84.15 → 84 → 0.329. Погрешность накапливается. Для точности храните исходное значение в RGBA.

Цветовые профили. RGB в Photoshop (Adobe RGB) и в браузере (sRGB) — разные вещи. Конвертация не учитывает профиль, цвет может выглядеть иначе. Экспортируйте из дизайна в sRGB.

Прозрачность и наложение. rgba(255, 100, 50, 0.5) на белом фоне выглядит не так, как на чёрном. HEX с alpha ведёт себя так же — это не «полупрозрачный красный», а «красный, сквозь который просвечивает 50% подложки».

Автоматизация в коде

JavaScript-функция RGB → HEX:

function rgbToHex(r, g, b, a = 1) {
  const toHex = (n) => {
    const hex = Math.round(n).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  
  let hex = '#' + toHex(r) + toHex(g) + toHex(b);
  if (a < 1) {
    hex += toHex(a * 255);
  }
  return hex.toUpperCase();
}

console.log(rgbToHex(255, 100, 50, 0.8)); // #FF6432CC

HEX → RGBA:

function hexToRgba(hex) {
  hex = hex.replace('#', '');
  
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  const a = hex.length === 8 
    ? (parseInt(hex.slice(6, 8), 16) / 255).toFixed(2)
    : 1;
  
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

console.log(hexToRgba('#FF6432CC')); // rgba(255, 100, 50, 0.80)

В Python для генерации палитр:

def rgb_to_hex(r, g, b, a=1.0):
    hex_color = f'#{r:02X}{g:02X}{b:02X}'
    if a < 1.0:
        hex_color += f'{int(a * 255):02X}'
    return hex_color

print(rgb_to_hex(255, 100, 50, 0.8))  # #FF6432CC

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

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

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