Conversor de Opacidade HEX

Adicione opacidade a qualquer cor HEX e obtenha #RRGGBBAA, rgba(), hsla() e a cor sólida que ela produz sobre qualquer fundo. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

Opções

Cor

Opacidade (%)

Fundo para achatar

Resultados

Transparente

Sobre branco

Sobre preto

Sobre seu fundo

Opacidade para alpha HEX

Como a opacidade funciona nas cores HEX?

Uma cor HEX pode levar transparência como um quarto par de dígitos: #RRGGBBAA, onde AA vai de 00 (totalmente transparente) a FF (opaco), então 50% de opacidade é 80 e #2563eb80 é o mesmo que rgba(37, 99, 235, 0.5). Este conversor recebe qualquer cor e uma opacidade, e a escreve como HEX de 8 dígitos, rgba(), hsla(), oklch() e o #AARRGGBB do Android, que coloca o alpha primeiro. Ele também calcula a cor sólida em que uma translúcida se transforma sobre branco, preto ou seu próprio fundo, e lista o sufixo alpha HEX de cada opacidade em passos de 5%.

Exemplos

Escrevendo a mesma cor translúcida em lugares diferentes:

CSS

/* the same 50% blue, three ways */
color: #2563eb80;
color: rgba(37, 99, 235, 0.5);
color: hsla(221, 83%, 53%, 0.5);

JavaScript

const alpha = Math.round(0.5 * 255).toString(16).padStart(2, "0"); // "80"
const withAlpha = "#2563eb" + alpha; // "#2563eb80"

Android XML

<!-- #AARRGGBB: alpha first -->
<color name="overlay">#802563EB</color>

Swift

UIColor(red: 37 / 255, green: 99 / 255, blue: 235 / 255, alpha: 0.5)

Sass

$overlay: rgba(#2563eb, 0.5);
$solid-on-white: mix(#2563eb, #fff, 50%);

Casos de uso

Overlays e véus

Escureça uma foto ou o fundo de um modal com preto ou uma cor de marca a 40% ou 60% de opacidade, e copie o valor na sintaxe que sua folha de estilos usa.

Converter valores de ferramentas de design

Figma e Sketch mostram um HEX mais uma porcentagem de opacidade. Transforme esse par em um único valor #RRGGBBAA ou rgba() para CSS.

Achatar a transparência

Alguns contextos, como emails, PDFs ou design tokens, precisam de uma cor opaca. Obtenha a cor sólida exata que uma translúcida produz sobre seu fundo real.

Android e apps multiplataforma

As cores do Android colocam o alpha primeiro (#AARRGGBB). Copie a ordem certa sem reorganizar dígitos à mão.

Perguntas frequentes

Qual é o código HEX para 50% de opacidade?

80. A opacidade é guardada em um byte de 00 a FF, então 50% é round(0.5 x 255) = 128, que é 80 em hexadecimal. A tabela da ferramenta lista cada passo de 5%, como 33 para 20% e CC para 80%.

Os navegadores suportam cores HEX de 8 dígitos?

Sim, todos os navegadores atuais e todos os que este site suporta leem #RRGGBBAA e a forma curta #RGBA. Navegadores muito antigos como o Internet Explorer não, e esse é o único motivo para preferir rgba().

Por que o formato do Android é diferente?

A classe Color do Android e seus recursos XML usam #AARRGGBB, com o alpha primeiro, enquanto o CSS usa #RRGGBBAA com o alpha no final. O mesmo azul a 50% é #802563EB no Android e #2563eb80 no CSS.

O que significa a cor sólida sobre um fundo?

Uma cor translúcida se mistura com o que está atrás dela. O valor sólido é essa mistura calculada antecipadamente, para usar onde não há transparência ou para verificar seu contraste.

Meus dados são enviados a algum servidor?

Não. Tudo é calculado no seu navegador com JavaScript puro. Nada do que você informa é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSS Gerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem