# Gradiente verde lima: códigos vivos, com controlo

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

O lima é do verde mais berrante que há. Com um plano fica nítido e moderno; sem plano parece um marcador fluorescente. Aqui ficam os códigos e as regras que o põem do teu lado.

## The short version

- Um gradiente verde lima mistura verdes inclinados para o amarelo, como #bef264, #a3e635 e #84cc16, normalmente rumo a um verde-azeitona mais escuro, a um quase preto ou a um amarelo ou verde-azulado vizinho.
- O lima é muito claro para a saturação que tem, por isso o texto branco quase sempre falha o contraste e uma tinta verde profunda ou quase preta lê-se muito melhor.
- O lima brilha mais sobre um fundo quase preto, onde uma pequena quantidade sustenta um design inteiro.
- Misturar lima diretamente com roxo ou rosa tende a dar um meio cinzento, por isso mantém essas combinações em zonas separadas ou passa por uma cor de ligação.
- O lima serve desporto, música, lançamentos tecnológicos e comida fresca, e funciona melhor como acento do que como superfície inteira.

Um **gradiente verde lima** mistura o lado amarelo do verde: cítrico pálido como `#d9f99d`, lima vivo como `#a3e635` e tons de folha mais profundos como `#65a30d`, muitas vezes a esbater para quase preto, azeitona, limão ou verde-azulado. O controlo vem de três escolhas: quanta superfície é lima, em que fundo assenta e de que cor são as palavras. Acertando nisto, o lima parece intencional e atual. Abaixo tens códigos de gradiente lima para cada ambiente, as tintas que se leem neles e as combinações que ficam limpas.

## Porque o lima se comporta de forma diferente dos outros verdes

