# O efeito duotone: dá a qualquer fotografia a tua marca em duas cores [Canonical HTML page](https://gradiently.design/pt-pt/guide/duotone-effect) O duotone transforma qualquer fotografia em duas cores à tua escolha: uma para as sombras, outra para a luz. É a forma mais rápida de fazer imagens díspares parecerem uma só marca. ## The short version - O efeito duotone recolore uma fotografia com duas cores, aplicando aos tons mais escuros uma cor e aos mais claros outra. - Um duotone funciona transformando a fotografia em tons de cinzento e substituindo cada cinzento pelo ponto correspondente de um gradiente de duas cores. - A cor das sombras tem de ser muito mais escura do que a cor das luzes, senão a fotografia perde a forma. - O duotone é ideal para fazer fotografias de fontes diferentes parecerem coerentes e fiéis à marca, e para pôr texto sobre imagens. - Em CSS, um filtro SVG com feColorMatrix e feComponentTransfer produz um verdadeiro duotone em qualquer imagem. O **efeito duotone** recolore uma fotografia com apenas duas cores: as sombras passam a ser uma cor e as luzes outra, com todos os tons intermédios misturados a partir das duas. Um retrato em índigo profundo e dourado quente, uma cidade em verde-floresta e menta. Como todas as imagens acabam nas mesmas duas cores, o duotone é a forma mais rápida de fazer fotografias de câmaras, estações e origens diferentes parecerem pertencer à mesma marca. ## Como funciona o efeito duotone Um duotone é um mapa de gradiente com duas paragens. Primeiro a fotografia é reduzida a tons de cinzento, e cada píxel passa a ser só um brilho do preto ao branco. Depois cada brilho é substituído pela cor no mesmo ponto de um gradiente de duas cores: o preto passa a ser a cor das sombras, o branco a cor das luzes e o cinzento médio a cor a meio caminho. A fotografia mantém as formas e a luz, mas perde toda a cor original. - Meia-noite e ouro: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Azul-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%)` - Café e limão: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Sangue de boi e rosado: `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 fotografia ficam com a cor da esquerda, as luzes com a da direita, e tudo o resto com a cor intermédia. Ler os duotones como gradientes torna-os fáceis de avaliar antes de mexeres numa fotografia. Se o meio da faixa parece lamacento, os tons médios da fotografia 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-pt/guide/gradient-map). ## Como escolher um par de cores duotone 1. **Faz a cor das sombras escura** A cor das sombras carrega a estrutura da fotografia. Deve estar perto do preto em luminosidade, como um azul-marinho profundo, ameixa ou floresta, senão os rostos e os pormenores achatam. 2. **Faz a cor das luzes clara** A cor das luzes carrega a luz. Um dourado pálido, rosado, menta ou creme mantém a imagem luminosa. É uma grande diferença de luminosidade que mantém a fotografia legível. 3. **Verifica o meio** A maior parte de uma fotografia são tons médios, por isso a cor a meio do par é a que mais importa. Se ficar cinzenta ou azeitona, escolhe uma cor de luzes com um matiz mais próximo do das sombras. Vê os [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients). 4. **Tira uma cor da tua marca** Usa a cor da tua marca como cor das sombras ou das luzes e escolhe a outra para condizer. É isso que faz o duotone parecer da marca e não apenas estilizado. 5. **Testa num rosto e numa paisagem** A pele e os céus são onde um mau par se nota primeiro. Se ambos continuarem bem, o par funciona em quase tudo. ### Pares fracos - Duas cores de luminosidade parecida, como vermelho e azul - Uma cor de sombras clara que desbota a fotografia - Matizes opostos que deixam os tons médios cinzentos - Luzes néon que fazem a pele parecer doente ### Pares fortes - Sombras quase pretas e luzes pálidas - Matizes que continuam coloridos no ponto médio - Uma cor tirada da paleta da marca - Luzes quentes para pessoas, frias para lugares | Ambiente | Sombras | Luzes | | --- | --- | --- | | Quente e editorial | Ameixa `#3b0a45` | Pêssego `#ffc9a3` | | Clássico e premium | Meia-noite `#1b134f` | Ouro `#fad084` | | Fresco e natural | Floresta `#0b3d2e` | Menta `#b8f2d0` | | Discreto e literário | Verde-azulado `#073b4c` | Creme `#f6ecd9` | | Alto e elétrico | Violeta `#2e1065` | Ciano `#67e8f9` | Pares de partida por ambiente. Troca um dos lados pela cor da tua marca e mantém a diferença de luminosidade. ## Quando o duotone ajuda - **Fotografias díspares:** imagens de banco, fotografias de telemóvel e imagens de arquivo antigas parecem um só conjunto - **Texto sobre fotografias:** com a fotografia reduzida a duas cores calmas, as palavras assentam nela com muito mais facilidade; vê [texto sobre imagem](https://gradiently.design/pt-pt/guide/text-over-image) - **Coerência da marca:** cada imagem repete as tuas cores, o que constrói reconhecimento; vê a [coerência da marca](https://gradiently.design/pt-pt/guide/brand-consistency) - **Cartazes e capas:** um duotone forte lê-se ao longe e imprime bem - **Fotografias fracas:** má iluminação e cor baça importam muito menos depois de a cor ser substituída Ajuda menos onde a cor verdadeira conta: comida, moda, produtos e imobiliário, onde as pessoas precisam de ver o que estão a receber. Aí, um tom mais leve ou uma película 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 exato é um filtro SVG. O `feColorMatrix` transforma a imagem em tons de cinzento com pesos de luminância padrão, e o `feComponentTransfer` mapeia cada canal da cor das sombras para a 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 ouro como filtro SVG. O `color-interpolation-filters="sRGB"` mantém as cores exatamente como especificadas. Acrescenta um terceiro valor a cada lista `tableValues` e tens um tritone, com uma cor de tom médio à escolha. É a forma mais fácil de salvar um par cujo meio fica lamacento. Para filtros e efeitos CSS em geral, o [guia da MDN sobre efeitos de filtro](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: adiciona um ajuste de mapa de gradiente, define a paragem da esquerda com a cor das sombras e a da direita com a cor das luzes, e ajusta o ponto médio até a pele e os céus 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. Na Gradiently, qualquer fotografia no Studio pode ser tingida com as cores do Mark com que estás a desenhar: em mono, em duotone ou numa película mais suave. Muda o Mark e a fotografia acompanha, por isso um conjunto inteiro de designs fica numa só paleta. ## FAQ ### O que é o efeito duotone? O efeito duotone recolore uma fotografia com duas cores: as sombras passam a ser uma cor e as luzes outra, com os tons médios misturados entre elas. ### Que cores funcionam melhor em duotone? Uma cor de sombras muito escura e uma cor de luzes muito clara, com matizes que continuam coloridos no ponto médio, como azul-marinho e coral ou ameixa e pêssego. ### Como faço uma imagem duotone em CSS? Usa um filtro SVG: `feColorMatrix` para converter em tons de cinzento 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? Um duotone é um mapa de gradiente com exatamente duas cores. Um mapa de gradiente pode usar três ou mais cores ao longo da mesma gama tonal. ### Porque é que o meu duotone parece plano? As duas cores estão demasiado próximas em luminosidade. Faz a cor das sombras mais escura ou a cor das luzes mais clara.