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

As melhores combinações de cores para gradiente seguem uma de duas regras: usam matizes que ficam lado a lado no círculo cromático, para a mistura continuar limpa, ou ligam matizes distantes por uma cor intermediária escolhida, para que nunca vire cinza. Abaixo estão 60 combinações que seguem essas regras, agrupadas por clima: calmo, vibrante, quente, frio, escuro e pastel. Copie qualquer amostra como CSS e leia a nota sob cada grupo para entender por que funcionam, e assim criar as suas.

Tudo aqui é CSS simples com cores hex, então funciona em qualquer navegador, e os mesmos códigos podem ser digitados em qualquer ferramenta de design. Se algum termo for novo, o que é um gradiente explica as paradas e os ângulos.

Combinações de gradiente calmas

Gradientes calmos mantêm as cores próximas tanto no matiz quanto na luminosidade. Nada salta, então o olho descansa. Servem de fundo para leitura, marcas de bem-estar, portfólios e tudo que deva parecer tranquilo. Sálvia e pedra, por exemplo, anda só uma pequena distância pelo círculo e perde um pouco de luminosidade no caminho, o que lembra a sombra em uma parede e não um efeito de cor.

Combinações de gradiente vibrantes

Gradientes vibrantes usam cores saturadas e mais distância pelo círculo. Chamam atenção em um feed lotado, em um banner de promoção ou em uma página de lançamento. O truque é escolher pares cuja mistura direta continue viva. Magenta para âmbar passa pelo coral; cobalto para coral passa pelo roxo. Nenhum chega perto do cinza, e por isso parecem vívidos de ponta a ponta.

Combinações de gradiente quentes

Gradientes quentes vivem entre o vermelho e o amarelo e parecem ensolarados, apetitosos e humanos. Combinam com comida, hospitalidade, estilo de vida e tudo que seja pessoal. A maioria destes acrescenta uma ponta mais escura e avermelhada para a mistura ter peso: Hora dourada vai do mel claro ao âmbar queimado como a luz do fim de tarde desce por uma parede. Para a psicologia da temperatura, veja cores quentes e frias.

Combinações de gradiente frias

Gradientes frios ficam entre o verde e o violeta e parecem limpos, calmos e precisos. São o lar natural de tecnologia, saúde, finanças e água. O azul é a âncora da maioria deles, e por isso passam confiança, e também por isso um gradiente frio precisa de um detalhe distintivo, como uma ponta violeta ou uma virada para o turquesa, para não parecer com todo banco. Mais azuis estão reunidos em gradientes azuis.

Combinações de gradiente escuras

Gradientes escuros são fundos quase pretos com uma cor iluminada subindo deles. Parecem sofisticados, noturnos e cinematográficos, e deixam o texto branco nítido. Mantenha a ponta escura levemente colorida em vez de preto puro, para a mistura ter por onde viajar. Rampas escuras criam faixas com facilidade, então adicione grão antes de publicar; veja fundos de gradiente escuros.

Combinações de gradiente pastel

Pastéis são cores claras, de alta luminosidade e com um pouco de saturação. Parecem frescos, suaves e simpáticos, e combinam com beleza, bebês, papelaria e campanhas de primavera. Como são todos muito claros, até pastéis de matizes distantes podem se misturar em um cinza esbranquiçado, então os dois últimos daqui passam por um lilás claro. Use tinta escura para o texto sobre pastéis, e não branco. Há mais em gradientes pastel.

Como usar estes códigos de gradiente

Cada código é um valor background completo de CSS. Cole em qualquer elemento ou leve as cores hex e as posições das paradas para uma ferramenta de design. Na web, defina antes uma cor sólida de reserva, tirada da parada 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 sua própria combinação

1. 1

   Escolha o clima primeiro

   Decida entre calmo ou vibrante, quente ou frio, escuro ou claro antes de qualquer cor. Isso reduz as opções a um dos grupos acima.

2. 2

   Escolha uma cor âncora

   Em geral a cor da sua marca ou a cor do que você vende. Veja como escolher as cores da marca.

3. 3

   Adicione uma vizinha

   Ande de 30 a 60 graus pelo círculo cromático para ter uma segunda cor limpa. Mude um pouco a luminosidade também, para dar profundidade.

4. 4

   Ligue tudo o que for distante

   Se você quer um matiz bem afastado, ponha uma cor intermediária viva entre eles para a mistura não virar cinza. Veja gradientes sujos.

5. 5

   Faça dela sua

   Mude o ângulo, tire uma parada dos 50%, adicione uma terceira cor ou uma camada de grão. Pequenas mudanças evitam que uma combinação pareça um preset.

Um código popular é um bom começo, mas milhares de outros designs começam nele também. Se você quer uma identidade em gradiente que ninguém mais tenha, pode combinar uma imagem de que gosta com sua paleta e os Marks mais próximos, ou criar novos parecidos com ela.