Simulador de modos de mezcla CSS
Color
CSS `mix-blend-mode` expone los mismos 16 modos de mezcla que popularizó Photoshop — multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, y los cuatro modos no-separables tipo HSL (hue, saturation, color, luminosity). Esta herramienta implementa exactamente los algoritmos del W3C Compositing & Blending Level 1 en JavaScript puro y calcula el color resultante cuando una fuente (frente) se mezcla sobre un fondo. Para cada modo verás una vista previa visual usando CSS `mix-blend-mode` real y el hex calculado, así que puedes verificar lo que el navegador producirá y copiar el snippet directamente. Los modos separables operan canal por canal; los no separables usan helpers W3C setLum/setSat/clipColor en un espacio perceptual de luminosidad/saturación.
Notas
Implementa la especificación W3C Compositing & Blending Level 1. Modos separables (multiply, screen, etc.) operan canal por canal. Modos no separables (hue, saturation, color, luminosity) usan lum = 0.3R + 0.59G + 0.11B y preservan luminosidad/saturación con setLum/setSat/clipColor. Haz clic en cualquier tarjeta para copiar la declaración mix-blend-mode correspondiente.
Cómo usar
- Elige un color de fondo (la capa base).
- Elige un color fuente (el frente que se mezcla encima).
- Explora la cuadrícula — cada modo muestra vista previa y hex calculado.
- Haz clic en cualquier tarjeta para copiar `mix-blend-mode: <modo>;` al portapapeles.
- Prueba un preset (Rojo sobre azul, Tinte de foto, Sticker, Atardecer) para ver un ejemplo trabajado.
Preguntas frecuentes
- ¿Diferencia entre overlay y hard-light?
- Overlay decide qué fórmula aplicar según el brillo del FONDO — fondo oscuro → multiply, fondo claro → screen. Hard-light decide según el brillo de la FUENTE — fuente oscura → multiply, fuente clara → screen. Así overlay(A, B) == hard-light(B, A). Usa overlay para 'realzar contraste según lo de abajo'; usa hard-light para 'que la fuente atraviese'.
- ¿Por qué hue/saturation/color/luminosity se ven tan distintos?
- Son modos 'no-separables' — no se calculan canal por canal. El W3C los define con tres helpers: lum(rgb) = 0.3R + 0.59G + 0.11B (luminancia), sat(rgb) = max − min, y setLum/setSat que preservan un valor objetivo con clipping. 'color' por ejemplo toma matiz+saturación de la fuente y luminancia del fondo. Por eso colorear una foto en blanco y negro usa mode: color.
- ¿Coincide con lo que el navegador realmente renderiza?
- Sí — la vista previa usa CSS `mix-blend-mode` real, así que el navegador hace el compositing real. El hex mostrado se calcula en JavaScript con las mismas fórmulas W3C que implementa el navegador, así que coinciden hasta el redondeo (±1 por canal). Si ves diferencia, suele ser porque el navegador mezcla en sRGB linealizado y esta herramienta usa sRGB con gamma; el W3C permite ambos.
- ¿Y background-blend-mode?
- Mismas fórmulas, aplicación distinta: mix-blend-mode mezcla un elemento contra lo que tiene detrás; background-blend-mode mezcla las múltiples capas de fondo de un mismo elemento entre sí. El resultado calculado aquí aplica a ambos — solo pega el nombre del modo en la propiedad que uses.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.