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

[Canonical HTML page](https://gradiently.design/pt-br/guide/lime-gradient)

O limão é o verde mais escandaloso que existe. Usado com um plano, fica afiado e moderno; usado sem plano, parece marca-texto. Aqui estão os códigos e as regras que deixam o limão do seu lado.

## The short version

- Um degradê verde-limão mistura verdes que puxam para o amarelo, como #bef264, #a3e635 e #84cc16, em geral indo para um oliva mais escuro, um quase preto ou um amarelo ou turquesa vizinho.
- O limão é muito claro para o quanto é saturado, então texto branco sobre ele quase sempre falha no contraste, e uma tinta verde profunda ou quase preta fica muito mais legível.
- O limão brilha mais sobre um fundo quase preto, onde um pouco dele sustenta um design inteiro.
- Misturar o limão direto com roxo ou rosa costuma gerar um meio acinzentado, então mantenha essas combinações em áreas separadas ou passe por uma cor de ligação.
- O limão combina com esporte, música, lançamentos de tecnologia e comida fresca, e funciona melhor como destaque do que como superfície inteira.

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](https://gradiently.design/pt-br/guide/green-gradient).

- Névoa cítrica: #ecfccb
- Limão claro: #d9f99d
- Limão fresco: #bef264
- Limão: #a3e635
- Limão folha: #84cc16
- Limão profundo: #65a30d
- Oliva: #3f6212
- Tinta limão: #1a2e05

Uma escala de limão para o dia a dia, de quase branco a quase preto. Degradês feitos com vizinhos desta escala nunca embarram.

## 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.

- Luz limão no preto: `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`
- Noite para limão: `linear-gradient(160deg, #0b0f05 0%, #1a2e05 45%, #84cc16 100%)`
- Luz de estádio: `radial-gradient(ellipse at 50% 110%, #bef264 0%, #4d7c0f 35%, #0a0d06 75%)`
- Turquesa profundo para limão: `linear-gradient(135deg, #0b1a14 0%, #134e4a 45%, #a3e635 100%)`

Quatro degradês escuros de limão. Cada um mantém o limão mais claro numa região, para que os títulos fiquem no lado escuro.

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](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) 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.

- Creme de limão siciliano a limão: `linear-gradient(135deg, #fefce8 0%, #ecfccb 50%, #d9f99d 100%)`
- Limão para menta: `linear-gradient(180deg, #f7fee7 0%, #d1fae5 100%)`
- Sol cítrico: `radial-gradient(circle at 30% 30%, #fef9c3 0%, #d9f99d 45%, #bef264 100%)`

Degradês de limão claro para marcas calmas e frescas. Tinta verde-escura fica linda nos três.

Se você quer que a cor puxe mais para o frio e o limpo, os [degradês menta](https://gradiently.design/pt-br/guide/mint-gradient) 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](https://gradiently.design/pt-br/guide/muddy-gradients) mostra exatamente por que isso acontece.

### Evite

- Limão misturado direto com violeta ou magenta
- Texto branco sobre limão vivo
- Limão preenchendo cada pixel de um cartaz grande
- Limão com vermelho, que parece placa de aviso

### Faça

- Limão para amarelo, turquesa ou oliva profundo
- Tinta quase preta ou verde profunda sobre o limão
- Limão como brilho sobre fundo escuro ou creme
- Roxo ou rosa ao lado do limão, não misturados com ele

Limão, amarelo-limão, tangerina: `linear-gradient(120deg, #a3e635 0%, #facc15 50%, #f97316 100%)`

Uma sequência cítrica completa. Cada passo é vizinho próximo do anterior, então o meio continua vivo em vez de ficar marrom.

## 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](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Limão `#a3e635` | Branco `#ffffff` | 1,5:1 | Falha, até em títulos |
| Limão `#a3e635` | Tinta limão `#1a2e05` | 9,7:1 | Excelente |
| Limão folha `#84cc16` | Branco `#ffffff` | 2,0:1 | Falha |
| Limão claro `#d9f99d` | Tinta limão `#1a2e05` | 12,5:1 | Excelente |
| Oliva `#3f6212` | Branco `#ffffff` | 7,1:1 | Bom, use na ponta escura |
| Quase preto `#0b0f05` | Limão `#a3e635` | 12,8:1 | Excelente, limão como tinta |

Num degradê, confira o ponto mais claro atrás de cada linha de texto, e não a cor média.

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ê](https://gradiently.design/pt-br/guide/text-on-gradient) explica o que fazer quando as palavras atravessam as duas pontas de uma mistura.

Um post retrato de lançamento anunciando tênis de quadra em limão, com texto claro sobre um degradê verde-escuro iluminado por limão num canto

Moda esportiva sobre fundo escuro com uma luz limão. As palavras ficam no lado escuro.

Um post retrato para uma casa de sucos com título verde-escuro sobre um degradê de limão claro e amarelo-limão

Um post de casa de sucos sobre um fundo cítrico suave, com tinta verde profunda.

## 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](https://gradiently.design/pt-br/guide/css-gradient-oklch) explica a sintaxe.

```css
.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;
}
```

Um destaque escuro com uma luz limão e um botão limão com texto verde profundo. Navegadores sem suporte a `in oklch` ignoram o segundo fundo do botão e mantêm o primeiro.

## 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](https://gradiently.design/pt-br/guide/neon-gradients).
- **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.

## FAQ

### Qual é o código hex do verde-limão?

Um limão vivo bastante usado é `#a3e635`. Os limões mais claros ficam por volta de `#d9f99d` e os mais profundos por volta de `#65a30d`. O lime puro da web, `#00ff00`, é muito mais agressivo e raramente fica bom em design.

### Qual cor de texto usar num degradê verde-limão?

Use um verde muito escuro como `#1a2e05` ou um quase preto. Texto branco sobre limão vivo falha feio no contraste, com cerca de 1,5:1.

### Quais cores combinam com verde-limão num degradê?

Amarelo, amarelo-limão, turquesa, menta e oliva profundo se misturam bem com o limão. Roxo e rosa ficam marcantes ao lado dele, mas acinzentam se você misturar direto.

### Como faço um degradê verde neon em CSS?

Coloque um brilho limão sobre um fundo quase preto, por exemplo `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`. É o fundo escuro que faz o limão parecer neon.

### Verde-limão é uma boa cor de marca?

Pode ser, para marcas cheias de energia em esporte, música, tecnologia ou comida fresca. Use como destaque sobre fundo escuro ou creme, e não na superfície inteira, e combine com tinta escura.