Gradientes verde e azul: códigos frescos e naturais

Um gradiente 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 a água-marinha a fazer a ponte entre eles. A mistura fica limpa porque não há um ponto cinzento entre os dois matizes. Parece natural porque o viste a vida toda na água, no gelo e no céu. Os códigos aqui seguem quatro paisagens, com as cores de texto que se leem em cada uma e CSS para modo claro e escuro.

Porque é que o verde e o azul ficam naturais juntos

O verde e o azul são cores análogas: estão lado a lado no círculo, por isso cada passo entre eles é uma cor real, sobretudo verde-azulado e água-marinha. A natureza mostra este par constantemente, dos mares rasos onde a água azul corre sobre algas verdes e areia aos lagos glaciares e pinhais refletidos em água parada. Inspirar-se nessas cenas é a maneira mais fácil de o gradiente parecer calmo e não corporativo.

Lagoa: gradientes vivos de água-marinha e verde

A água tropical rasa é sobretudo água-marinha, com verde onde é mais rasa e azul onde aprofunda. Estes gradientes têm brilho de férias. Junta uma paragem de areia quente se os quiseres com ar de praia e não de piscina.

Lago de pinhal: gradientes escuros de verde e azul

O verde escuro a correr para azul escuro soa a calma, a valor e a confiança. Pensa num lago de floresta ao anoitecer, ou na cor de uma garrafa antiga. Suportam bem texto branco e servem finanças, equipamento de ar livre, arquitetura e qualquer marca que queira parecer estável.

Glaciar: gradientes de menta pálida e céu

Se subires o par ao máximo, ficas com gelo de glaciar e manhãs frias: limpo, arejado e muito calmo. Servem saúde, cuidados de pele, limpeza e aplicações de produtividade. Podem soar clínicos, por isso um toque de branco quente ajuda.

Aurora: verde e azul num céu noturno

A aurora boreal é luz verde e azul sobre preto, e por isso os gradientes de aurora estão entre os fundos escuros mais amados. Mantém a cor em faixas suaves e deixa o fundo escuro ocupar a maior parte do quadro. Gradientes de aurora cobre a técnica completa.

Cores de texto em gradientes verde e azul

A esmeralda e a água-marinha são surpreendentemente claras, por isso o texto branco nas versões vivas falha muitas vezes. A tinta verde-azulada escura funciona nas misturas claras e mantém tudo na mesma família; o branco e a menta lêem-se bem nas escuras. Os rácios abaixo usam a fórmula WCAG. Texto sobre gradiente mostra o que fazer quando uma linha atravessa as duas pontas.

Como aquecer uma paleta de verde e azul

O verde e o azul são ambos frios, por isso uma marca inteira neles pode parecer distante. Um acento quente resolve. A areia, o coral e o dourado suave estão do outro lado do círculo em relação ao verde-azulado, por isso usa-os ao lado do gradiente, num botão, num logótipo ou numa faixa fina num bordo, em vez de os misturares. Cores complementares explica porque é que misturar através do círculo dá cinzento.

CSS de gradiente 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 é uma forma elegante de fazer a troca de tema parecer desenhada e não invertida. Gradientes para modo escuro vai mais a fundo. No Gradiently, um Mark é renderizado em todos os tamanhos que crias e escolhe tinta clara ou escura em cada linha a partir da sua própria paleta, por isso tanto os tons vivos de lagoa como os escuros de pinhal mantêm as palavras legíveis.