Como converter HEX para RGBA?

Separe o HEX em três pares (RR, GG, BB), converta cada par de hexadecimal para decimal (0-255) e acrescente o alfa de 0 a 1. Exemplo: #2563EB com 50% de opacidade → 25 = 37, 63 = 99, EB = 235 → rgba(37, 99, 235, 0.5).

Como colocar transparência em uma cor HEX?

Acrescente dois dígitos ao final do código, no formato #RRGGBBAA. Esse último par é o canal alfa: FF é totalmente opaco, 80 equivale a 50% e 00 é totalmente transparente. Exemplo: #2563EB80.

Qual o código hexadecimal para 50% de opacidade?

É 80. O canal alfa vai de 0 a 255, e 50% de 255 dá 127,5, que arredonda para 128 — 80 em hexadecimal. Para outras porcentagens, consulte a tabela de opacidade nesta página.

Qual a diferença entre rgba() e a propriedade opacity?

O alfa do rgba() (ou do HEX de 8 dígitos) deixa transparente apenas aquela cor — o fundo, a borda ou o texto em que ela foi aplicada. A propriedade opacity atua no elemento inteiro, incluindo o texto e os elementos filhos.

Conversor HEX para RGBA com Opacidade e Transparência

HEX para RGBA: cores com transparência no CSS

Converter HEX para RGBA é a forma mais direta de aplicar transparência a uma cor que você já tem em hexadecimal. Este conversor lê HEX de 6 ou 8 dígitos, rgba() e hsla(), ajusta a opacidade e devolve os três formatos prontos para colar no CSS. Tudo roda no navegador, sem enviar nada.

Como usar o conversor

Digite ou cole a cor no campo de entrada (#2563EB, #2563EB80, rgba(37, 99, 235, 0.5), hsla(217, 91%, 53%, 0.5)) ou escolha a cor base no seletor visual.
Ajuste a opacidade de 0% a 100% no controle deslizante.
Confira o resultado na pré-visualização sobre o fundo quadriculado, que deixa a transparência visível.
Copie o HEX de 8 dígitos, o rgba(), o hsla() ou a linha de CSS pronta.

Como funciona o canal alfa

O canal alfa define o quanto a cor é opaca. Cada formato escreve o mesmo valor de um jeito:

Formato	Onde fica o alfa	Exemplo (50%)
HEX de 8 dígitos	último par, de `00` a `FF`	`#2563EB80`
`rgba()`	quarto valor, de 0 a 1	`rgba(37, 99, 235, 0.5)`
`hsla()`	quarto valor, de 0 a 1	`hsla(217, 91%, 53%, 0.5)`

No HEX, o par do alfa é a opacidade aplicada à escala de 0 a 255, arredondada e escrita em hexadecimal: opacidade (%) × 255 ÷ 100. Para 50%, a conta dá 127,5, que arredonda para 128 — 80 em hexadecimal.

Tabela de opacidade em hexadecimal

Opacidade	Alfa no rgba()	Par HEX
100%	1	`FF`
95%	0.95	`F2`
90%	0.9	`E6`
85%	0.85	`D9`
80%	0.8	`CC`
75%	0.75	`BF`
70%	0.7	`B3`
65%	0.65	`A6`
60%	0.6	`99`
55%	0.55	`8C`
50%	0.5	`80`
45%	0.45	`73`
40%	0.4	`66`
35%	0.35	`59`
30%	0.3	`4D`
25%	0.25	`40`
20%	0.2	`33`
15%	0.15	`26`
10%	0.1	`1A`
5%	0.05	`0D`
0%	0	`00`

Casos de uso comuns

Overlay escuro sobre imagens e fundo de modais
Sombras suaves em box-shadow
Bordas e divisórias discretas, que se adaptam ao fundo
Estados de hover e desabilitado a partir da mesma cor base

Dicas

O alfa da cor afeta só aquela cor; a propriedade opacity deixa o elemento inteiro transparente, inclusive o texto e os filhos.
No CSS a ordem é #RRGGBBAA, com o alfa no fim. Os recursos de cor do Android usam #AARRGGBB, com o alfa no começo — confira antes de reaproveitar o código.
Ainda não definiu a cor base? Escolha o tom no seletor de cores e traga o HEX para cá.
Vai usar a cor em um degradê? Monte a transição no gerador de gradiente CSS — a sintaxe de cada tipo está no guia como criar gradientes CSS.
Para conferir a conta de cada par hexadecimal, use o conversor de bases numéricas.
A matemática entre HEX, RGB e HSL está no guia de conversão de cores CSS.

Exemplos

Azul primário com 50% de opacidade

Entrada

#2563EB + opacidade 50%

Saída

#2563EB80 · rgba(37, 99, 235, 0.5) · hsla(217, 91%, 53%, 0.5)

Preto translúcido para overlay

Entrada

rgba(0, 0, 0, 0.6)

Saída

#00000099 · hsla(0, 0%, 0%, 0.6)

HEX de 8 dígitos para RGBA

Entrada

#FF000033

Saída

rgba(255, 0, 0, 0.2) · hsla(0, 100%, 50%, 0.2)

Perguntas Frequentes