Если ввести 8-значный HEX (например, #3B82F6CC), это поле игнорируется — прозрачность берётся из последних двух знаков HEX.
Результат
Все вычисления выполняются локально в браузере: разбор, график, экспорт. Если отключите сеть, страница продолжит работать.
Факты и границы применимости
| 6-значный HEX | Непрозрачный цвет — прозрачность берётся из отдельного поля |
|---|---|
| 8-значный HEX | Последние два знака — альфа-канал в шестнадцатеричном виде (00–FF) |
| Диапазон прозрачности | От 0 (полностью прозрачно) до 1 (полностью непрозрачно) |
| Образец цвета | Показан на клетчатой подложке, чтобы прозрачность была видна |
Когда этот метод вводит в заблуждение
- 8-значный формат HEX с альфа-каналом поддерживается не во всех старых браузерах и графических редакторах — при экспорте в такие системы надёжнее использовать отдельные числовые каналы RGBA, а не HEX8.
- Если введён 8-значный HEX, значение из поля «Прозрачность» игнорируется — источник истины для альфа-канала в этом случае только сам HEX-код.
- Прозрачность округляется до двух знаков после запятой при отображении — это соответствует точности одного байта (256 градаций) альфа-канала в 8-значном HEX.
- Короткая запись (#RGB, 3 знака) поддерживается только для непрозрачных цветов — короткого варианта с альфа-каналом (4 знака) этот конвертер не распознаёт.
Как это считается
Если 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-код не содержит собственный альфа-канал.
Почему образец цвета показан на клетчатом фоне?
Это стандартный способ показать прозрачность в дизайн-инструментах — сквозь полупрозрачный цвет видна клетчатая подложка, а не просто белый фон.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.