Efecto Duotono de 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
- Suelta una imagen. Elige un preset (verde-negro Spotify es el clásico) o dos colores hex personalizados.
- Desliza el midpoint para controlar dónde terminan las sombras y empiezan las luces. Ajusta contraste para transiciones más fuertes o suaves.
- 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
Generador de viñeta de imagen
Añade una viñeta radial suave a cualquier foto — cantidad, suavidad, radio, forma óvalo / círculo / rectángulo, oscurecer o aclarar, color libre. 100% en tu navegador, sin subida.
Efecto Tilt-Shift / Miniatura
Falsea un look de diorama miniatura en cualquier foto — banda de foco nítida más arriba y abajo borrosos, con boost de saturación opcional, todo en el navegador.
Desenfoque de imagen
Aplica desenfoque Gaussiano, de caja o de movimiento a cualquier imagen en tu navegador. Radio ajustable 0-64 px, con el filtro CSS equivalente listo para copiar.
Posterizar Imagen
Reduce una foto a N niveles por canal para ese look plano de poster, con dithering Floyd-Steinberg opcional y control de niveles por canal.
Playground de Filtros CSS
Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.
Selector de Color de Imagen
Suelta una imagen y haz clic donde quieras para obtener el HEX / RGB / HSL exacto de ese píxel — junta una paleta mientras lo haces.
Generador de Hoja de Sprites de Imágenes
Suelta varias imágenes y hornéalas en un único PNG sprite — horizontal, vertical o grid — más reglas CSS background-position listas para pegar.