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)

Consejos

  • 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.

Preguntas frecuentes

Algunos clientes de correo (en particular ciertas versiones de Outlook) y navegadores antiguos no admiten en absoluto la función `rgba()` de CSS ni la transparencia alfa. En esos entornos, la parte transparente puede renderizarse incorrectamente y romper el diseño. Al precalcular el valor RGB opaco resultante de mezclar tu color con el fondo, puedes especificar una alternativa segura para entornos donde `rgba()` no está disponible, evitando así cualquier desajuste visual.

Un color semitransparente combina tanto su propia información de color como la información del fondo que se transparenta a través de él, por lo que el resultado visible siempre depende del fondo. El mismo color se verá más oscuro y apagado sobre negro, y más claro y suave sobre blanco. Esto no es un error, sino simplemente cómo funciona el alpha blending, razón por la cual debes especificar el color de fondo real que vas a usar al calcular un color de reemplazo.

Los valores alfa de CSS se especifican como un decimal de 0 (totalmente transparente) a 1 (totalmente opaco), o de forma equivalente como un porcentaje de 0% a 100%. Esta herramienta usa un control deslizante en el rango de 0 a 100% para ajustarlo de forma intuitiva.

Mientras se muestre sobre el color de fondo exacto que especificaste, se verá teóricamente idéntico. Sin embargo, eso solo es cierto para ese fondo en concreto: si se coloca sobre un fondo distinto, el aspecto cambiará. Al usarlo como alternativa, es importante especificar el color de fondo real de la página donde aparecerá el color.
ツールくん

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.

→ Ver todas las curiosidades