Gradientes de duas cores: 30 pares que funcionam sempre

Um gradiente de duas cores é uma mistura de uma cor para outra, e é o gradiente mais seguro que podes fazer: duas cores são fáceis de escolher, fáceis de recolorir e fáceis de manter coerentes. Se um par funciona resume-se a duas coisas: a distância entre os tons no círculo cromático e a diferença de luminosidade entre eles. Acerta nisso e quase quaisquer duas cores dão um bom gradiente. Abaixo estão as regras e depois trinta pares que as seguem.

Regra 1: atenção à distância de tom

A distância de tom é o afastamento entre duas cores no círculo cromático, medido em graus. Prevê o que acontece no meio da mistura, que é onde os gradientes de duas cores acertam ou falham.

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

Regra 2: dá-lhe uma diferença de luminosidade

Duas cores com a mesma luminosidade fazem um gradiente que parece plano, como se não fosse a lado nenhum. Uma diferença clara de luminosidade dá direção à mistura, como luz a cair de um dos lados. Também traz uma vantagem prática: o texto pode ficar na ponta mais escura em branco, ou na ponta mais clara numa tinta escura.

Pares de tons próximos

Estes pares estão a cerca de 60 graus um do outro, no máximo. É impossível ficarem turvos e ficam bem em quase tudo, de botões a fundos de ecrã inteiro. O Mirtilo e a Maré, por exemplo, são ambos azul a caminhar para o violeta, o que se lê como uma só cor a apanhar a luz.

Pares de claro para escuro

Estes pares mantêm uma família de tom e mudam a luminosidade de pálido para profundo. São os gradientes de duas cores mais versáteis: calmos o suficiente para uma página inteira, e com uma ponta escura pronta para texto branco. Também dão excelentes gradientes de marca, porque prolongam uma única cor da marca em vez de acrescentarem uma nova. Vê esquemas de cores monocromáticos para a teoria.

Pares de contraste que se mantêm limpos

Estes pares estão mais afastados, entre cerca de 90 e 150 graus, mas cada um tem um ponto médio vivo quando misturado da forma predefinida. O pêssego e o violeta passam pelo malva, o ciano e o magenta pelo pervinca, o laranja e o magenta pelo rosa choque. Têm mais energia do que os pares próximos e servem bem lançamentos, música e tudo o que precise de se destacar.

Deslocar o ponto médio

Por predefinição, um gradiente de duas cores é metade e metade. O CSS deixa-te mover o ponto onde as duas cores estão misturadas por igual com uma indicação de cor: uma percentagem solta entre as paragens. Empurra-a 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 pôr o texto num gradiente de duas cores

Um gradiente de duas cores traz um layout incorporado: uma ponta é mais clara e a outra mais escura. Põe as palavras na ponta que mais contrasta com a cor do teu texto e deixa a outra ponta levar a cor. Para texto branco, é a ponta mais escura; para tinta escura, a mais clara. Nunca centres texto pequeno sobre o ponto médio de um par de claro para escuro, porque o contraste muda ao longo da linha. Texto sobre gradiente trata das verificações em detalhe.

Tornar um gradiente de duas cores teu

Os gradientes de duas cores são populares precisamente por serem seguros, por isso os pares populares estão em todo o lado. Para tornar um deles reconhecível, muda algo que as pessoas notam sem pensar: um ângulo mais inclinado ou invulgar (vê ângulo do gradiente), um ponto médio deslocado, um grão fino, ou uma terceira cor usada só numa das margens. Quando estiveres pronto para ir além de duas, as 60 combinações de cores para gradientes estão agrupadas por ambiente.

Se já sabes as duas cores que queres, podes escrevê-las na pesquisa do Mercado, como “azul e violeta”, e criar com os Marks construídos à volta delas.