# Mapas de gradiente: recolore qualquer imagem em segundos [Canonical HTML page](https://gradiently.design/pt-pt/guide/gradient-map) Um mapa de gradiente pega em qualquer imagem, fotografia, textura ou ilustração e repinta-a nas cores que escolhes, mantendo toda a sua luz e sombra. É a ferramenta de recoloração 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 os realces e tudo o que fica no meio colore os tons médios. - Uma boa rampa de mapa de gradiente fica cada vez mais clara da esquerda para a direita; se a luminosidade salta, a imagem parece solarizada. - Os mapas de gradiente são ideais para dar coerência a conjuntos de fotografias, recolorir texturas e ilustrações nas cores da marca e para correção de cor. - Um duotono é simplesmente um mapa de gradiente com duas cores; três ou mais paragens dão um controlo muito 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 apenas como brilho, do preto ao branco, e depois cada brilho é trocado pela cor do mesmo ponto ao longo do gradiente: a ponta esquerda pinta as sombras, a ponta direita pinta os realces. As formas, a luz e o detalhe da imagem ficam exatamente iguais. Só as cores mudam, e escolhes todas. ## Como funciona um mapa de gradiente Pensa no gradiente como uma tabela de consulta. Um píxel com 0% de brilho recebe a cor da extrema esquerda; um píxel com 50% de brilho recebe a cor do meio; um píxel com 100% recebe a da extrema direita. Como a consulta depende só do brilho, duas cores originais muito diferentes com o mesmo brilho, como uma camisola vermelha e uma sebe verde, acabam na mesma cor. É isso que torna os mapas de gradiente tão bons a unificar imagens. | Tom na imagem | Posição na rampa | Cor em Violeta da marca | | --- | --- | --- | | Sombra mais profunda | 0% | Tinta `#120b1f` | | Tons escuros | 25% | Ametista `#3b1d6e` | | Tons médios | 50% | Violeta `#7c3aed` | | Tons claros | 75% | Orquídea `#f0abfc` | | Realce mais brilhante | 100% | Branco lilás `#fdf4ff` | Como a rampa Violeta da marca abaixo repinta uma imagem. A maioria das fotografias tem a maior parte dos píxeis nas três linhas do meio. ## Rampas de mapa de gradiente que funcionam A regra mais importante de todas: a rampa deve ficar cada vez mais clara 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. Podes mudar de tom quanto quiseres pelo caminho. Os visuais fotográficos clássicos, como a sépia e a cianotipia, são apenas 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%)` - Cianotipia: `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%)` - Película dourada: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Verde-azulado profundo: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Seis rampas que ficam todas mais claras da esquerda para a direita. Cada uma recoloriria uma fotografia de forma convincente; o tom pode vaguear, a luminosidade não. ### Rampa que estraga a imagem - Luminosidade que sobe e desce ao longo da rampa - Uma cor clara na extrema esquerda, e as sombras ficam claras - Tons opostos lado a lado, e os tons médios ficam cinzentos - Apenas duas paragens muito distantes no tom ### Rampa que segura a imagem - Luminosidade a subir de forma constante da esquerda para a direita - Um quase preto à esquerda, um quase branco ou um tom claro à direita - Tons vizinhos, ou uma ponte viva entre tons distantes - Três a cinco paragens para controlar os tons médios Quebrar a regra da luminosidade de propósito dá um visual solarizado e psicadélico, que pode ser divertido em cartazes. Para tudo o que ainda deva parecer uma fotografia, mantém a rampa constante. Se um tom médio ficar cinzento, a solução é a mesma de qualquer gradiente: vê [gradientes embaciados](https://gradiently.design/pt-pt/guide/muddy-gradients). ## Para que servem os mapas de gradiente - **Conjuntos de fotografias coerentes:** fotografias de banco de imagens, do telemóvel e imagens antigas de arquivo saem todas numa só paleta; vê [consistência de marca](https://gradiently.design/pt-pt/guide/brand-consistency) - **Texturas de marca:** transforma qualquer textura em tons de cinzento, como nuvens, betão, tecido ou ruído, num fundo nas cores da tua marca; vê [texturas de fundo](https://gradiently.design/pt-pt/guide/background-texture) - **Ilustrações e ícones:** recolore um conjunto inteiro de uma vez, mapeando os cinzentos - **Correção de cor:** define uma camada de mapa de gradiente em Luz suave ou Cor com pouca opacidade para um visual de película subtil sobre as cores originais - **Dados e ciência:** os mapas de calor e as imagens em falsa cor são mapas de gradiente de medições - **Duotono e tritono:** duas ou três paragens para tratamentos de cartaz arrojados; vê [o efeito duotono](https://gradiently.design/pt-pt/guide/duotone-effect) ## Como aplicar um mapa de gradiente num editor de imagem 1. **Acrescenta um ajuste de mapa de gradiente** O Photoshop, o Affinity Photo e o GIMP têm todos um. Usa uma camada de ajuste sempre que puderes, para o original ficar intacto. 2. **Define primeiro as pontas** Põe uma versão quase preta da tua cor de marca mais escura à esquerda e um tom claro à direita. Verifica se a imagem ainda se lê. 3. **Acrescenta paragens para os tons médios** Coloca a tua cor de marca principal por volta dos 50% e ajusta a posição até a pele, os céus ou os objetos principais ficarem bem. 4. **Mistura de volta, se for preciso** Para corrigir a cor em vez de recolorir por completo, muda o modo de mistura da camada para Luz suave ou Cor e baixa a opacidade. 5. **Guarda a rampa** Guarda o gradiente como predefinição e usa-o em todas as imagens do conjunto, para condizerem todas. ## Um mapa de gradiente em CSS Os navegadores conseguem aplicar um mapa de gradiente com um filtro SVG. O `feColorMatrix` converte a imagem em tons de cinzento e o `feComponentTransfer` mapeia-a 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 paragens divididos por 255, em posições igualmente espaçadas. ```html ``` Um mapa de gradiente de cinco paragens como filtro SVG. Muda os valores da tabela para mudar a rampa. Os mapas de gradiente são o caminho de qualquer imagem até uma paleta que é tua. Se preferires partir da imagem, [igualar uma imagem](https://gradiently.design/pt-pt/guide/match-a-picture) encontra a sua paleta e os Marks mais próximos. Na Gradiently podes também tingir qualquer fotografia no Studio com as cores do Mark que estás a usar, em mono, duotono ou uma aguada mais suave, o que é um mapa de gradiente feito por ti. ## 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 duotono? Um duotono é um mapa de gradiente com apenas duas cores. Os mapas de gradiente podem ter três ou mais paragens para um controlo mais fino dos tons médios. ### Porque é que o meu mapa de gradiente parece estranho? É provável que a luminosidade da rampa suba e desça. Faz com que fique cada vez mais clara da esquerda para a direita, para as sombras continuarem escuras e os realces claros. ### Como uso um mapa de gradiente para correção de cor? Acrescenta o mapa de gradiente como camada de ajuste, depois define o modo de mistura como Luz suave ou Cor e baixa a opacidade. ### Posso usar um mapa de gradiente em CSS? Sim, com um filtro SVG que converte para tons de cinzento e depois mapeia cada canal pelos valores de tabela do `feComponentTransfer`.