Convertidor de RGBA a RGB (fusión con el fondo)
Introduce un color de primer plano semitransparente (RGBA) y un color de fondo para calcular el color RGB opaco resultante de mezclar ambos mediante alpha blending, ideal como alternativa donde rgba() no es compatible.
La fórmula del alpha blending
Convertir RGBA en RGB opaco se conoce como "alpha blending" (el operador "over"). La siguiente fórmula se aplica de forma independiente a los canales R, G y B, y el resultado se redondea al entero más cercano.
| Fórmula | result = foreground × alpha + background × (1 − alpha) |
|---|
Qué significa convertir RGBA a RGB
Un color RGBA semitransparente funciona perfectamente en el CSS moderno y en las herramientas de diseño, pero no se representa como se espera en entornos que no pueden interpretar la transparencia, como muchos clientes de correo electrónico y motores de renderizado antiguos. Esta herramienta toma un color de primer plano (RGBA) y un color de fondo, y calcula el color RGB opaco y fusionado que en realidad se vería una vez compuestos ambos, ofreciendo el resultado en un formato que puedes usar directamente como alternativa en entornos donde la transparencia no es compatible.
El cálculo se basa en un método de composición conocido como "alpha blending" (el operador "over"): cada canal (R, G y B) del color de primer plano se multiplica por el valor alfa, cada canal correspondiente del color de fondo se multiplica por (1 − valor alfa), y ambos productos se suman. Como esta fórmula se aplica de forma independiente a cada uno de los tres canales, el mismo color semitransparente produce un resultado completamente distinto según el fondo sobre el que se coloque. Al preparar un color de reemplazo, es fundamental especificar el color de fondo exacto sobre el que se mostrará realmente el elemento.
Cómo usar el convertidor de RGBA a RGB
- Especifica el color de primer plano (semitransparente) Elígelo con el selector de color o pega un código HEX que ya hayas confirmado en una herramienta de diseño.
- Ajusta la opacidad (valor alfa) Define la transparencia con el control deslizante de 0 a 100%. Hazlo coincidir con el valor que realmente usas en tu CSS.
- Especifica el color de fondo Usa los botones predefinidos de blanco o negro, o introduce un valor personalizado cercano al fondo real de tu página.
- Revisa el resultado fusionado (RGB opaco) El código HEX y la cadena RGB se calculan al instante, junto con una comparación directa de cómo se ve el color sobre blanco y sobre negro.
- Pega el valor RGB calculado como alternativa Cópialo directamente en propiedades como `background-color`, donde `rgba()` no es compatible.
Consejos para aprovecharla mejor
- Algunas plantillas de correo HTML y navegadores antiguos (como ciertas versiones de IE) no admiten `rgba()` ni `opacity`. Incluir el valor RGB opaco calculado aquí junto a `background-color` ofrece una alternativa segura.
- Tanto el color de primer plano como el de fondo admiten el selector de color o la entrada directa en HEX, así que puedes pegar un color exacto ya elegido en tu herramienta de diseño.
- La opacidad (valor alfa) se ajusta con un control deslizante de 0 a 100%. 0% es totalmente transparente (es decir, solo el color de fondo) y 100% es totalmente opaco (es decir, solo el color de primer plano).
- Se ofrecen blanco y negro como fondos predefinidos porque son los dos casos más comparados en la práctica (fondos de modo claro y modo oscuro). Para un color de reemplazo más preciso, introduce como valor personalizado el color de fondo real que usa tu página.
Casos de uso de la conversión de RGBA a RGB
Colores de reemplazo de fondo para correos HTML
Para clientes de correo que no interpretan `rgba()` —entre ellos ciertas versiones de Outlook—, puedes especificar de antemano un valor RGB opaco ya calculado como `background-color`.
Valores de color para navegadores antiguos o exportación a PDF
Precalcula el color que debes entregar a motores de renderizado que no admiten transparencia, o a herramientas de exportación a PDF que no respetan los valores alfa de CSS.
Comprobar combinaciones de color en un boceto de diseño
Descubre exactamente qué color resulta de superponer elementos semitransparentes, como un número exacto, sin necesidad de abrir Photoshop u otro editor.
Verificar el aspecto tanto en modo claro como en modo oscuro
Usa los fondos predefinidos blanco y negro para comparar de una vez cómo cambia el mismo color semitransparente en ambos temas.
Crear una variante semitransparente fija de un color de marca
Exporta un color de marca con un valor alfa determinado como color final y fijo sobre un fondo específico, listo para añadirlo a una guía de estilo de marca.
Glosario
- RGBA
- Un formato de color que añade un canal alfa —que representa la opacidad— a los tres canales primarios rojo, verde y azul. En CSS se escribe como `rgba(255, 0, 0, 0.5)`.
- Valor alfa
- Un número que expresa la opacidad de un color, indicado como decimal de 0 (totalmente transparente) a 1 (totalmente opaco), o de forma equivalente como porcentaje. Cuanto menor sea el valor, más se transparenta el fondo.
- Alpha blending
- El cálculo que mezcla un color de primer plano semitransparente con un color de fondo, en una proporción determinada por el valor alfa, para producir un único color opaco. También llamado operador "over", es la base de la fórmula que usa esta herramienta.
- Código de color hexadecimal (HEX)
- Una representación de los valores de los canales RGB escrita en hexadecimal con el formato `#RRGGBB`. Una de las formas más utilizadas de especificar color en CSS y en herramientas de diseño.
- Color de reemplazo
- Un valor alternativo preparado de antemano para los casos en que la representación que realmente quieres usar —en este caso, un color semitransparente— no se interpreta correctamente en un entorno determinado.
- Operador over
- La forma más básica de alpha blending, que consiste en colocar un color de primer plano "sobre" un color de fondo. Es exactamente la fórmula que implementa esta herramienta.
Preguntas frecuentes
A propósito — Los orígenes del alpha blending
El concepto de alpha blending (composición alfa) suele remontarse a un artículo de 1984 titulado "Compositing Digital Images", publicado por Thomas Porter y Tom Duff en el campo de la infografía. Antes de eso, componer un primer plano sobre un fondo solía tratar únicamente la información de color. Ese artículo sistematizó la idea de emparejar un cuarto canal que representa la opacidad —el canal alfa— con los datos de color, y desde entonces se convirtió en el modelo estándar usado en CG y software de edición de imágenes.
Hoy en día, casi toda tecnología que maneja transparencia se basa en esta idea de alpha blending: formatos de imagen como PNG y SVG, las funciones `rgba()` y `opacity` de CSS, y las funciones de capas de la mayoría de los programas de dibujo. El método de composición más básico, conocido como el operador "over" (colocar un primer plano sobre un fondo), es exactamente la fórmula que utiliza esta herramienta.
Sin embargo, los problemas de compatibilidad con clientes de correo antiguos y navegadores heredados aún no se han resuelto por completo. El correo HTML en particular está muy limitado por los motores de renderizado, y a menudo simplemente no se pueden usar las técnicas modernas de transparencia CSS tal cual, por lo que precalcular un color de reemplazo opaco sigue siendo una técnica práctica muy utilizada.