Como usar: Conversor HEX para RGBA
- Digite ou cole um código HEX, como
#ff6347, ou escolha uma cor no seletor. - Arraste o slider de opacidade (0 a 1) para definir a transparência. A prévia com fundo xadrez mostra o resultado.
- Clique em Copiar ao lado do formato que você precisa:
rgba(),rgb()moderno, HEX de 8 dígitos, HSLA ou OKLCH. - Cole um valor
rgba()ou HEX de 8 dígitos para converter no sentido inverso. O slider pega o valor de alfa automaticamente.
O que faz um conversor de HEX para RGBA?
Um código HEX como #FF6347 é formado por três pares de dígitos hexadecimais: vermelho FF (255), verde 63 (99) e azul 47 (71). No formato clássico de seis dígitos, o HEX não tem espaço para transparência. Por isso, quando você precisa de uma sobreposição semitransparente, uma sombra ou um estado de hover, converte o código para rgba(255, 99, 71, 0.5), em que o quarto valor é o canal alfa, de 0 (invisível) a 1 (sólido).
Como a conversão funciona
Cada par de dois dígitos é convertido da base 16 para a base 10: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. A forma abreviada de três dígitos, como #f63, é expandida duplicando cada dígito (#ff6633). O alfa escolhido é adicionado sem alterações.
Qual sintaxe devo usar?
| Sintaxe | Exemplo | Observações |
|---|---|---|
| rgba() tradicional | rgba(255, 99, 71, 0.5) | Funciona em todos os lugares, incluindo navegadores muito antigos e clientes de e-mail. |
| rgb() moderno | rgb(255 99 71 / 50%) | CSS Color Level 4, com valores separados por espaço e alfa depois de uma barra. Suportado por todos os navegadores atuais. |
| HEX de 8 dígitos | #ff634780 | O último par é o alfa (80 em hex = 128 ≈ 50%). Prático em ferramentas de design e nos campos de cor do Webflow. |
| Variável de canais | rgb(var(--color) / .5) | Guarde apenas os canais em uma propriedade customizada e varie a opacidade em cada uso. É o padrão que o Tailwind usa. |
Opacidade vs. alfa
A propriedade CSS opacity desvanece um elemento inteiro, incluindo seu texto e seus filhos. Já um fundo RGBA só torna a própria cor transparente, então o texto por cima continua totalmente legível. Para sobreposições sobre imagens e cards com tom, RGBA (ou color-mix()) geralmente é o que você quer. Lembre que cores de texto semitransparentes mudam o contraste conforme o que está por trás delas. Confira o resultado com o Verificador de Contraste.
Também pesquisado como: hex para rgb, rgba, opacidade, transparência, alfa, hex8, rgba para hex.
Ferramentas que combinam com: Conversor HEX para RGBA
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Conversor OKLCH — Explore o espaço de cor OKLCH, perceptualmente uniforme, com controles deslizantes em tempo real, veja se a cor cabe no sRGB e copie os fallbacks HEX, RGB e HSL correspondentes.
- Mixer de Cores — Escolha duas cores e a quantidade de passos para obter cores de transição misturadas uniformemente — perfeitas para gradientes, bordas, gráficos e estados de hover.
- Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
Perguntas frequentes
Como converto HEX para RGBA manualmente?
#336699 com 70% vira rgba(51, 102, 153, 0.7).Quanto é 50% de opacidade em HEX?
80 em hex. Logo, 50% de preto é #00000080. 25% é 40 e 75% é BF.O rgba() está obsoleto?
rgba() como um alias de rgb(), e os dois aceitam um valor de alfa. A sintaxe com vírgulas continua funcionando em todos os navegadores.Dá para converter RGBA de volta para HEX?
rgba() no campo de entrada. Você recebe o HEX opaco e um HEX de 8 dígitos que inclui o canal alfa.