# 60 combinações de cores para gradientes que funcionam, com códigos

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

Sessenta gradientes, ordenados pela sensação que queres e não pelo tom. Cada um é um código CSS vivo que podes copiar, e cada grupo explica a regra que faz as misturas resultarem.

## The short version

- As melhores combinações de cores para gradientes ou usam tons vizinhos, que se misturam de forma limpa, ou ligam tons distantes com uma cor intermédia escolhida.
- Os gradientes calmos mantêm a luminosidade e o tom próximos; os arrojados forçam a saturação e a distância entre tons.
- Os gradientes escuros resultam melhor como uma base quase preta com uma cor iluminada, e os pastel como tons claros vizinhos com uma tinta escura para o texto.
- Escolher um gradiente primeiro pelo ambiente e depois pelo tom dá resultados mais consistentes do que escolher as cores de que gostas uma a uma.
- Qualquer combinação aqui pode ficar mais distintiva com uma terceira cor, outro ângulo ou uma camada de grão.

As melhores **combinações de cores para gradientes** seguem uma de duas regras: usam tons que ficam lado a lado no círculo cromático, para a mistura se manter limpa, ou ligam tons distantes com uma cor intermédia escolhida, para nunca ficar cinzenta. Abaixo estão 60 combinações que seguem essas regras, agrupadas por ambiente: calmo, arrojado, quente, frio, escuro e pastel. Copia qualquer amostra como CSS e lê a nota debaixo de cada grupo para perceberes porque resultam, para depois criares as tuas.

