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

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

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.

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.

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.

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.

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.

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.

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

Como criar a tua própria combinação

1. 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. 2

   Escolhe uma cor âncora

   Normalmente a cor da tua marca ou a cor daquilo que vendes. Vê como escolher as cores da marca.

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

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