1. O Que E o Efeito Duotone
Duotone e uma tecnica de processamento de imagem que reduz todas as tonalidades de uma foto a apenas duas cores: uma para as areas claras (realces) e outra para as areas escuras (sombras). O resultado e uma imagem estilizada com aspecto grafico e visual impactante, muito associada a design moderno e minimalista.
O nome vem do ingles "duo" (dois) + "tone" (tom), referenciando exatamente essa restricao a duas cores. A tecnica surgiu na impressao grafica, onde limitacoes de cores eram comuns, e foi reaproveitada como recurso estetico no design digital.
2. Como o Algoritmo Funciona
O processamento duotone segue tres etapas:
- Conversao para luminancia: cada pixel e convertido para um valor de brilho (0 a 1) usando a formula perceptual:
L = 0.299R + 0.587G + 0.114B - Ajuste de contraste: o valor de luminancia e elevado a uma potencia para aumentar ou diminuir o contraste da imagem base
- Mapeamento de cor: o valor de luminancia e usado para interpolar linearmente entre a cor de sombra (L=0) e a cor de realce (L=1)
O slider de intensidade controla o quanto do efeito duotone substitui a imagem original — em 100% a imagem e totalmente duotone; em 0% a imagem original e preservada.
"Todo o processamento e feito no navegador via Canvas API — sem upload, sem servidores, sem comprometimento de privacidade."
3. Usos em Design e Branding
O efeito duotone e amplamente utilizado em:
- Identidade visual: imagens duotone com as cores da marca criam coesao visual em portfolios, sites e materiais graficos
- Headers e hero sections: fotos de fundo com duotone reduzem o conflito visual com textos sobrepostos
- Redes sociais: thumbnails com efeito duotone se destacam no feed por serem visualmente distintos
- Capas de podcasts e ebooks: estilo editorial que transmite profissionalismo com recursos simples
- Apresentacoes: coesao visual entre slides com imagens de fontes diversas
4. Como Escolher Boas Combinacoes de Cores
As combinacoes mais eficazes de duotone seguem alguns principios:
- Alto contraste entre claro e escuro: uma cor muito clara para realces e uma muito escura para sombras garantem leitura clara da imagem
- Cores complementares: cores opostas no circulo cromatico (azul/laranja, roxo/amarelo) criam tensao visual dinamica
- Tons da marca: usar as cores oficiais da identidade visual cria imediata associacao com a marca
- Branco e preto: o duotone classico em preto e branco e atemporal e funciona com qualquer imagem
5. Duotone em CSS (Filtros SVG)
Para aplicar duotone diretamente em elementos HTML via CSS, e possivel usar filtros SVG com feColorMatrix e feComponentTransfer. Essa tecnica e util quando voce precisa do efeito de forma dinamica sem processar a imagem no servidor ou no canvas.
6. Perguntas Frequentes
A imagem e enviada para algum servidor?
Nao. Todo o processamento ocorre localmente no seu navegador usando a Canvas API do JavaScript. Nenhuma imagem e transmitida pela internet.
Quais formatos de imagem sao suportados?
A ferramenta aceita JPG, PNG e WebP. O download do resultado e sempre em formato PNG para preservar qualidade sem compressao com perda.
Ha limite de tamanho para a imagem?
Nao ha limite rigido, mas imagens muito grandes (acima de 10 MP) podem tornar o processamento mais lento dependendo do hardware do seu dispositivo. Para uso web, recomendamos trabalhar com imagens de no maximo 2000 × 2000 px.