AZ Tools

Efecto Duotono de Imagen

Imagen

Duotono reemplaza el rango tonal de una imagen con un gradiente entre dos colores — las sombras se vuelven el color oscuro, las luces el color brillante, los tonos medios interpolan. El resultado es el look icónico que has visto en carátulas de Spotify, arte de álbumes indie y fotografía editorial. Este constructor corre el duotono en un canvas en tu navegador (sin upload), así que funciona en cualquier tamaño de imagen que tu máquina pueda manejar. El slider de midpoint mueve dónde ocurre la división de color; el contraste empina o aplana la curva. La salida es PNG descargable, más el filtro SVG `feColorMatrix` + `feComponentTransfer` equivalente para que puedas aplicar el mismo efecto vía CSS `filter: url(#duotone)` sin re-rasterizar.

Cómo usar

  1. Suelta una imagen. Elige un preset (verde-negro Spotify es el clásico) o dos colores hex personalizados.
  2. Desliza el midpoint para controlar dónde terminan las sombras y empiezan las luces. Ajusta contraste para transiciones más fuertes o suaves.
  3. Descarga el PNG, o copia el filtro SVG para aplicar el mismo efecto vía CSS en cualquier elemento de tu sitio.

Preguntas frecuentes

¿Por qué se ve turbio en el medio?
El contraste por defecto en 0 es una rampa lineal entre los dos colores. Subir el contraste empina la transición — útil cuando tu imagen tiene muchos grises medios que se vuelven colores mezclados turbios. Bajarlo da gradientes más suaves y pictóricos. El slider de midpoint mueve dónde ocurre la división para fotos con exposición desigual.
¿Cómo funciona la versión filtro SVG?
Usa `feColorMatrix` para convertir la imagen a escala de grises (usando coeficientes de luminancia BT.709), luego `feComponentTransfer` con una función `table` para remapear cada canal a un gradiente de 2 puntos entre tus valores RGB de sombra y luz. El resultado: mismo efecto que la versión canvas, pero sin rasterizar — y animable vía transiciones CSS en el filtro SVG.

Herramientas relacionadas