Gradiente verde-menta: códigos frescos e claros

Um gradiente verde-menta mistura verdes pálidos, ligeiramente azulados, do quase branco a um suave hortelã, e poucos verdes parecem tão frescos. Mantido quente com um parceiro creme ou pêssego, parece um café, um jardim ou uma manhã de primavera. Combinado com cinzento e branco puro, começa a parecer a sala de espera de um dentista. Aqui ficam códigos de menta que se mantêm frescos, os parceiros que os aquecem e a cor de texto que os mantém legíveis.

Um gradiente verde-menta numa linha de CSS

Se só precisas de um, começa aqui. Vai de um branco quente, cremoso, a uma menta clara, por isso nunca parece frio, e deixa muito espaço calmo no topo para palavras.

Gradientes de menta pálida

Estes vivem perto do branco. São perfeitos para fundos com muita leitura, como uma ementa ou uma lista de preços, e para fotografias de produto em que queres que a embalagem seja a protagonista. Os gradientes pastel seguem a mesma abordagem para todas as cores.

Decide cedo para que lado a tua menta pende. As mentas azuladas parecem frias, limpas e modernas, o que assenta a tecnologia, fatos de banho e cuidados de pele. As mentas amareladas parecem quentes e comestíveis, o que assenta a comida, plantas e tudo o que é para crianças. Misturar as duas num gradiente é possível, mas escolhe uma para dominar, para que a marca tenha uma temperatura clara.

Menta com pêssego, creme ou rosa-claro

O oposto da menta na roda de cores é um rosa coral suave. Em força total, os opostos misturam-se em cinzento, mas em força pastel há tão pouca saturação que se atravessam limpamente. Isso faz de menta e pêssego, ou menta e rosa-claro, uma das combinações mais bonitas, e o calor impede a menta de parecer médica. Há mais combinações nas combinações de cores para gradientes.

Menta que não parece pasta de dentes

Muita gente associa a menta a pasta de dentes, clínicas e fardas hospitalares. Se não estás nesses setores, afasta-te das combinações que os sugerem.

O grão importa mais do que se pensa. Um gradiente digital pálido sem textura parece uma predefinição; um pouco de ruído faz com que pareça um cartão de ementa impresso. Os gradientes com grão mostram como.

Gradientes de menta mais profundos: até esmeralda e floresta

Levar a menta até ao esmeralda ou ao verde-floresta dá um gradiente com frescura e profundidade. Assenta a marcas de sustentabilidade, lojas de plantas, matcha e alimentação saudável, e a ponta escura aguenta texto branco. Para toda a gama de verdes, vê os gradientes verdes.

Texto sobre um gradiente verde-menta

A menta é uma das cores mais claras que existem, por isso o texto branco desaparece nela: branco sobre hortelã #a7f3d0 mede bem abaixo de 2 para 1. O verde-floresta #064e3b sobre a mesma menta mede cerca de 7,6 para 1 e mantém todo o design na mesma família de cor. Só passa para branco onde o gradiente já aprofundou até esmeralda #047857 ou mais escuro. O contraste de cor e acessibilidade explica os limiares.

No Gradiently, o Pro transforma um design em todos os tamanhos de que precisas num só passo, e a tinta automática escolhe texto claro ou escuro para cada linha a partir das cores do próprio Mark, por isso uma menta pálida nunca fica com texto branco ilegível depois de redimensionar. Pequenos cafés e lojas encontram mais ideias na identidade de marca para cafés e nas paletas de cores de primavera.

CSS de gradiente verde-menta para um site

Num site, a menta funciona melhor como fundo de secção do que como página inteira, para que surja como um momento fresco entre secções brancas. Uma luz quente e ténue num canto evita que uma grande área de menta pareça plana, e usar verde-floresta em vez de preto no texto corrido mantém a página suave.

.section-mint {
  background-color: #ecfdf5; /* fallback */
  background-image:
    radial-gradient(circle at 85% 20%, #fde2cf 0%, transparent 35%),
    linear-gradient(160deg, #fbfdf7 0%, #d1fae5 50%, #a7f3d0 100%);
  color: #064e3b;
}

.section-mint a { color: #065f46; }