Conversor de RGBA para RGB (fusão com o fundo)

Informe uma cor de primeiro plano semitransparente (RGBA) e uma cor de fundo para calcular a cor RGB opaca resultante da mistura das duas por alpha blending, ideal como alternativa onde rgba() não é suportado.

A fórmula do alpha blending

Converter RGBA em RGB opaco é conhecido como "alpha blending" (o operador "over"). A fórmula a seguir é aplicada independentemente aos canais R, G e B, e o resultado é arredondado para o inteiro mais próximo.

Fórmula result = foreground × alpha + background × (1 − alpha)

Dicas

  • Alguns modelos de e-mail em HTML e navegadores mais antigos (como certas versões do IE) às vezes não suportam `rgba()` ou `opacity`. Incluir o valor RGB opaco calculado aqui junto com `background-color` oferece uma alternativa segura.
  • Tanto a cor de primeiro plano quanto a de fundo aceitam o seletor de cores ou a entrada direta em HEX, permitindo colar uma cor exata já escolhida em uma ferramenta de design.
  • A opacidade (valor alfa) é ajustada com um controle deslizante de 0 a 100%. 0% é totalmente transparente (ou seja, apenas a cor de fundo) e 100% é totalmente opaco (ou seja, apenas a cor de primeiro plano).
  • Branco e preto são oferecidos como predefinições de fundo por serem os dois casos mais comparados na prática (fundos de modo claro e modo escuro). Para uma cor de substituição mais precisa, insira como valor personalizado a cor de fundo real usada na sua página.

Perguntas frequentes

Alguns clientes de e-mail (notavelmente certas versões do Outlook) e navegadores mais antigos não suportam de forma alguma a função `rgba()` do CSS nem a transparência alfa. Nesses ambientes, a parte transparente pode ser renderizada incorretamente e quebrar o design. Ao pré-calcular o valor RGB opaco resultante da mistura da sua cor com o fundo, você pode especificar uma alternativa segura para ambientes onde `rgba()` não está disponível, evitando qualquer incompatibilidade visual.

Uma cor semitransparente carrega tanto a informação da própria cor quanto a informação do fundo que aparece através dela, então o resultado visível sempre depende do fundo. A mesma cor parecerá mais escura e opaca sobre o preto, e mais clara e suave sobre o branco. Isso não é um bug — é simplesmente como o alpha blending funciona — por isso você deve especificar a cor de fundo real que usará ao calcular uma cor de substituição.

Os valores alfa do CSS são especificados como um decimal de 0 (totalmente transparente) a 1 (totalmente opaco), ou de forma equivalente como uma porcentagem de 0% a 100%. Esta ferramenta usa um controle deslizante no intervalo de 0 a 100% para que você possa ajustá-lo de forma intuitiva.

Desde que seja exibido sobre a cor de fundo exata que você especificou, o resultado será teoricamente idêntico. No entanto, isso só é válido para esse fundo específico — ao colocá-lo sobre um fundo diferente, a aparência mudará. Ao usar isso para uma alternativa, é importante especificar a cor de fundo real da página onde a cor aparecerá.
ツールくん

Curiosidade — As origens do alpha blending

O conceito de alpha blending (composição alfa) costuma ser atribuído a um artigo de 1984 intitulado "Compositing Digital Images", publicado por Thomas Porter e Tom Duff no campo da computação gráfica. Antes disso, compor um primeiro plano sobre um fundo normalmente lidava apenas com a informação de cor. Esse artigo sistematizou a ideia de combinar um quarto canal que representa a opacidade — o canal alfa — com os dados de cor, e desde então se tornou o modelo padrão usado em CG e software de edição de imagens.

Hoje em dia, quase toda tecnologia que lida com transparência se baseia nessa ideia de alpha blending: formatos de imagem como PNG e SVG, as funções `rgba()` e `opacity` do CSS, e os recursos de camadas da maioria dos softwares de desenho. O método de composição mais básico, conhecido como operador "over" (colocar um primeiro plano sobre um fundo), é exatamente a fórmula que esta ferramenta utiliza.

No entanto, os problemas de compatibilidade com clientes de e-mail antigos e navegadores legados ainda não foram totalmente resolvidos. O e-mail em HTML, em particular, é fortemente limitado pelos motores de renderização, e frequentemente as técnicas modernas de transparência em CSS simplesmente não podem ser usadas como estão — por isso pré-calcular uma cor de substituição opaca continua sendo uma técnica prática amplamente utilizada.

→ Ver todas as curiosidades