Gradientes monocromáticos: um tom, muitas sombras

Um gradiente monocromático mistura um só tom através das suas próprias sombras, do profundo ao claro, sem trazer uma segunda cor. Do preto ao branco através do cinzento é a versão mais pura; um azul-marinho que sobe até um azul pálido, ou uma beringela que se levanta até um lilás, também são gradientes monocromáticos. Parecem calmos e caros porque nada compete e, pela mesma razão, mostram todos os defeitos: banding, pontos médios turvos e um tom que desvia a meio. Os códigos e o CSS abaixo evitam os três.

Gradiente monocromático vs esquema de cores monocromático

Os dois termos estão relacionados e confundem-se muitas vezes. Um esquema de cores monocromático é uma paleta: várias tintas, tons e sombras de um só tom usados num design inteiro. Um gradiente monocromático é uma única transição dentro dessa ideia. Podes usar um gradiente monocromático num design cuja paleta não é monocromática, como um fundo azul-escuro sob texto laranja.

Códigos de gradiente monocromático para copiar

Cada um destes mantém um só tom e muda apenas a luminosidade e um pouco da saturação. As paragens mais escuras são ligeiramente mais saturadas do que as mais claras, que é como a cor real se comporta na sombra e a razão pela qual estes parecem naturais.

Para a ponta escura desta família em separado, vê os gradientes pretos e os gradientes cinzentos. Para perceber como se relacionam os degraus, as tintas, tons e sombras são a leitura de base.

Como fazer um gradiente monocromático em CSS

A forma mais simples de manter um só tom é escrever as paragens em oklch e mudar apenas o primeiro número, a luminosidade. O ângulo do tom fica fixo, por isso a cor não se desvia, e o oklch distribui a luminosidade de forma uniforme, por isso a transição sobe a um ritmo constante. O OKLCH explicado trata do formato.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Escolhe o tom

   Escolhe uma cor e encontra o seu ângulo de tom. Um azul fica por volta de 260, um verde por volta de 145, um vermelho por volta de 25.

2. 2

   Define as paragens mais escura e mais clara

   Mantém a ponta escura acima do preto puro e a ponta clara abaixo do branco puro, a menos que queiras um limite duro. Uma luminosidade de 0,15 a 0,9 é uma gama confortável.

3. 3

   Coloca a paragem do meio com intenção

   Move-a para a ponta que queres que domine. Uma paragem do meio a 30 por cento dá um quadro sobretudo claro; a 70 por cento, sobretudo escuro. As paragens de cor do gradiente mostram mais.

4. 4

   Junta grão

   Uma camada ténue de ruído sobre o gradiente esconde o banding e acrescenta uma sensação de material.

Porque é que os gradientes monocromáticos escuros fazem banding

A maioria dos ecrãs mostra 256 níveis por canal. Um gradiente do preto #000000 ao cinzento-escuro #282828 tem apenas 40 degraus distintos com que trabalhar. Estica-o por um topo de 1920 píxeis de largura e cada degrau é uma faixa de 48 píxeis, que o olho distingue facilmente no escuro. Os gradientes multicolores escondem isto porque os canais mudam em momentos diferentes; um gradiente monocromático muda os três em conjunto, por isso as faixas alinham-se.

O banding em gradientes e os gradientes com grão explicam a solução em pormenor, com código para uma camada de ruído em SVG.

Onde funcionam os gradientes monocromáticos

Como levam uma só cor, os gradientes monocromáticos deixam o texto e a fotografia liderar. Assentam a lançamentos de produtos de luxo, estúdios de arquitetura, edições de música e qualquer marca cuja identidade seja uma só cor. Compõe as palavras na ponta mais clara ou mais escura do mesmo tom, ou em branco ou preto, e o design lê-se como uma só decisão confiante.

Se precisas de um acento, vai buscá-lo fora do tom e usa-o uma só vez: uma única data laranja sobre um gradiente marinho, ou um preço vermelho sobre grafite. O gradiente continua monocromático e o acento fica com toda a atenção porque mais nada compete por ela.

No Gradiently, um fundo monocromático também pode mover-se: um Mark desenha a sua luz em direto, por isso um gradiente de uma só cor pode deslizar devagar por trás das palavras e, com o Pro, exporta-se como loop contínuo em todos os tamanhos que desenhares.