AZ Tools

Efeito Duotone de Imagem

Imagem

Duotone substitui a faixa tonal de uma imagem por um gradient entre duas cores — as sombras viram a cor escura, as luzes a cor brilhante, os tons médios interpolam. O resultado é o look icônico que você viu em capas do Spotify, arte de álbum indie e fotografia editorial. Este construtor roda o duotone em um canvas no seu navegador (sem upload), então funciona em qualquer tamanho de imagem que sua máquina aguente. O slider de midpoint move onde ocorre a divisão de cor; o contraste íngrema ou achata a curva. A saída é PNG baixável, mais o filtro SVG `feColorMatrix` + `feComponentTransfer` equivalente para você aplicar o mesmo efeito via CSS `filter: url(#duotone)` sem re-rasterizar.

Como usar

  1. Solte uma imagem. Escolha um preset (verde-preto Spotify é o clássico) ou duas cores hex customizadas.
  2. Deslize o midpoint para controlar onde sombras terminam e luzes começam. Ajuste contraste para transições mais fortes ou suaves.
  3. Baixe o PNG, ou copie o filtro SVG para aplicar o mesmo efeito via CSS em qualquer elemento do seu site.

Perguntas frequentes

Por que parece turvo no meio?
O contraste padrão em 0 é uma rampa linear entre as duas cores. Subir o contraste íngrema a transição — útil quando sua imagem tem muitos cinzas médios que viram cores misturadas turvas. Baixar dá gradients mais suaves e pictóricos. O slider de midpoint move onde a divisão acontece para fotos com exposição desigual.
Como funciona a versão filtro SVG?
Usa `feColorMatrix` para converter a imagem em escala de cinza (usando coeficientes de luminância BT.709), depois `feComponentTransfer` com uma função `table` para remapear cada canal para um gradient de 2 pontos entre seus valores RGB de sombra e luz. O resultado: mesmo efeito que a versão canvas, mas sem rasterizar — e animável via transições CSS no filtro SVG.

Ferramentas relacionadas