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
rgb(33, 150, 243)
Presets rápidos:
Color con Opacidad
Vista Previa
Texto de Ejemplo
Opacidad: 100% — Alfa: 1.00
Accesibilidad (WCAG)
Ratio de contraste del color mezclado como fondo, con el mejor color de texto.
Escala de Opacidad
Exportar
:root {
--color-base: #2196f3;
--color-5: rgba(33, 150, 243, 0.05);
--color-10: rgba(33, 150, 243, 0.1);
--color-15: rgba(33, 150, 243, 0.15);
--color-20: rgba(33, 150, 243, 0.2);
--color-25: rgba(33, 150, 243, 0.25);
--color-30: rgba(33, 150, 243, 0.3);
--color-40: rgba(33, 150, 243, 0.4);
--color-50: rgba(33, 150, 243, 0.5);
--color-60: rgba(33, 150, 243, 0.6);
--color-70: rgba(33, 150, 243, 0.7);
--color-75: rgba(33, 150, 243, 0.75);
--color-80: rgba(33, 150, 243, 0.8);
--color-85: rgba(33, 150, 243, 0.85);
--color-90: rgba(33, 150, 243, 0.9);
--color-95: rgba(33, 150, 243, 0.95);
--color-100: rgb(33, 150, 243);
}Calculadora Inversa
Dado un color sólido objetivo, un fondo y un color fuente — encuentra la opacidad necesaria.
Cómo funciona
La opacidad (canal alfa) controla la transparencia de un color, de 0 (invisible) a 1 (sólido). Es fundamental en diseño web para crear capas, estados interactivos y efectos visuales.
Fórmula de composición
Resultado = Color × α + Fondo × (1 - α)Esta fórmula se aplica a cada canal (R, G, B) independientemente. El resultado es un color sólido que depende siempre del fondo sobre el que se muestra.
Usos comunes
- Overlays y modales: Fondo oscuro al 50-70% detrás de contenido
- Sombras: Box-shadow con negro al 15-25%
- Estados hover: Overlay blanco/negro al 5-10% para elevación sutil
- Bordes sutiles: Bordes al 10-20% que se adaptan a cualquier fondo
- Design tokens: Escala de opacidad completa como variables CSS
🔄 Calculadora inversa
La calculadora inversa resuelve un problema común: tu diseñador te da un color sólido (ej: #D6E4FC) pero necesitas saber qué opacidad aplicar a tu color base sobre el fondo para obtenerlo. Introduce los 3 colores y la herramienta calcula el alfa necesario.
♿ Accesibilidad y opacidad
El indicador WCAG muestra si el color resultante (mezclado con el fondo) tiene suficiente contraste para texto. Texto con baja opacidad sobre fondos claros puede fallar WCAG AA. La herramienta calcula el mejor color de texto (blanco o negro) y muestra los niveles que cumple.
✨ Sintaxis CSS moderna
CSS moderno usa la sintaxis rgb(R G B / alpha) en vez de rgba(R,G,B,alpha). La exportación "CSS Modern" genera variables con esta sintaxis. En Tailwind, puedes usar bg-color/50 directamente.
💡 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) o rgb(0 0 0 / 50%)
→ Sobre blanco resulta en #808080
Caso 2: Escala de tokens de opacidad
Crear un sistema de design tokens con tu color primario a distintas opacidades.
→ Exporta como CSS/SCSS variables para todo el equipo
→ En Tailwind: define el color base y usa bg-primary/20
Caso 3: Hover sutil adaptativo
Overlay blanco al 5% funciona en fondos oscuros, overlay negro al 5% en fondos claros.
→ rgba(255,255,255,0.05) para tema oscuro
→ rgba(0,0,0,0.04) para tema claro
Caso 4: Recuperar opacidad de un mockup
Tu diseñador te da un color plano #D6E4FC pero tú sabes que es azul sobre blanco.
→ Usa la calculadora inversa: objetivo #D6E4FC, fondo #FFFFFF, fuente #2196F3
→ Resultado: 20% de opacidad → rgba(33,150,243,0.2)
⚡ Consejo pro
Usa la escala de opacidad como "sistema" en tu proyecto: define el color base una vez y aplica opacidad con variables CSS. Así, al cambiar el color primario, todas las variaciones se actualizan automáticamente.