Converta HEX e RGBA sem perder a transparência

Se uma cor translúcida ficar sólida após copiá-la, verifique qual saída você copiou. Uma cor HEX de seis dígitos contém vermelho, verde e azul; não tem canal alfa. No conversor de cores, use HEX · com alfa, RGBA, HSLA ou CSS moderno quando quiser manter a transparência.

Experimente rgba(255, 136, 0, 0.5) em Cor para converter. A prévia mostra o mesmo laranja sobre um fundo quadriculado, branco e escuro. As saídas sólidas e translúcidas ficam juntas, então a escolha importa.

Copie a saída que mantém o alfa

Para essa entrada, a ferramenta gera:

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

Use o botão de copiar ao lado do formato que você precisa. Copiar variáveis CSS fornece duas variáveis: --color é opaca e --color-alpha preserva a transparência na sintaxe RGB moderna. Escolher a primeira variável para uma sobreposição a tornará sólida, mesmo que a segunda variável esteja presente no mesmo trecho.

Você pode baixar os exemplos CSS e testá-los na sua própria folha de estilos. A notação não escolhe seu elemento ou propriedade CSS para você.

Por que 50% vira cerca de 50,2% no HEX

O CSS usa os dois últimos dígitos de uma cor HEX de oito dígitos para alfa. 00 é totalmente transparente e FF é totalmente opaco; a referência HEX do MDN documenta a ordem e a sintaxe abreviada.

Existem 256 valores possíveis para o byte alfa. O meio entre 0 e 255 é 127,5, então este conversor arredonda 50% para 128, escrito como 80. Ler esse byte de volta dá 128 ÷ 255, ou cerca de 50,1961%.

Cole #FF880080 de volta na entrada. A ferramenta mostra rgba(255, 136, 0, 0.501961). Essa pequena mudança é quantização, não uma segunda configuração de opacidade. Mantenha a forma decimal do alfa quando precisar reter exatamente 0,5; valores decimais exibidos ainda podem ser arredondados para outras entradas.

HEX curto pode esconder uma diferença maior

Estas entradas são fáceis de confundir:

Cada dígito no HEX de quatro dígitos é duplicado. O último 8 vira 88, não 80, então a forma curta acima não é um atalho para 50%. Os resultados da conversão incluem as três entradas e o exemplo laranja.

Verifique o fundo antes de usar

Valores de cor iguais não garantem a mesma aparência em todas as superfícies. As prévias branca e escura do conversor ajudam a perceber que uma sobreposição depende do que está atrás. Para texto, verifique também o par texto/fundo real; nosso guia de contraste explica essa verificação separada.

Este conversor aceita as entradas HEX, RGB, HSL e HSV listadas. Ele não resolve variáveis CSS, cores nomeadas além de transparent, nem espaços de cor wide-gamut. Sua saída CMYK é uma aproximação sem perfil de impressão, e a notação HSV/CMYK não é um valor CSS para colar em uma folha de estilos.

Testamos estes exemplos na ferramenta em 21 de outubro de 2026. O registro dos resultados preserva os canais analisados e as saídas formatadas; não é um teste de calibração de tela ou cor para impressão.