# Gradiente verde-floresta: códigos naturais e profundos

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

O verde-floresta é o mais adulto dos verdes: calmo, rico e um pouco sério. Estes códigos seguem um bosque real, do chão à copa, com combinações que evitam que fique plano.

## The short version

- Um gradiente verde-floresta vai de um verde quase preto, como a sombra sob as árvores, a um verde médio ou claro onde a luz rompe.
- Os verdes com tendência azul leem-se como pinheiro e sempre-verde, enquanto os com tendência amarela se leem como musgo e feto.
- Um pequeno acento quente, como creme, latão ou terracota, faz o verde-floresta parecer rico em vez de plano.
- O verde-floresta fica sujo quando é misturado diretamente com vermelho ou laranja, por isso mantém as cores quentes como acentos separados.
- A letra clara no lado escuro de um gradiente verde-floresta lê-se bem e transmite calma e ar premium.

Um **gradiente verde-floresta** vai de um verde quase preto, a cor da sombra profunda sob as árvores, até um verde médio mais rico ou um verde suave de sol onde a luz atravessa a copa. Parece natural, estável e discretamente caro, e é por isso que marcas de tradição, empresas de ar livre, hotéis e lojas de plantas o procuram. Os códigos que se seguem acompanham um bosque real, do chão às copas, com notas sobre o que combinar com cada um.

## As cores de uma floresta, do chão à copa

Quem está num bosque vê mais do que um verde. A sombra mais profunda é quase preta. Os pinheiros e os abetos puxam ao azul. O musgo, os fetos e as folhas novas puxam ao amarelo. Lá em cima, onde o sol toca as folhas, o verde fica pálido e dourado, e numa manhã húmida tudo se esbate num verde-acinzentado suave. Um bom gradiente de floresta escolhe uma destas histórias em vez de todas.

- Pinheiro noturno: #0b1f14
- Floresta: #14391f
- Copa: #22573a
- Abeto: #1d4a3f
- Musgo: #4f6b2a
- Luz de feto: #a7c97a
- Bruma matinal: #c9d3cc
- Sol entre as folhas: #f3d98b

Verdes de bosque. O abeto puxa ao azul, o musgo ao amarelo, e a paragem de luz solar é a única cor quente de que precisas.

## Códigos de gradiente verde-floresta

Começa pela copa profunda se queres o clássico **gradiente verde escuro**: é o mais versátil e carrega a letra clara de forma belíssima. O pinheiro é mais frio e mais moderno. O musgo é mais terroso e serve comida, artesanato e tudo o que é feito à mão. A luz de feto é a mais viva do conjunto e continua a ser inconfundivelmente floresta, não lima.

- Copa profunda: `linear-gradient(160deg, #0b1f14 0%, #14391f 45%, #22573a 100%)`
- Pinheiro e abeto: `linear-gradient(180deg, #0e2a26 0%, #1d4a3f 50%, #3c6e5d 100%)`
- Musgo: `linear-gradient(135deg, #2f3d17 0%, #4f6b2a 50%, #8a9a4b 100%)`
- Luz de feto: `linear-gradient(180deg, #1f4d2b 0%, #3f7d3c 55%, #a7c97a 100%)`

Quatro verdes de floresta. Cada um mantém o matiz estável e muda sobretudo de luminosidade, que é o que mantém a mistura limpa.

