Degradê verde-limão: códigos vibrantes sob controle

Um degradê verde-limão mistura o lado amarelo do verde: cítrico claro como #d9f99d, limão vivo como #a3e635 e tons de folha mais profundos como #65a30d, muitas vezes se dissolvendo em quase preto, oliva, amarelo-limão ou turquesa. O controle vem de três escolhas: quanto da superfície é limão, sobre que fundo ele fica e qual é a cor das palavras. Acerte essas três e o limão parece intencional e atual. Abaixo estão códigos de degradê verde-limão para cada clima, as tintas que ficam legíveis sobre eles e as combinações que continuam limpas.

Por que o limão se comporta diferente dos outros verdes

O limão fica entre o amarelo e o verde no círculo cromático e, como o amarelo, é claríssimo mesmo com saturação máxima. Daí vêm tanto a energia quanto os problemas dele. Ele salta de uma tela escura, mas também apaga texto branco e cansa a vista quando ocupa uma área grande. Um verde floresta ou esmeralda se comporta mais como azul; o limão se comporta mais como marca-texto. A família completa está em degradês verdes.

Códigos de degradê verde-limão sobre fundo escuro

É aqui que o limão ganha a fama. Sobre um fundo quase preto, um pequeno brilho de limão parece elétrico sem cansar, porque o olho tem um lugar escuro para descansar. Mantenha o limão num canto ou numa faixa e deixe o fundo fazer a maior parte do trabalho.

Misturas escuras como estas são onde o banding aparece primeiro, principalmente depois que uma plataforma recomprime a imagem. Uma camada fina de granulação resolve, e fundos em degradê escuro traz mais fundos para testar.

Degradês de limão suave e cítricos pastel

Suavizado para o creme ou para a menta, o limão perde o grito e fica fresco, limpo e um pouco botânico. Esses tons combinam com cafés, casas de sucos, skincare e campanhas de primavera. Esquente levemente uma das pontas com amarelo-limão ou creme para o resultado parecer ensolarado e não clínico.

Se você quer que a cor puxe mais para o frio e o limpo, os degradês menta estão logo ao lado.

Cores que combinam bem com o limão

O limão se mistura bem com os vizinhos: o amarelo de um lado, o verde e o turquesa do outro. Essas transições continuam vivas do começo ao fim. O problema começa com as cores do outro lado do círculo. Roxo e magenta estão perto do complementar do limão, e uma mistura direta entre eles passa por um meio cinza e sem graça. Degradês embarrados mostra exatamente por que isso acontece.

Cores de texto que ficam legíveis sobre o limão

Como o limão é muito claro, o instinto de colocar texto branco sobre ele quase sempre está errado. A resposta é uma tinta escura, de preferência um verde bem profundo, para o design inteiro ficar numa família só. As proporções abaixo foram medidas com a fórmula de contraste da WCAG; 4,5:1 é o mínimo habitual para texto corrido. Para saber mais sobre o método, veja contraste de cores e acessibilidade.

Vale reparar na última linha: o limão é uma cor de texto excelente sobre o preto. Um título em limão sobre um degradê quase preto é uma das combinações mais legíveis que existem. Texto sobre degradê explica o que fazer quando as palavras atravessam as duas pontas de uma mistura.

CSS de degradê verde-limão para botões e destaques

Na web, o limão funciona muito bem como chamada para ação numa página escura e mal como fundo de página inteira. O trecho abaixo cria um destaque escuro com um brilho limão e um botão limão com texto escuro. Interpolar em OKLCH mantém a mistura viva onde o sRGB afundaria; degradês OKLCH em CSS explica a sintaxe.

.hero {
  min-height: 80vh;
  background-color: #0b0f05;
  background-image:
    radial-gradient(circle at 85% 15%, #a3e635 0%, transparent 40%),
    linear-gradient(160deg, #0b0f05 0%, #1a2e05 100%);
  color: #f7fee7;
}

.button {
  background: linear-gradient(135deg, #bef264, #84cc16);
  background: linear-gradient(135deg in oklch, #bef264, #84cc16);
  color: #1a2e05;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

Onde um degradê verde-limão funciona melhor

• Esporte e fitness: dias de jogo, inscrições em corridas, uniforme novo. Limão no preto transmite velocidade.
• Música e vida noturna: festas e capas de lançamento, onde ele fica natural ao lado dos degradês neon.
• Lançamentos de tecnologia e produto: um único destaque em limão faz uma interface escura parecer ligada.
• Comidas e bebidas frescas: sucos, saladas, drinks e tudo que é cítrico, na faixa pastel mais suave.
• Campanhas de primavera: limão claro e amarelo-limão dizem estação nova sem o rosa pastel de sempre.

Como o limão é muito reconhecível, também é fácil ficar parecido com todo mundo que escolheu essa cor este ano. No Gradiently, cada Mark é comparado com todos os outros e recusado se ficar parecido demais, então um visual limão que você reserva é um que ninguém mais consegue exportar. A legibilidade dele também se ajusta atrás de cada linha, então o limão nunca acaba embaixo de palavras brancas por acidente.