Degradê verde e azul: códigos frescos que parecem naturais

Um degradê verde e azul mistura dois vizinhos frios: verdes como esmeralda #10b981 ou menta #a7f3d0 e azuis como #0284c7 ou céu #bae6fd, com o verde-azulado e o aqua formando a ponte entre eles. A mistura fica limpa porque não há ponto cinza entre os dois tons. Parece natural porque você o vê a vida inteira na água, no gelo e no céu. Os códigos aqui seguem quatro paisagens, com as cores de texto que funcionam em cada uma e CSS para modo claro e escuro.

Por que verde e azul combinam tão naturalmente

Verde e azul são cores análogas: ficam lado a lado no círculo, então cada passo entre eles é uma cor real, na maioria verde-azulado e aqua. A natureza mostra o par o tempo todo, de mares rasos em que a água azul corre sobre algas verdes e areia a lagos glaciais e florestas de pinheiros refletidas em água parada. Tomar emprestado dessas cenas é a forma mais fácil de deixar o degradê calmo em vez de corporativo.

Lagoa: degradês vivos de aqua e verde

A água rasa tropical é quase toda aqua, com verde onde é mais rasa e azul onde fica mais funda. Esses degradês têm cara de férias. Acrescente um ponto de areia quente se quiser que pareçam uma praia e não uma piscina.

Lago de pinheiros: degradês profundos de verde e azul

Verde escuro correndo para azul escuro parece silencioso, caro e confiável. Pense em um lago na floresta ao anoitecer ou na cor de uma garrafa antiga. Eles sustentam bem o texto branco e combinam com finanças, equipamentos de ar livre, arquitetura e qualquer marca que queira passar firmeza.

Geleira: degradês de menta pálida e céu

Clareie o par por completo e você tem gelo de geleira e manhãs frias: limpo, arejado e muito calmo. Combinam com saúde, cuidados com a pele, limpeza e apps de produtividade. Podem parecer clínicos, então um toque de branco quente ajuda.

Aurora: verde e azul em um céu noturno

A aurora boreal é luz verde e azul sobre o preto, por isso os degradês de aurora estão entre os fundos escuros mais amados. Mantenha a cor em faixas suaves e deixe o fundo escuro ocupar a maior parte do quadro. Degradês de aurora cobre a técnica completa.

Cores de texto em degradês verde e azul

Esmeralda e aqua são surpreendentemente claros, então o texto branco nas versões vivas muitas vezes falha. A tinta verde-azulado profundo funciona nas misturas claras e mantém tudo na mesma família; branco e menta se leem bem nas escuras. As razões abaixo usam a fórmula WCAG. Texto sobre degradê mostra o que fazer quando uma linha cruza as duas pontas.

Como aquecer uma paleta de verde e azul

Verde e azul são ambos frios, então uma marca inteira neles pode parecer distante. Um acento quente resolve. Areia, coral e dourado suave ficam do outro lado do círculo em relação ao verde-azulado, então use-os ao lado do degradê, em um botão, em um logo ou em uma faixa fina em uma das bordas, em vez de misturá-los. Cores complementares explica por que misturar através do círculo dá cinza.

CSS de degradê verde e azul para modo claro e escuro

.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}

Combinar uma versão clara e uma escura do mesmo verde e azul é um jeito elegante de fazer a troca de tema parecer desenhada e não invertida. Degradês para modo escuro vai mais a fundo. No Gradiently, um Mark é renderizado em todos os tamanhos que você cria e escolhe tinta clara ou escura para cada linha a partir da própria paleta, então os tons vivos de lagoa e os escuros de pinheiro mantêm as palavras legíveis.