Как пользоваться: HEX в RGBA конвертер
- Введите или вставьте HEX-код, например
#ff6347, или выберите цвет с помощью образца. - Передвиньте ползунок прозрачности (от 0 до 1), чтобы задать степень прозрачности. Шахматный фон в превью покажет результат.
- Нажмите Копировать рядом с нужным форматом:
rgba(), современныйrgb(), 8-значный HEX, HSLA или OKLCH. - Вставьте значение
rgba()или 8-значный HEX, чтобы выполнить обратное преобразование: ползунок подхватит альфа-канал.
Что делает конвертер HEX в RGBA?
HEX-код вида #FF6347 состоит из трёх пар шестнадцатеричных цифр: красный FF (255), зелёный 63 (99) и синий 47 (71). В классическом шестизначном формате HEX нет места для прозрачности, поэтому, когда нужен полупрозрачный оверлей, тень или состояние при наведении, его переводят в rgba(255, 99, 71, 0.5). Четвёртое значение — альфа-канал от 0 (невидимый) до 1 (полностью непрозрачный).
Как работает преобразование
Каждая пара из двух цифр переводится из шестнадцатеричной системы в десятичную: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. Трёхзначная сокращённая запись, например #f63, раскрывается удвоением каждой цифры (#ff6633). Выбранная прозрачность добавляется без изменений.
Какой синтаксис выбрать?
| Синтаксис | Пример | Примечания |
|---|---|---|
| Классический rgba() | rgba(255, 99, 71, 0.5) | Работает везде, включая очень старые браузеры и почтовые клиенты. |
| Современный rgb() | rgb(255 99 71 / 50%) | CSS Color Level 4: значения через пробел, альфа после косой черты. Поддерживается всеми современными браузерами. |
| 8-значный HEX | #ff634780 | Последняя пара — альфа-канал (80 в hex = 128 ≈ 50%). Удобно в дизайн-инструментах и полях цвета Webflow. |
| Переменная каналов | rgb(var(--color) / .5) | Храните только каналы в пользовательском свойстве и меняйте прозрачность для каждого случая — так делает Tailwind. |
Прозрачность элемента и альфа-канал
Свойство CSS opacity делает прозрачным весь элемент вместе с текстом и вложенными элементами. Фон в RGBA делает прозрачным только сам цвет, поэтому текст поверх остаётся полностью читаемым. Для оверлеев на изображениях и тонированных карточек обычно нужен RGBA (или color-mix()). Учитывайте, что полупрозрачный цвет текста меняет контраст в зависимости от того, что находится за ним, — проверьте результат с помощью проверки контраста.
Также ищут как: hex в rgb, rgba онлайн, прозрачность цвета, альфа канал css, hex8, rgba в hex.
Инструменты, которые хорошо сочетаются с HEX в RGBA конвертер
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- Конвертер цвета OKLCH — Изучайте перцептивно равномерное цветовое пространство OKLCH с ползунками в реальном времени, проверяйте, входит ли цвет в sRGB, и копируйте соответствующие запасные значения HEX, RGB и HSL.
- Смеситель цветов — Выберите два цвета и количество шагов, чтобы получить равномерно смешанные промежуточные цвета.
- Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
Часто задаваемые вопросы
Как вручную перевести HEX в RGBA?
#336699 с прозрачностью 70% станет rgba(51, 102, 153, 0.7).Чему равна прозрачность 50% в HEX?
80 в hex, — значит, чёрный цвет с прозрачностью 50% это #00000080. 25% — это 40, 75% — это BF.Устарела ли функция rgba()?
rgba() считается синонимом rgb(), и обе функции принимают альфа-значение. Синтаксис с запятыми работает во всех браузерах.Можно ли перевести RGBA обратно в HEX?
rgba() в поле ввода. Вы получите непрозрачный HEX и 8-значный HEX, который включает альфа-канал.