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) |
|---|
O que significa converter RGBA para RGB
Uma cor RGBA semitransparente funciona bem no CSS moderno e nas ferramentas de design, mas não é exibida como esperado em ambientes que não conseguem interpretar transparência, como muitos clientes de e-mail e motores de renderização mais antigos. Esta ferramenta recebe uma cor de primeiro plano (RGBA) e uma cor de fundo, e calcula a cor RGB opaca e fundida que seria realmente visível após a composição das duas — entregando o resultado em um formato que você pode usar diretamente como alternativa em ambientes onde a transparência não é suportada.
O cálculo se baseia em um método de composição conhecido como "alpha blending" (o operador "over"): cada canal (R, G e B) da cor de primeiro plano é multiplicado pelo valor alfa, cada canal correspondente da cor de fundo é multiplicado por (1 − valor alfa), e os dois produtos são somados. Como essa fórmula é aplicada de forma independente a cada um dos três canais, a mesma cor semitransparente produz um resultado completamente diferente dependendo do fundo sobre o qual é colocada. Ao preparar uma cor de substituição, é essencial especificar a cor de fundo exata sobre a qual o elemento realmente será exibido.
Como usar o conversor de RGBA para RGB
- Especifique a cor de primeiro plano (semitransparente) Escolha-a com o seletor de cores ou cole um código HEX que você já tenha confirmado em uma ferramenta de design.
- Ajuste a opacidade (valor alfa) Defina a transparência com o controle deslizante de 0 a 100%. Combine com o valor que você realmente usa no seu CSS.
- Especifique a cor de fundo Use os botões predefinidos de branco ou preto, ou insira um valor personalizado próximo do fundo real da sua página.
- Verifique o resultado fundido (RGB opaco) O código HEX e a string RGB são calculados instantaneamente, junto com uma comparação lado a lado de como a cor aparece sobre branco e sobre preto.
- Cole o valor RGB calculado como alternativa Copie-o diretamente em propriedades como `background-color`, onde `rgba()` não é suportado.
Dicas para aproveitar melhor
- 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.
Casos de uso da conversão de RGBA para RGB
Cores de substituição de fundo para e-mails em HTML
Para clientes de e-mail que não interpretam `rgba()` — incluindo certas versões do Outlook —, você pode especificar antecipadamente um valor RGB opaco já calculado como `background-color`.
Valores de cor para navegadores antigos ou exportação em PDF
Pré-calcule a cor a ser entregue a motores de renderização que não suportam transparência, ou a ferramentas de exportação em PDF que não respeitam os valores alfa do CSS.
Conferir combinações de cores em um comp de design
Descubra exatamente qual cor resulta da sobreposição de elementos semitransparentes, como um número exato, sem precisar abrir o Photoshop ou outro editor.
Verificar a aparência tanto no modo claro quanto no modo escuro
Use as predefinições de fundo branco e preto para comparar de uma vez como a mesma cor semitransparente muda entre os dois temas.
Criar uma variante semitransparente fixa de uma cor da marca
Exporte uma cor da marca com um determinado valor alfa como cor final e fixa sobre um fundo específico, pronta para adicionar a um guia de estilo da marca.
Glossário
- RGBA
- Um formato de cor que adiciona um canal alfa — representando a opacidade — aos três canais primários vermelho, verde e azul. No CSS é escrito como `rgba(255, 0, 0, 0.5)`.
- Valor alfa
- Um número que expressa a opacidade de uma cor, indicado como decimal de 0 (totalmente transparente) a 1 (totalmente opaco), ou de forma equivalente como porcentagem. Quanto menor o valor, mais o fundo aparece através da cor.
- Alpha blending
- O cálculo que mistura uma cor de primeiro plano semitransparente com uma cor de fundo, em uma proporção determinada pelo valor alfa, para produzir uma única cor opaca. Também chamado de operador "over", é a base da fórmula usada por esta ferramenta.
- Código de cor hexadecimal (HEX)
- Uma representação dos valores dos canais RGB escrita em hexadecimal no formato `#RRGGBB`. Uma das formas mais usadas de especificar cor no CSS e em ferramentas de design.
- Cor de substituição
- Um valor alternativo preparado antecipadamente para os casos em que a representação que você realmente quer usar — neste caso, uma cor semitransparente — não é interpretada corretamente em determinado ambiente.
- Operador over
- A forma mais básica de alpha blending, que consiste em colocar uma cor de primeiro plano "sobre" uma cor de fundo. É exatamente a fórmula que esta ferramenta implementa.
Perguntas frequentes
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.