# Efeito duotone: qualquer foto da sua marca em duas cores [Canonical HTML page](https://gradiently.design/pt-br/guide/duotone-effect) O duotone transforma qualquer foto em duas cores à sua escolha: uma para as sombras, outra para a luz. É o jeito mais rápido de fazer imagens sem relação parecerem de uma só marca. ## The short version - O efeito duotone recolore uma foto com duas cores, levando os tons mais escuros a uma cor e os mais claros a outra. - Um duotone funciona transformando a foto em tons de cinza e trocando cada cinza pelo ponto correspondente de um gradiente de duas cores. - A cor das sombras precisa ser bem mais escura que a das luzes, ou a foto perde a forma. - O duotone é ideal para deixar fotos de origens diferentes consistentes e fiéis à marca e para pôr texto sobre imagens. - Em CSS, um filtro SVG com feColorMatrix e feComponentTransfer produz um duotone verdadeiro em qualquer imagem. O **efeito duotone** recolore uma foto com apenas duas cores: as sombras viram uma cor, as luzes viram outra, e todo tom intermediário é uma mistura das duas. Um retrato em índigo profundo e dourado quente, uma cidade em verde-floresta e menta. Como toda imagem termina nas mesmas duas cores, o duotone é o jeito mais rápido de fazer fotos de câmeras, estações e fontes diferentes parecerem de uma só marca. ## Como funciona o efeito duotone Um duotone é um mapa de gradiente com duas paradas. Primeiro a foto é reduzida a tons de cinza, então cada pixel é só um brilho do preto ao branco. Depois cada brilho é trocado pela cor do mesmo ponto de um gradiente de duas cores: o preto vira a cor das sombras, o branco vira a cor das luzes e o cinza-médio vira a cor a meio caminho entre elas. A foto mantém as formas e a luz, mas perde toda a cor original. - Meia-noite e dourado: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Marinho e coral: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Floresta e menta: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Ameixa e pêssego: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Espresso e limão: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Sangue-de-boi e rosa-claro: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Verde-azulado e creme: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Violeta e ciano: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Cada faixa é um duotone lido da esquerda para a direita: as sombras de uma foto ficam com a cor da esquerda, as luzes com a da direita e todo o resto com a cor intermediária. Ler duotones como gradientes facilita julgá-los antes de mexer numa foto. Se o meio da faixa parece sujo, os tons médios da foto também vão parecer. A técnica mais ampla, com três ou mais cores, está nos [mapas de gradiente](https://gradiently.design/pt-br/guide/gradient-map). ## Como escolher um par de cores para o duotone 1. **Deixe a cor das sombras escura** A cor das sombras carrega a estrutura da foto. Ela deve ser próxima do preto em luminosidade, como um azul-marinho profundo, uma ameixa ou uma floresta, ou rostos e detalhes ficam chapados. 2. **Deixe a cor das luzes clara** A cor das luzes carrega a luz. Um dourado pálido, um rosa-claro, uma menta ou um creme mantêm a imagem luminosa. Uma grande diferença de luminosidade é o que mantém a foto legível. 3. **Confira o meio** A maior parte de uma foto é feita de tons médios, então a cor a meio caminho do par é a que mais importa. Se ela virar cinza ou oliva, escolha uma cor de luz com matiz mais próximo do das sombras. Veja os [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients). 4. **Pegue uma cor da sua marca** Use a cor da sua marca como sombra ou como luz e escolha a outra para combinar. É isso que faz o duotone parecer da marca e não só estilizado. 5. **Teste num rosto e numa paisagem** Pele e céu são onde um par ruim aparece primeiro. Se os dois continuam bonitos, o par funciona em quase tudo. ### Pares fracos - Duas cores de luminosidade parecida, como vermelho e azul - Uma cor de sombra clara que desbota a foto - Matizes opostos que deixam os tons médios cinzas - Luzes neon que deixam a pele com aparência doente ### Pares fortes - Uma sombra quase preta e uma luz pálida - Matizes que continuam coloridos no ponto médio - Uma cor tirada da paleta da marca - Luzes quentes para pessoas, frias para lugares | Clima | Sombra | Luz | | --- | --- | --- | | Quente e editorial | Ameixa `#3b0a45` | Pêssego `#ffc9a3` | | Clássico e premium | Meia-noite `#1b134f` | Dourado `#fad084` | | Fresco e natural | Floresta `#0b3d2e` | Menta `#b8f2d0` | | Discreto e literário | Verde-azulado `#073b4c` | Creme `#f6ecd9` | | Intenso e elétrico | Violeta `#2e1065` | Ciano `#67e8f9` | Pares para começar, por clima. Troque um dos lados pela cor da sua marca e mantenha a diferença de luminosidade. ## Quando o duotone ajuda - **Fotos sem relação:** imagens de banco, fotos de celular e imagens antigas de arquivo parecem um só conjunto - **Texto sobre fotos:** com a foto reduzida a duas cores calmas, as palavras se acomodam nela com muito mais facilidade; veja o [texto sobre imagem](https://gradiently.design/pt-br/guide/text-over-image) - **Consistência de marca:** toda imagem repete as suas cores, o que constrói reconhecimento; veja a [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) - **Pôsteres e capas:** um duotone forte se lê de longe e imprime bem - **Fotos fracas:** iluminação ruim e cores sem graça importam muito menos quando a cor é substituída Ajuda menos onde a cor verdadeira importa: comida, moda, produtos e imóveis, em que as pessoas precisam ver o que estão recebendo. Nesses casos, um tom mais leve ou uma lavagem de cor sobre uma parte da imagem faz o trabalho sem esconder as cores reais. ## Como fazer um duotone em CSS O método mais preciso é um filtro SVG. O `feColorMatrix` transforma a imagem em tons de cinza com os pesos padrão de luminância e o `feComponentTransfer` leva cada canal da cor das sombras à cor das luzes. Os valores da tabela são o vermelho, o verde e o azul de cada cor divididos por 255. ```html Portrait ``` Meia-noite e dourado como filtro SVG. O `color-interpolation-filters="sRGB"` mantém as cores exatamente como especificadas. Acrescente um terceiro valor a cada lista `tableValues` e você tem um tritone, com uma cor de tom médio à escolha. É o jeito mais fácil de salvar um par cujo meio fica sujo. Para filtros e efeitos CSS em geral, o [guia de efeitos de filtro do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) é uma boa referência. ## Duotone em ferramentas de design Os editores de imagem costumam fazer duotone com um mapa de gradiente: acrescente um ajuste de mapa de gradiente, defina a parada da esquerda como a cor das sombras e a da direita como a cor das luzes e ajuste o ponto médio até pele e céu parecerem certos. Algumas ferramentas também oferecem um modo duotone dedicado para impressão, que prepara duas tintas reais em vez de uma imagem RGB. No Gradiently, qualquer foto do Studio pode ser tingida com as cores do Mark com que você está criando: como mono, como duotone ou como uma lavagem mais suave. Mude o Mark e a foto o acompanha, então um conjunto inteiro de designs fica numa só paleta. ## FAQ ### O que é o efeito duotone? O efeito duotone recolore uma foto com duas cores: as sombras viram uma cor e as luzes outra, com os tons médios misturados entre elas. ### Quais cores funcionam melhor no duotone? Uma cor de sombra bem escura e uma cor de luz bem clara, com matizes que continuam coloridos no ponto médio, como marinho e coral ou ameixa e pêssego. ### Como faço uma imagem duotone em CSS? Use um filtro SVG: `feColorMatrix` para converter em tons de cinza e depois `feComponentTransfer` com valores de tabela para as cores das sombras e das luzes. ### Qual é a diferença entre duotone e mapa de gradiente? O duotone é um mapa de gradiente com exatamente duas cores. Um mapa de gradiente pode usar três ou mais cores ao longo da mesma faixa tonal. ### Por que o meu duotone parece chapado? As duas cores estão próximas demais em luminosidade. Deixe a cor das sombras mais escura ou a das luzes mais clara.