Calculadora de Opacidad
Calcula el color resultante al aplicar opacidad sobre diferentes fondos
Calcula y previsualiza colores con diferentes niveles de opacidad/transparencia.
Color Base
#2196f3
rgb(33, 150, 243)
0%25%50%75%100%
100%
Color con Opacidad
Vista Previa
#ffffff
Texto de Ejemplo
Cómo funciona
La opacidad (canal alfa) controla la transparencia de un color, de 0 (invisible) a 1 (sólido).
Fórmula de composición
Resultado = Color × α + Fondo × (1 - α)Usos comunes
- Overlays y modales
- Sombras y efectos
- Estados hover sutiles
- Fondos semitransparentes
💡 Ejemplos de uso prácticos
Caso 1: Overlay para modal
Necesitas un fondo oscuro semitransparente detrás de tu modal.
→ rgba(0, 0, 0, 0.5)
→ Sobre blanco resulta en #808080
Caso 2: Hover sutil en tarjetas
Añadir efecto hover sin cambiar mucho el color base.
→ Overlay blanco al 5%: rgba(255,255,255,0.05)
→ Crea elevación sutil sin color específico
Caso 3: Convertir RGBA a HEX sólido
Tu diseñador usa rgba(59,130,246,0.2) pero necesitas HEX.
→ Sobre fondo blanco: #D6E4FC
→ El resultado depende del fondo
Preguntas Frecuentes
¿Cómo convierto un color con alfa a sólido?
Necesitas saber el color de fondo. El resultado depende de sobre qué color se muestra la transparencia.
¿Qué opacidad usar para overlays?
Para overlays oscuros sobre imágenes, 0.5-0.7 suele funcionar bien. Para fondos sutiles, 0.05-0.15.