# Mapa de gradiente: recolorir qualquer imagem em segundos [Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-map) Um mapa de gradiente pega qualquer imagem, foto, textura ou ilustração e a repinta nas cores que você escolher, mantendo toda a luz e a sombra. É a ferramenta de recolorir mais rápida que existe. ## The short version - Um mapa de gradiente troca cada tom de uma imagem, do mais escuro ao mais claro, pela cor do ponto correspondente de um gradiente. - A ponta esquerda do gradiente colore as sombras, a ponta direita colore as luzes e tudo o que fica no meio colore os tons médios. - Uma boa rampa de mapa de gradiente vai ficando mais clara da esquerda para a direita; se a luminosidade sobe e desce, a imagem parece solarizada. - Mapas de gradiente são ideais para deixar conjuntos de fotos consistentes, recolorir texturas e ilustrações nas cores da marca e para correção de cor. - Um duotone é simplesmente um mapa de gradiente com duas cores; três ou mais paradas dão um controle bem mais fino dos tons médios. Um **mapa de gradiente** recolore uma imagem trocando cada um dos seus tons por uma cor de um gradiente. A imagem é lida primeiro só pelo brilho, do preto ao branco, e depois cada brilho é trocado pela cor do mesmo ponto do gradiente: a ponta esquerda pinta as sombras, a ponta direita pinta as luzes. As formas, a luz e o detalhe da imagem continuam exatamente iguais. Só as cores mudam, e você escolhe todas. ## Como funciona um mapa de gradiente Pense no gradiente como uma tabela de consulta. Um pixel com 0% de brilho recebe a cor da ponta esquerda; um pixel com 50% de brilho recebe a cor do meio; um pixel com 100% recebe a da ponta direita. Como a consulta depende só do brilho, duas cores originais bem diferentes com o mesmo brilho, como um suéter vermelho e uma cerca-viva verde, acabam com a mesma cor. É isso que torna os mapas de gradiente tão bons para unificar imagens. | Tom na imagem | Posição na rampa | Cor em Violeta da marca | | --- | --- | --- | | Sombra mais profunda | 0% | Nanquim `#120b1f` | | Tons escuros | 25% | Ametista `#3b1d6e` | | Tons médios | 50% | Violeta `#7c3aed` | | Tons claros | 75% | Orquídea `#f0abfc` | | Luz mais brilhante | 100% | Branco lilás `#fdf4ff` | Como a rampa Violeta da marca, abaixo, repinta uma imagem. A maioria das fotos passa a maior parte dos pixels nas três linhas do meio. ## Rampas de mapa de gradiente que funcionam A regra mais importante: a rampa deve ficar mais clara de modo constante da esquerda para a direita. Assim o que é escuro continua escuro e o que é claro continua claro, e a imagem mantém a sensação de profundidade. Você pode mudar o matiz o quanto quiser pelo caminho. Visuais fotográficos clássicos, como sépia e cianótipo, são só rampas assim. - Violeta da marca: `linear-gradient(90deg, #120b1f 0%, #3b1d6e 25%, #7c3aed 50%, #f0abfc 75%, #fdf4ff 100%)` - Sépia: `linear-gradient(90deg, #1a120b 0%, #5c3d24 35%, #a67c52 65%, #f3e3c7 100%)` - Cianótipo: `linear-gradient(90deg, #0a1f3c 0%, #1f4e8c 40%, #6fa3d6 70%, #eef5fb 100%)` - Calor: `linear-gradient(90deg, #000004 0%, #3b0f70 25%, #b63679 50%, #fb8761 75%, #fcfdbf 100%)` - Filme dourado: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Turquesa profundo: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Seis rampas que ficam mais claras da esquerda para a direita. Cada uma recoloriria uma foto de forma convincente; o matiz pode variar, a luminosidade não. ### Rampa que quebra a imagem - Luminosidade que sobe e desce ao longo da rampa - Uma cor clara na ponta esquerda, então as sombras ficam claras - Matizes opostos lado a lado, então os tons médios ficam cinza - Só duas paradas com matizes muito distantes ### Rampa que segura a imagem - Luminosidade subindo de modo constante da esquerda para a direita - Um quase preto à esquerda e um quase branco ou um tom claro à direita - Matizes vizinhos, ou uma ponte viva entre matizes distantes - De três a cinco paradas para controlar os tons médios Quebrar a regra da luminosidade de propósito dá um visual solarizado e psicodélico, que pode ser divertido em cartazes. Para tudo o que ainda deva parecer uma foto, mantenha a rampa constante. Se um tom médio ficar cinza, a solução é a mesma de qualquer gradiente: veja [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients). ## Para que usar mapas de gradiente - **Conjuntos de fotos consistentes:** fotos de banco de imagens, do celular e antigas de arquivo saem em uma só paleta; veja [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) - **Texturas de marca:** transforme qualquer textura em tons de cinza, como nuvens, concreto, tecido ou ruído, em um fundo com as cores da sua marca; veja [textura de fundo](https://gradiently.design/pt-br/guide/background-texture) - **Ilustrações e ícones:** recolora um conjunto inteiro de uma vez mapeando seus cinzas - **Correção de cor:** ajuste uma camada de mapa de gradiente para Luz suave ou Cor com baixa opacidade para um visual sutil de filme sobre as cores originais - **Dados e ciência:** mapas de calor e imagens em cor falsa são mapas de gradiente de medições - **Duotone e tritone:** duas ou três paradas para tratamentos marcantes de cartaz; veja [o efeito duotone](https://gradiently.design/pt-br/guide/duotone-effect) ## Como aplicar um mapa de gradiente em um editor de imagens 1. **Adicione um ajuste de mapa de gradiente** O Photoshop, o Affinity Photo e o GIMP têm um. Use uma camada de ajuste sempre que puder, para a original ficar intacta. 2. **Defina primeiro as pontas** Ponha uma versão quase preta da sua cor de marca mais escura à esquerda e um tom claro à direita. Confira se a imagem ainda se lê. 3. **Adicione paradas nos tons médios** Coloque a cor principal da sua marca por volta de 50% e ajuste a posição até a pele, os céus ou os objetos principais ficarem certos. 4. **Misture de volta, se precisar** Para corrigir a cor em vez de recolorir por completo, mude o modo de mistura da camada para Luz suave ou Cor e reduza a opacidade. 5. **Salve a rampa** Salve o gradiente como preset e use-o em todas as imagens do conjunto, para todas combinarem. ## Um mapa de gradiente em CSS Os navegadores podem aplicar um mapa de gradiente com um filtro SVG. O `feColorMatrix` transforma a imagem em tons de cinza, e o `feComponentTransfer` a mapeia por uma tabela de valores para cada canal. Cada lista abaixo é a rampa Violeta da marca: os valores de vermelho, verde e azul das cinco cores das paradas divididos por 255, em posições igualmente espaçadas. ```html ``` Um mapa de gradiente de cinco paradas como filtro SVG. Mude os valores da tabela para mudar a rampa. Mapas de gradiente são o caminho de qualquer imagem até uma paleta que é sua. Se você prefere partir da imagem, [combinar uma imagem](https://gradiently.design/pt-br/guide/match-a-picture) encontra a paleta dela e os Marks mais próximos. No Gradiently você também pode tingir qualquer foto no Studio com as cores do Mark que estiver usando, em mono, duotone ou uma lavagem mais suave, que é um mapa de gradiente feito para você. ## FAQ ### O que é um mapa de gradiente? Um mapa de gradiente recolore uma imagem trocando cada tom, do mais escuro ao mais claro, pela cor do ponto correspondente de um gradiente. ### Qual a diferença entre um mapa de gradiente e um duotone? Um duotone é um mapa de gradiente com apenas duas cores. Mapas de gradiente podem ter três ou mais paradas para um controle mais fino dos tons médios. ### Por que meu mapa de gradiente fica estranho? A luminosidade da rampa provavelmente sobe e desce. Faça-a ficar mais clara de modo constante da esquerda para a direita, para as sombras continuarem escuras e as luzes claras. ### Como usar um mapa de gradiente para correção de cor? Adicione o mapa de gradiente como camada de ajuste, depois mude o modo de mistura para Luz suave ou Cor e reduza a opacidade. ### Posso usar um mapa de gradiente em CSS? Sim, com um filtro SVG que converte para tons de cinza e depois mapeia cada canal pelos valores de tabela do `feComponentTransfer`.