Para verdes mais frescos e vivos, da esmeralda à lima, a coleção principal de [gradiente verde](https://gradiently.design/pt-pt/guide/green-gradient) vai mais longe. Se queres um verde-floresta com mais azul, o [gradiente verde-azulado](https://gradiently.design/pt-pt/guide/teal-gradient) continua onde o pinheiro acaba.

## Bruma, luz do sol e chão da floresta

A atmosfera é o que faz um gradiente de floresta parecer um lugar e não uma amostra de tinta. A bruma eleva o topo do enquadramento para um verde-acinzentado pálido e deixa as árvores emergir por baixo. A luz do sol entre a copa é um brilho radial de ouro suave, alto no enquadramento. O chão da floresta traz um pouco de castanho para o fundo, o que dá peso ao design. Um destes efeitos por design é mais do que suficiente.

- Floresta com bruma: `linear-gradient(180deg, #c9d3cc 0%, #7e968a 45%, #2f4a3d 100%)`
- Sol através da copa: `radial-gradient(ellipse at 70% 10%, #f3d98b 0%, #8aa64b 25%, #2c5a2f 55%, #0c2215 90%)`
- Chão da floresta: `linear-gradient(0deg, #1a140c 0%, #2e2a16 35%, #2a4a26 100%)`
- Noite de sempre-verde: `radial-gradient(circle at 50% 30%, #1f4a35 0%, #0d2219 50%, #040b08 100%)`

Gradientes de floresta com atmosfera. A floresta com bruma serve letra clara em baixo e escura em cima; a noite de sempre-verde aceita branco em qualquer parte.

## O que combinar com o verde-floresta

O verde-floresta sozinho pode parecer pesado. Um único parceiro quente, usado na letra ou num pequeno acento, muda-lhe toda a personalidade. Escolhe o parceiro pelo sentimento que queres e mantém-no fora do próprio gradiente.

| Combina com | Hex | Sensação | Serve a |
| --- | --- | --- | --- |
| Creme quente | `#f4efe3` | Tradição, calma | Marcas de ar livre, livrarias, cafés |
| Dourado latão | `#c9a24a` | Luxo, clássico | Hotéis, bebidas espirituosas, clubes privados |
| Terracota | `#c8643b` | Terroso, simpático | Lojas de plantas, cerâmica, comida |
| Rosa-pálido | `#f2c6c2` | Suave, romântico | Floristas, casamentos, beleza |
| Sálvia pálida | `#d7e2d0` | Fresco, delicado | Bem-estar, cuidados de pele, chá |

Um parceiro cada. O creme e o latão são os mais seguros; o rosa-pálido é a surpresa que faz destacar o feed de uma florista.

Há mais sobre como construir paletas naturais em [paletas de cores da natureza](https://gradiently.design/pt-pt/guide/nature-color-palettes) e [cores terrosas](https://gradiently.design/pt-pt/guide/earth-tone-colors), e sobre o que o verde sugere às pessoas em [significado da cor verde](https://gradiently.design/pt-pt/guide/green-color-meaning).

## Manter o verde-floresta rico, não plano

### Parece plano ou doentio

- Verde misturado diretamente em vermelho ou laranja
- Um verde-amarelado tão vivo que parece lima
- Cinzento neutro acrescentado para escurecer
- Preto puro no lado escuro
- Letra verde viva sobre verde escuro

### Parece uma floresta

- Cores quentes mantidas como acentos separados
- O lado claro suave, como #a7c97a
- Escurecido baixando a luminosidade, mantendo o matiz
- Um quase preto que ainda é verde, como #0b1f14
- Letra creme ou latão sobre verde escuro

O primeiro ponto é o que apanha as pessoas. O verde e o vermelho ficam opostos na roda cromática, e uma mistura direta entre eles passa pelo castanho. Se queres os dois, deixa-os encontrar-se com uma aresta nítida, ou reserva o vermelho para a letra. Os [gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients) mostram exatamente o que acontece pelo meio.

> **Verdes escuros em impressão** Os verdes profundos tendem a imprimir-se mais escuros e baços do que parecem no ecrã, e o lado quase preto pode perder a cor por completo. Em folhetos, ementas e tabuletas, eleva ligeiramente a paragem mais escura e pede uma prova antes de uma tiragem completa. A [impressão de gradientes](https://gradiently.design/pt-pt/guide/print-gradients) trata de bandas e mudanças de cor no papel.

## Gradientes verde-floresta em designs reais

O verde-floresta é uma dádiva para negócios que trabalham ao ar livre ou com seres vivos, porque diz perícia e cuidado sem gritar. Um jardineiro pode publicar lembretes sazonais, uma florista pode anunciar um workshop, um hotel pode promover uma escapadinha, e tudo parece a mesma marca.

Publicação vertical para redes sociais com fundo verde-floresta profundo e o título As visitas de primavera estão abertas em letra creme

Uma publicação vertical de um jardineiro. Letra creme no lado profundo, com o verde mais claro mantido nas margens.

Essa consistência é a parte difícil quando uma estação inteira de publicações, stories e folhetos vem de mãos diferentes. No Gradiently, escolhes uma vez um Mark verde-floresta e todos os designs no Studio o vestem no tamanho certo, com a zona calma mantida por trás das tuas palavras. O [marketing para paisagismo](https://gradiently.design/pt-pt/guide/landscaping-marketing) tem uma estação de ideias para o preencher.

```css
:root {
  --forest-950: #0b1f14;
  --forest-800: #14391f;
  --forest-600: #22573a;
  --forest-300: #a7c97a;
  --cream: #f4efe3;
}

.hero--forest {
  color: var(--cream);
  background: linear-gradient(160deg, var(--forest-950) 0%, var(--forest-800) 45%, var(--forest-600) 100%);
}
```

O verde-floresta como tokens reutilizáveis, com creme para a letra. As mesmas variáveis podem colorir botões e margens em todo o site.

## FAQ

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

A cor nomeada em CSS `forestgreen` é `#228b22`, um verde bastante vivo. Os verdes-floresta mais profundos para gradientes ficam entre #14391f e #22573a, com versões quase pretas como #0b1f14 para o lado escuro de um gradiente.

### Que cores combinam com um gradiente verde-floresta?

Creme quente, dourado latão, terracota, rosa-pálido e sálvia pálida. Usa uma delas como cor da letra ou de acento em vez de a misturares no verde.

### Porque é que o meu gradiente verde parece sujo?

Provavelmente está a misturar-se com vermelho, laranja ou cinzento. Mantém o matiz estável, escurece baixando a luminosidade e deixa as cores quentes encontrarem o verde com uma aresta nítida ou ficarem na letra.

### Que cor de texto funciona sobre verde escuro?

Creme, como #f4efe3, branco ou latão suave. Leem-se com clareza no lado escuro e mantêm a sensação calma e natural.