Resumindo
- Um gradiente verde mistura tons de verde, do menta pálido e do verde-sálvia ao esmeralda, ao verde-floresta e ao lima elétrico, muitas vezes com um vizinho verde-azulado ou amarelo.
- O verde é muito associado a natureza, saúde, crescimento e dinheiro, e é por isso que é tão comum em sustentabilidade, bem-estar e finanças.
- O verde se mistura bem com verde-azulado, azul e amarelo, mas tende a ficar cinza quando misturado diretamente com rosa, vermelho ou roxo.
- O texto branco funciona sobre verdes profundos como #14532d, mas um verde médio como #16a34a precisa de texto escuro ou de tamanhos grandes.
- Verdes inesperados como oliva, verde-garrafa e chartreuse, combinados com uma cor parceira que não venha da natureza, fogem do visual ecológico cansado.
Nesta página
Um gradiente verde mistura tons de verde, do menta pálido e do verde-sálvia, passando pelo esmeralda e pelo verde-floresta, até o lima elétrico, muitas vezes com um vizinho verde-azulado ou amarelo. O verde tem mais alcance do que quase qualquer outra cor: pode parecer fresco e limpo, profundo e caro ou barulhento e sintético. Abaixo estão paletas de gradiente verde para cada clima, com CSS para copiar, as cores de texto que funcionam sobre elas e como evitar parecer mais um relatório de sustentabilidade.
A família do verde
Os verdes pendem para dois lados. Em direção ao amarelo, viram lima, chartreuse e oliva, que parecem quentes, enérgicos ou terrosos. Em direção ao azul, viram verde-azulado, jade e esmeralda, que parecem frios, calmos e refinados. Acinzente-os e você tem o verde-sálvia, suave e adulto. Escureça-os e você tem o verde-floresta e o verde-garrafa, que parecem tradicionais e um pouco luxuosos.
O que um gradiente verde transmite
As associações mais difundidas do verde são natureza, crescimento, saúde e frescor, que vêm direto das plantas. A convenção acrescentou outras: siga no semáforo, dinheiro nos Estados Unidos por causa das cédulas e sucesso em painéis e apps de finanças. Em alguns lugares ele também carrega significados religiosos e nacionais; o guia de significados das cores pelo mundo fala deles.
Na prática, isso significa que o tom fala quase tudo. Menta diz limpo. Sálvia diz calmo e ponderado. Floresta e garrafa dizem tradição. Lima diz energia. Verde-azulado diz refinamento. Decida qual desses você quer dizer antes de escolher um gradiente, e fica muito mais fácil escolher entre as paletas abaixo.
Gradientes verdes frescos e verde-menta
Verdes pálidos parecem limpos, frescos e leves. Combinam com skincare, saúde, comida e tudo o que precisa parecer fresco. Mantenha o texto escuro e aqueça um pouco uma das pontas para que não pareçam clínicos.
Gradientes verdes profundos e verde-floresta
Os verdes escuros estão entre as cores com cara mais cara que existem. Pense em carros de corrida, bibliotecas antigas e embalagens tradicionais. Sustentam bem texto branco e creme e combinam lindamente com dourado, latão e um branco quente.
Gradientes lima elétrico e verde neon
Os verdes ácidos e lima são barulhentos e sintéticos no melhor sentido. Combinam com esporte, música, games e lançamentos de tecnologia. Sobre um fundo quase preto eles brilham; sobre o branco podem cansar a vista, então use-os em áreas pequenas nesse caso.
Gradientes verde-azulados e jade
O verde puxado para o azul é calmo, refinado e discretamente confiante. Funciona bem para finanças, bem-estar e viagens, e é menos previsível do que o azul puro nessas categorias.
Como fugir do clichê da sustentabilidade
Como o verde está tão ligado à natureza, virou a cor padrão de tudo o que é ecológico, orgânico ou sustentável. Um verde-folha vivo, um fundo branco e um ícone de folha hoje representam a categoria, não uma empresa em particular. Se você atua nessa área e quer ser notado, mude pelo menos uma dessas três coisas.
Clichê
- Verde-folha vivo sobre branco
- Verde misturado só com mais verde e azul
- Folhas, globos e brotos como decoração
- Acabamento digital liso e brilhante
Novo
- Oliva, garrafa, sálvia ou chartreuse
- Um parceiro que não vem da natureza: rosa, lilás, creme ou preto
- Tipografia e textura em vez de ícones
- Grão de papel ou um material fosco
Verde e rosa formam um par especialmente bom para isso, porque a combinação parece botânica sem ser literal. Mas eles ficam quase opostos no círculo cromático, então mantenha-os em áreas separadas em vez de misturar um no outro. As cores complementares explicam por quê.
linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)Texto sobre gradientes verdes
| Texto sobre o fundo | Contraste | Veredito |
|---|---|---|
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 | Tinta escura funciona aqui |
#052e16 sobre #a3e635 | 9,9:1 | Excelente |
#052e16 sobre #86efac | 10,6:1 | Excelente |
Os verdes vivos são mais claros do que parecem, então o texto branco sobre eles costuma falhar. Uma tinta verde bem escura se lê melhor e mantém tudo na mesma família. Confira o ponto mais claro atrás do texto branco em qualquer gradiente; o guia de texto sobre um gradiente mostra como.
Um campo calmo e profundo para um post editorial.
Um story de contagem regressiva chamativo, onde um verde elétrico brilharia.
.panel {
background-color: #0b3b2e;
background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%);
color: #f5f0e6;
}Para mais paletas tiradas de florestas, campos e água, veja as paletas de cores da natureza.
Perguntas frequentes
Que cores combinam com o verde num gradiente?
Verde-azulado, azul, amarelo e lima se misturam bem com o verde. Rosa, vermelho e roxo são parceiros marcantes, mas devem ficar em áreas separadas, porque misturar o verde neles deixa cinza.
Qual é o CSS de um gradiente verde escuro?
Por exemplo, linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) dá um verde-garrafa profundo. Toda paleta desta página pode ser copiada como CSS.
Que cor de texto funciona sobre o verde?
Branco ou creme funcionam sobre verdes profundos. Sobre verdes vivos ou claros, use uma tinta verde bem escura, porque o texto branco costuma ficar abaixo do contraste recomendado.
Como usar o verde sem parecer uma marca ecológica?
Escolha verdes menos previsíveis como oliva, garrafa ou chartreuse, combine-os com uma cor que não venha da natureza, como rosa ou lilás, e use textura ou tipografia em vez de motivos de folhas.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
