Блог
Конвертеры единиц

Конвертер HEX в RGBA

Введите HEX-код цвета — обычный (#3B82F6) или с альфа-каналом (#3B82F6CC) — и, если нужно, отдельное значение прозрачности от 0 до 1. Конвертер соберёт готовую строку RGBA с образцом цвета на прозрачной подложке.

Если ввести 8-значный HEX (например, #3B82F6CC), это поле игнорируется — прозрачность берётся из последних двух знаков HEX.

Результат

Строка rgba()
Красный (R)
Зелёный (G)
Синий (B)
Прозрачность (A)

У этой страницы вообще нет серверной части. Вставленная таблица разбирается кодом JavaScript внутри вашего же браузера, график рисуется на элементе canvas на вашей машине, файл экспорта собирается локально. Ничего не загружается, не хранится и не пишется ни в какие логи. После загрузки страницы можно отключить сеть — всё продолжит работать, и это самый простой способ проверить обещание самостоятельно.

Факты и границы применимости

6-значный HEX Непрозрачный цвет — прозрачность берётся из отдельного поля
8-значный HEX Последние два знака — альфа-канал в шестнадцатеричном виде (00–FF)
Диапазон прозрачности От 0 (полностью прозрачно) до 1 (полностью непрозрачно)
Образец цвета Показан на клетчатой подложке, чтобы прозрачность была видна

Когда этот метод вводит в заблуждение

Как это считается

Если HEX-код состоит из 8 знаков, последние два интерпретируются как альфа-канал: переводятся из шестнадцатеричного числа (0–255) в долю от 0 до 1 делением на 255.

Если HEX-код состоит из 3 или 6 знаков (без альфа-канала), прозрачность берётся из отдельного поля ввода, ограниченного диапазоном от 0 до 1.

Оставшиеся шесть знаков HEX разбираются так же, как в конвертере HEX в RGB — по паре на каждый из каналов red, green, blue.

Итоговая строка rgba() собирается из четырёх значений: трёх целых чисел R/G/B и дробного значения прозрачности, округлённого до двух знаков.

Вопросы и ответы

Что такое 8-значный HEX?

Обычный 6-значный HEX-код цвета с добавленными двумя знаками альфа-канала в конце — например, #3B82F6CC, где «CC» задаёт прозрачность.

Как задать прозрачность, если у меня обычный 6-значный HEX?

Введите нужное значение от 0 до 1 в отдельное поле «Прозрачность» — оно используется, только если HEX-код не содержит собственный альфа-канал.

Почему образец цвета показан на клетчатом фоне?

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

Мои данные куда-то отправляются?

Нет, весь расчёт выполняется в вашем браузере.

Похожие утилиты

Все утилиты