O lima fica entre o amarelo e o verde no círculo cromático e, tal como o amarelo, é extremamente claro mesmo com saturação máxima. Daí vem tanto a sua energia como os seus problemas. Salta de um ecrã escuro, mas também apaga o texto branco e cansa a vista quando ocupa uma área grande. Um verde-floresta ou esmeralda comporta-se mais como o azul; o lima comporta-se mais como um marcador fluorescente. A família completa está em [gradientes verdes](https://gradiently.design/pt-pt/guide/green-gradient).

- Névoa cítrica: #ecfccb
- Lima pálido: #d9f99d
- Lima fresco: #bef264
- Lima: #a3e635
- Lima folha: #84cc16
- Lima profundo: #65a30d
- Azeitona: #3f6212
- Tinta lima: #1a2e05

Uma rampa de lima que funciona, de quase branco a quase preto. Os gradientes feitos com vizinhos desta rampa nunca ficam turvos.

## Códigos de gradiente verde lima sobre fundo escuro

É aqui que o lima ganha a fama. Sobre um fundo quase preto, um pequeno brilho de lima parece elétrico sem cansar, porque a vista tem onde descansar. Limita o lima a um canto ou a uma faixa e deixa o fundo fazer a maior parte do trabalho.

- Luz lima sobre preto: `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`
- Da noite ao lima: `linear-gradient(160deg, #0b0f05 0%, #1a2e05 45%, #84cc16 100%)`
- Brilho de estádio: `radial-gradient(ellipse at 50% 110%, #bef264 0%, #4d7c0f 35%, #0a0d06 75%)`
- De verde-azulado a lima: `linear-gradient(135deg, #0b1a14 0%, #134e4a 45%, #a3e635 100%)`

Quatro gradientes lima escuros. Cada um guarda o lima mais vivo numa só zona, para os títulos ficarem do lado escuro.

Estas misturas escuras são onde o banding aparece primeiro, sobretudo depois de uma plataforma as recomprimir. Uma camada fina de grão resolve, e [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) tem mais fundos para experimentar.

## Gradientes lima suaves e pastéis cítricos

O lima suavizado em direção ao creme ou à menta perde o grito e fica fresco, limpo e ligeiramente botânico. Combina com cafés, bares de sumos, cuidados de pele e campanhas de primavera. Aquece uma ponta com um pouco de limão ou creme, para o resultado parecer banhado de sol e não clínico.

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

Gradientes lima pálidos para marcas calmas e frescas. A tinta verde escura lê-se lindamente nos três.

Se queres que a cor se incline mais para o fresco e limpo, os [gradientes menta](https://gradiently.design/pt-pt/guide/mint-gradient) ficam mesmo ao lado.

## Cores que combinam bem com lima

O lima mistura-se bem com os vizinhos: amarelo de um lado, verde e verde-azulado do outro. Essas transições mantêm-se vivas do princípio ao fim. O problema começa com as cores do lado oposto do círculo. O roxo e o magenta estão perto do complementar do lima, e uma mistura direta entre eles passa por um meio cinzento e baço. [Gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) mostra exatamente porque acontece.

### Evita

- Lima misturado diretamente com violeta ou magenta
- Texto branco sobre lima vivo
- Lima a encher todos os píxeis de um cartaz grande
- Lima com vermelho, que parece um sinal de aviso

### Faz

- Lima para amarelo, verde-azulado ou azeitona profunda
- Tinta quase preta ou verde profunda sobre lima
- Lima como brilho sobre fundo escuro ou creme
- Roxo ou rosa ao lado do lima, não misturado com ele

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

Um percurso cítrico completo. Cada passo é vizinho próximo do anterior, por isso o meio fica vivo em vez de virar castanho.

## Cores de texto que se leem sobre lima

Como o lima é tão claro, o instinto de lhe pôr texto branco está quase sempre errado. A resposta é tinta escura, de preferência um verde muito profundo para o design ficar todo na mesma família. As razões abaixo foram medidas com a fórmula de contraste WCAG; 4,5:1 é o mínimo habitual para texto corrido. Para mais sobre o método, vê [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

| Fundo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Lima `#a3e635` | Branco `#ffffff` | 1,5:1 | Falha, mesmo em títulos |
| Lima `#a3e635` | Tinta lima `#1a2e05` | 9,7:1 | Excelente |
| Lima folha `#84cc16` | Branco `#ffffff` | 2,0:1 | Falha |
| Lima pálido `#d9f99d` | Tinta lima `#1a2e05` | 12,5:1 | Excelente |
| Azeitona `#3f6212` | Branco `#ffffff` | 7,1:1 | Bom, usa para o extremo escuro |
| Quase preto `#0b0f05` | Lima `#a3e635` | 12,8:1 | Excelente, com o lima como tinta |

Num gradiente, verifica o ponto mais claro atrás de cada linha de texto, não a cor média.

Repara na última linha: o lima é uma cor de texto soberba sobre preto. Um título lima sobre um gradiente quase preto é das combinações mais legíveis que existem. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) explica o que fazer quando as palavras atravessam os dois extremos de uma mistura.

Uma publicação vertical de lançamento de produto a anunciar sapatilhas de court em lima, com letra clara sobre um gradiente verde escuro iluminado por lima num canto

Roupa desportiva sobre fundo escuro com uma luz lima. As palavras ficam do lado escuro.

Uma publicação vertical para um bar de sumos com título verde escuro sobre um gradiente de lima pálido e limão

Uma publicação de bar de sumos sobre fundo cítrico suave, com tinta verde profunda.

## CSS de gradiente lima para botões e heros

Na web, o lima funciona de forma brilhante como apelo à ação numa página escura e mal como fundo de página inteira. O excerto abaixo dá um hero escuro com brilho lima e um botão lima com texto escuro. Interpolar em OKLCH mantém a mistura viva onde o sRGB desceria; [gradientes OKLCH em CSS](https://gradiently.design/pt-pt/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 hero escuro com uma só luz lima e um botão lima com texto verde profundo. Os navegadores que não suportam `in oklch` ignoram o segundo fundo do botão e ficam com o primeiro.

## Onde um gradiente verde lima funciona melhor

- **Desporto e fitness:** dias de jogo, inscrições em corridas, equipamento novo. O lima sobre preto lê-se como velocidade.
- **Música e vida noturna:** noites de clube e capas de lançamentos, onde fica naturalmente ao lado dos [gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients).
- **Tecnologia e lançamentos de produto:** um único acento lima faz uma interface escura parecer ligada.
- **Comida e bebida frescas:** sumos, saladas, cocktails e tudo o que seja cítrico, na gama pastel mais suave.
- **Campanhas de primavera:** lima pálido e limão dizem nova estação sem o habitual rosa pastel.

Como o lima é tão reconhecível, também é fácil parecer igual a todos os que o escolheram este ano. No Gradiently, cada Mark é comparado com todos os outros e recusado se estiver demasiado próximo, por isso um visual lima que reserves é um que mais ninguém pode exportar. A legibilidade também se ajusta atrás de cada linha, por isso o lima nunca acaba por baixo de palavras brancas por acidente.

## FAQ

### Qual é o código hexadecimal do verde lima?

Um lima vivo muito usado é `#a3e635`. Os limas mais pálidos ficam perto de `#d9f99d` e os mais profundos perto de `#65a30d`. O lima web puro, `#00ff00`, é muito mais agressivo e raramente fica bem em design.

### Que cor de texto usar num gradiente verde lima?

Usa um verde muito escuro como `#1a2e05` ou quase preto. O texto branco sobre lima vivo falha muito o contraste, com cerca de 1,5:1.

### Que cores combinam com verde lima num gradiente?

Amarelo, limão, verde-azulado, menta e azeitona profunda misturam-se bem com o lima. O roxo e o rosa ficam marcantes ao lado, mas viram cinzento se os misturares diretamente.

### Como faço um gradiente verde néon em CSS?

Põe um brilho lima 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 lima parecer néon.

### O verde lima é uma boa cor de marca?

Pode ser, para marcas enérgicas de desporto, música, tecnologia ou comida fresca. Usa-o como acento sobre fundo escuro ou creme em vez de superfície inteira, e combina-o com tinta escura.