Gradientes de duas cores: 30 pares que sempre funcionam

Um degradê de duas cores é uma transição de uma cor para outra, e é o gradiente mais seguro que existe: duas cores são fáceis de escolher, fáceis de trocar e fáceis de manter consistentes. Se um par funciona depende de duas coisas: a distância entre os matizes no círculo cromático e a diferença de luminosidade entre eles. Acerte essas duas e quase qualquer par de cores vira um bom gradiente. Abaixo estão as regras e depois trinta pares que as seguem.

Regra 1: observe a distância de matiz

A distância de matiz é o quanto duas cores ficam afastadas no círculo cromático, medida em graus. Ela prevê o que acontece no meio da transição, que é onde um gradiente de duas cores dá certo ou errado.

As distâncias da primeira linha são cores análogas. As da última linha são cores complementares, que ficam marcantes lado a lado mas precisam de ajuda quando misturadas.

Regra 2: crie uma diferença de luminosidade

Duas cores com a mesma luminosidade formam um gradiente que parece chapado, como se não fosse a lugar nenhum. Uma diferença clara de luminosidade dá direção à transição, como luz caindo de um lado. E ainda traz uma vantagem prática: o texto pode ficar na ponta mais escura em branco, ou na ponta mais clara em uma cor escura.

Pares de matizes próximos

Estes pares ficam a no máximo uns 60 graus um do outro. É impossível deixá-los lamacentos, e ficam bem em quase tudo, de botões a fundos de tela cheia. Mirtilo e Maré, por exemplo, são azuis caminhando para o violeta, o que se lê como uma única cor pegando luz.

Pares do claro ao escuro

Estes pares mantêm uma família de matiz e mudam a luminosidade do claro ao profundo. São os gradientes de duas cores mais versáteis: calmos o bastante para uma página inteira e com uma ponta escura pronta para texto branco. Também dão ótimos gradientes de marca, porque ampliam uma única cor da marca em vez de acrescentar outra. Veja esquemas de cores monocromáticos para a teoria.

Pares de contraste que continuam limpos

Estes pares ficam mais afastados, entre uns 90 e 150 graus, mas cada um tem um ponto médio vivo com a mistura padrão. Pêssego e violeta passam pelo malva, ciano e magenta pela pervinca, laranja e magenta pelo rosa-choque. São mais enérgicos que os pares próximos, bons para lançamentos, música e tudo que precisa se destacar.

Como mover o ponto médio

Por padrão, um gradiente de duas cores é meio a meio. O CSS permite mover o ponto em que as duas cores se misturam por igual com uma dica de cor: uma porcentagem solta entre as paradas. Empurre para uma das pontas e a outra cor passa a ocupar mais da superfície, sem acrescentar uma terceira cor.

/* Even blend: the mix point sits at 50% */
.even   { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }

/* Colour hint at 75%: blue holds on for most of the box */
.blue   { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }

Onde colocar o texto em um gradiente de duas cores

Um gradiente de duas cores já vem com um layout: uma ponta é mais clara e a outra mais escura. Coloque as palavras na ponta que mais contrasta com a cor do seu texto e deixe a outra ponta carregar a cor. Para texto branco, é a ponta mais escura; para texto escuro, a mais clara. Nunca centralize texto pequeno sobre o ponto médio de um par do claro ao escuro, porque o contraste muda ao longo da linha. Texto sobre gradiente mostra as verificações em detalhe.

Como deixar um gradiente de duas cores com a sua cara

Os gradientes de duas cores são populares justamente por serem seguros, então os pares populares estão em todo lugar. Para tornar um reconhecível, mude algo que as pessoas notam sem pensar: um ângulo mais inclinado ou incomum (veja ângulo do gradiente), um ponto médio deslocado, um grão fino ou uma terceira cor usada só em uma borda. Quando quiser ir além de duas, as 60 combinações de cores para gradiente estão agrupadas por clima.

Se você já sabe as duas cores que quer, pode digitá-las na busca do Mercado, como “azul e violeta”, e criar com os Marks construídos em torno delas.