Tudo aqui é CSS simples com cores hexadecimais, por isso funciona em qualquer navegador, e os mesmos códigos podem ser escritos em qualquer ferramenta de design. Se algum termo for novo, [o que é um gradiente](https://gradiently.design/pt-pt/guide/what-is-a-gradient) explica paragens e ângulos.

## Combinações de gradientes calmos

Os gradientes calmos mantêm as cores próximas no tom e na luminosidade. Nada salta, por isso o olhar descansa. Dão bons fundos para leitura, marcas de bem-estar, portefólios e tudo o que deva parecer sossegado. Salva e pedra, por exemplo, percorre só uma pequena distância no círculo e perde um pouco de luminosidade pelo caminho, o que se lê como sombra numa parede e não como um efeito de cor.

- Vidro do mar: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Nevoeiro da manhã: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salva e pedra: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Anoitecer de lavanda: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Água parada: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Banco de areia: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalipto: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Azul ardósia: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Bebida de aveia: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Pedra da lua: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Calmos: uma só família de tons, passos pequenos na luminosidade. Levam texto escuro com facilidade.

## Combinações de gradientes arrojados

Os gradientes arrojados usam cores saturadas e mais distância no círculo. Chamam a atenção num feed cheio, num banner de saldos ou numa página de lançamento. O segredo é escolher pares cuja mistura direta se mantém viva. De magenta a âmbar passa por coral; de cobalto a coral passa por roxo. Nenhum se aproxima do cinzento, e é por isso que parecem vivos de ponta a ponta.

- Violeta elétrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Citrino intenso: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Ponche tropical: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Sinal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Clarão ultramarino: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta a âmbar: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Selva: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Cobalto e coral: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Refrigerante de uva: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Lima e verde-azulado: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Arrojados: saturação alta, pares escolhidos para o ponto médio se manter vivo. Usa texto branco na ponta mais escura.

## Combinações de gradientes quentes

Os gradientes quentes vivem entre o vermelho e o amarelo e parecem solares, apetitosos e humanos. Servem para comida, hotelaria, estilo de vida e tudo o que seja pessoal. A maioria acrescenta uma ponta mais escura e mais vermelha para a mistura ter peso: Hora dourada vai do mel claro ao âmbar queimado, como a luz do fim do dia desce por uma parede. Para a psicologia da temperatura, vê [cores quentes e frias](https://gradiently.design/pt-pt/guide/warm-and-cool-colors).

- Hora dourada: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terracota: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Sorvete de pêssego: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Brasa: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Rosa do deserto: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Mel: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Canela: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Faixa de pôr do sol: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Alperce e ameixa: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Tijolo e ouro: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Quentes: vizinhos de vermelho, laranja e amarelo, geralmente com uma ponta mais escura para dar profundidade. Vê mais em [gradientes de pôr do sol](https://gradiently.design/pt-pt/guide/sunset-gradient).

## Combinações de gradientes frios

Os gradientes frios ficam entre o verde e o violeta e parecem limpos, calmos e precisos. São a casa natural da tecnologia, da saúde, das finanças e da água. O azul é a âncora da maioria deles, e é por isso que parecem de confiança, e por isso um gradiente frio precisa de um detalhe distintivo, como uma ponta violeta ou uma deriva para o verde-azulado, para não parecer o de todos os bancos. Há mais azuis reunidos em [gradientes azuis](https://gradiently.design/pt-pt/guide/blue-gradient).

- Glaciar: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Lagoa profunda: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nórdico: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Noite índigo: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Menta a céu: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Pervinca: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Verde-azulado ártico: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Hora azul: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Violeta gelo: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Fundo do oceano: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Frios: vizinhos de verde, verde-azulado, azul e violeta. Uma ligeira deriva de tom faz com que pareçam menos corporativos.

## Combinações de gradientes escuros

Os gradientes escuros são bases quase pretas com uma cor iluminada a subir delas. Parecem premium, noturnos e cinematográficos, e fazem o texto branco parecer nítido. Mantém a ponta escura ligeiramente colorida em vez de preto puro, para a mistura ter por onde viajar. As rampas escuras criam faixas com facilidade, por isso acrescenta grão antes de publicares; vê [fundos de gradiente escuro](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds).

- Violeta meia-noite: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Mar profundo: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Chão da floresta: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Sangue de boi: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafite: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Tinta e brasa: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Petróleo: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Beringela: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Verde-azulado noturno: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Cereja escura: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Escuros: um quase preto com tom, um meio profundo e uma cor iluminada na ponta oposta.

## Combinações de gradientes pastel

Os pastéis são cores claras, de luminosidade alta, com um pouco de saturação. Parecem frescos, suaves e simpáticos, e servem para beleza, bebé, papelaria e campanhas de primavera. Como são todos tão claros, até tons pastel distantes podem misturar-se num cinzento esbranquiçado, e por isso os dois últimos passam por um lilás claro. Compõe o texto sobre pastéis com tinta escura e não com branco. Há mais em [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients).

- Algodão-doce: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Pêssego e lilás: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistácio: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Azul-bebé: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Limão e rubor: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Menta e creme: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Violeta em pó: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Espuma do mar e rosa: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Céu de madrugada: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastel: vizinhos claros, ou pastéis distantes ligados por lilás para o meio manter tom.

## Como usar estes códigos de gradiente

Cada código é um valor `background` de CSS completo. Cola-o em qualquer elemento ou passa as cores hexadecimais e as posições das paragens para uma ferramenta de design. Na web, define primeiro uma cor lisa de reserva, tirada da paragem mais escura ou mais importante.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Violeta meia-noite num cartão, com cor de reserva e texto branco.

## Como criar a tua própria combinação

1. **Escolhe primeiro o ambiente** Decide calmo ou arrojado, quente ou frio, escuro ou claro antes de qualquer cor. Isso reduz as escolhas a um dos grupos acima.
2. **Escolhe uma cor âncora** Normalmente a cor da tua marca ou a cor daquilo que vendes. Vê [como escolher as cores da marca](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors).
3. **Acrescenta um vizinho** Desloca-te 30 a 60 graus no círculo cromático para obteres uma segunda cor limpa. Muda também um pouco a luminosidade, para dar profundidade.
4. **Liga tudo o que estiver distante** Se queres um tom longínquo, põe uma cor intermédia viva entre os dois para a mistura não ficar cinzenta. Vê [gradientes embaciados](https://gradiently.design/pt-pt/guide/muddy-gradients).
5. **Faz dele teu** Muda o ângulo, tira uma paragem dos 50%, acrescenta uma terceira cor ou uma camada de grão. São as pequenas mudanças que impedem uma combinação de parecer uma predefinição.

Um código popular é um bom começo, mas milhares de outros designs começam ali também. Se queres uma identidade em gradiente que mais ninguém tenha, podes igualar uma imagem de que gostes à sua paleta e aos Marks mais próximos, ou criar novos parecidos.

## FAQ

### Que cores ficam bem juntas num gradiente?

Cores lado a lado no círculo cromático, como azul e violeta ou laranja e rosa, misturam-se sempre de forma limpa. As cores distantes funcionam quando uma cor intermédia viva as liga.

### Qual é a combinação de gradiente mais popular?

Violeta a rosa e azul a ciano estão entre as mais usadas. Essa popularidade é também a razão de raramente parecerem distintivas.

### Quantas cores deve ter um gradiente?

Duas é o mais simples, três dá profundidade e controlo do ponto médio, e mais de cinco é difícil de manter limpo.

### Que cor de texto funciona sobre um gradiente?

Branco ou quase branco sobre gradientes escuros e arrojados, e uma tinta escura sobre os pastel e os calmos. Verifica o contraste no ponto mais claro por trás do texto.

### Posso usar estes códigos de gradiente no Figma ou no Canva?

Sim. Copia as cores hexadecimais e as posições das paragens para o preenchimento em gradiente da ferramenta e iguala o ângulo.