# Gradientes verdes: frescos, profundos e elétricos [Canonical HTML page](https://gradiently.design/pt-pt/guide/green-gradient) O verde pode ser uma manhã de primavera, um clube privado ou um cartaz de festa. Aqui ficam gradientes verdes para cada um, com códigos, e uma saída do cliché do verde-folha. ## The short version - Um gradiente verde mistura tons de verde, do menta pálido e da salva ao esmeralda, à floresta e ao lima elétrico, muitas vezes com um verde-azulado ou um amarelo vizinho. - O verde associa-se muito à natureza, à saúde, ao crescimento e ao dinheiro, e por isso é tão comum na sustentabilidade, no bem-estar e nas finanças. - O verde mistura-se bem com verde-azulado, azul e amarelo, mas tende a acinzentar quando é misturado diretamente com rosa, vermelho ou roxo. - O texto branco funciona sobre verdes profundos como #14532d, mas um verde médio como #16a34a pede texto escuro ou tamanhos grandes. - Verdes inesperados, como azeitona, garrafa e chartreuse, combinados com uma cor parceira não natural, evitam o aspeto ecológico já gasto. Um **gradiente verde** mistura tons de verde, do menta pálido e da salva ao esmeralda e à floresta, até ao lima elétrico, muitas vezes com um verde-azulado ou um amarelo vizinho. O verde tem mais alcance do que quase qualquer outra cor: pode parecer fresco e limpo, profundo e caro, ou forte e sintético. Abaixo ficam paletas de gradiente verde para cada ambiente, com CSS para copiar, as cores de texto que funcionam sobre elas e como evitar parecer todos os relatórios de sustentabilidade. ## A família dos verdes Os verdes inclinam-se para dois lados. Para o amarelo, tornam-se lima, chartreuse e azeitona, que parecem quentes, enérgicos ou terrosos. Para o azul, tornam-se verde-azulado, jade e esmeralda, que parecem frios, calmos e polidos. Se os acinzentares, obténs salva, suave e adulto. Se os escureceres, obténs floresta e verde-garrafa, que parecem estabelecidos e um pouco luxuosos. - Menta: #d1fae5 - Salva: #a3b18a - Lima: #a3e635 - Esmeralda: #059669 - Verde-azulado: #0f766e - Azeitona: #556b2f - Floresta: #14532d - Verde-garrafa: #0b3b2e Oito verdes. Versões de uma só família de cor, inclinadas para o amarelo, para o azul, acinzentadas e profundas. ## O que um gradiente verde comunica As associações do verde mais partilhadas são a natureza, o crescimento, a saúde e o frescor, que vêm diretamente das plantas. A convenção acrescentou mais: avançar nos semáforos, dinheiro nos Estados Unidos por causa das notas, e sucesso em painéis e aplicações financeiras. Em alguns sítios tem também significados religiosos e nacionais; [o significado das cores pelo mundo](https://gradiently.design/pt-pt/guide/color-meanings-around-the-world) trata deles. Na prática, isto quer dizer que o tom fala quase tudo. O menta diz limpo. A salva diz calmo e ponderado. A floresta e o garrafa dizem tradição. O lima diz energia. O verde-azulado diz requinte. Decide qual destes queres antes de escolher um gradiente e as paletas abaixo ficam muito mais fáceis de escolher. ## Gradientes verdes frescos e menta Os verdes pálidos parecem limpos, frios e leves. Servem para cuidados de pele, saúde, alimentação e tudo o que deva parecer fresco. Mantém o texto escuro e aquece-os ligeiramente numa das pontas para não parecerem clínicos. - Menta: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)` - Manhã de primavera: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)` - Papel de salva: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)` - Água-marinha a lima: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)` Gradientes de verde claro. As pontas amarela e lima dão calor e evitam que pareçam frios. ## Gradientes verdes profundos e de floresta Os verdes escuros estão entre as cores com aspeto mais caro. Pensa em carros de corrida, bibliotecas antigas e embalagens de tradição. Suportam bem texto branco e creme e combinam lindamente com dourado, latão e branco quente. - Verde-garrafa: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)` - Chão da floresta: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)` - Brilho esmeralda: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)` - Azeitona a latão: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)` Gradientes de verde profundo. O de azeitona a latão mostra como o verde escuro aceita bem um parceiro metálico quente. ## Gradientes de lima elétrico e verde néon Os verdes ácidos e lima são fortes e sintéticos, no melhor sentido. Servem para desporto, música, jogos e lançamentos tecnológicos. Sobre um fundo quase preto brilham; sobre branco podem ser difíceis de olhar, por isso usa-os em áreas pequenas. - Lima sobre preto: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)` - Lima a limão: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)` - Brilho ácido: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)` - Verde a ciano: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)` Verdes elétricos. Só com vizinhos: preto, amarelo e ciano. ## Gradientes de verde-azulado e jade O verde que se inclina para o azul é calmo, polido e discretamente confiante. Funciona bem em finanças, bem-estar e viagens, e é menos esperado do que o azul puro nessas categorias. - Verde-azulado profundo: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)` - Jade a água-marinha: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)` - Luz de lagoa: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)` Verde-azulado e jade. Ficam entre os verdes acima e os [gradientes azuis](https://gradiently.design/pt-pt/guide/blue-gradient). ## Evitar o cliché da sustentabilidade Como o verde está tão ligado à natureza, tornou-se a cor por defeito de tudo o que é ecológico, biológico ou sustentável. Um verde-folha vivo, um fundo branco e um ícone de folha leem-se hoje como a categoria e não como uma empresa em particular. Se trabalhas nesse setor e queres ser notado, muda pelo menos uma dessas três coisas. ### Cliché - Verde-folha vivo sobre branco - Verde misturado só com mais verde e azul - Folhas, globos e rebentos como decoração - Acabamento digital liso e brilhante ### Fresco - Azeitona, garrafa, salva ou chartreuse - Um parceiro não natural: rosa, lilás, creme ou preto - Tipografia e textura em vez de ícones - Grão de papel ou um material mate O verde e o rosa formam um par particularmente bom para isto, porque a combinação parece botânica sem ser literal. Ficam quase opostos na roda das cores, por isso mantém-nos em áreas separadas em vez de misturar um no outro. As [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explicam porquê. Verde-garrafa e rosa, divididos: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)` Dois opostos lado a lado com uma aresta nítida. Marcante, botânico e nada parecido com uma paleta ecológica de banco de imagens. ## Texto sobre gradientes verdes | Texto sobre fundo | Contraste | Veredicto | | --- | --- | --- | | Branco sobre `#14532d` | 9.1:1 | Excelente | | Branco sobre `#15803d` | 5.0:1 | Bom para texto corrido | | Branco sobre `#16a34a` | 3.3:1 | Só texto grande | | `#052e16` sobre `#22c55e` | 6.5:1 | A tinta escura funciona aqui | | `#052e16` sobre `#a3e635` | 9.9:1 | Excelente | | `#052e16` sobre `#86efac` | 10.6:1 | Excelente | Rácios de contraste WCAG, calculados. O texto corrido precisa de 4,5:1 e o texto grande de 3:1. Os verdes vivos são mais claros do que parecem, por isso o texto branco sobre eles costuma falhar. Uma tinta verde muito escura lê-se melhor e mantém tudo na família. Verifica o ponto mais claro por trás do texto branco em qualquer gradiente; [texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) mostra como. Uma publicação vertical de notas de campo com o título O que cresce em outubro sobre um gradiente profundo Um campo calmo e profundo para uma publicação editorial. Uma story vertical de contagem decrescente com o texto Faltam 3 dias sobre um gradiente vivo Uma story de contagem decrescente forte, onde um verde elétrico brilharia. ```css .panel { background-color: #0b3b2e; background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%); color: #f5f0e6; } ``` Verde-garrafa com texto creme quente: um par fácil e premium. Para mais paletas tiradas de florestas, campos e água, vê as [paletas de cores da natureza](https://gradiently.design/pt-pt/guide/nature-color-palettes). ## FAQ ### Que cores combinam bem com verde num gradiente? Verde-azulado, azul, amarelo e lima misturam-se bem com o verde. Rosa, vermelho e roxo são parceiros marcantes, mas devem ficar em áreas separadas, porque misturar o verde com eles resulta em cinzento. ### Qual é o CSS de um gradiente verde escuro? Por exemplo, linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) dá um verde-garrafa profundo. Todas as paletas desta página podem ser copiadas como CSS. ### Que cor de texto funciona sobre o verde? Branco ou creme funcionam sobre verdes profundos. Sobre verdes vivos ou claros, usa uma tinta verde muito escura, porque o texto branco costuma ficar abaixo do contraste recomendado. ### Como uso o verde sem parecer uma marca ecológica? Escolhe verdes menos esperados, como azeitona, garrafa ou chartreuse, combina-os com uma cor não natural como rosa ou lilás e usa textura ou tipografia em vez de motivos de folhas.