Degradê monocromático: um só matiz, muitos tons

Um degradê monocromático mistura um matiz pelos seus próprios tons, do profundo ao claro, sem trazer uma segunda cor. Do preto ao branco, passando pelo cinza, é a versão mais pura; um azul-marinho que sobe até um azul pálido, ou uma berinjela que clareia até um lilás, também são degradês monocromáticos. Parecem calmos e sofisticados porque nada compete e, pelo mesmo motivo, mostram todos os defeitos: faixas, meios-tons turvos e um matiz que se desvia no meio do caminho. Os códigos e o CSS abaixo evitam os três.

Degradê monocromático vs esquema de cores monocromático

Os dois termos são parentes e muitas vezes confundidos. Um esquema de cores monocromático é uma paleta: vários tons claros, médios e escuros de um matiz, usados num design inteiro. Um degradê monocromático é uma única mistura dentro dessa ideia. Você pode usar um degradê monocromático num design cuja paleta não é monocromática de modo algum, como um fundo azul-escuro sob texto laranja.

Códigos de degradê monocromático para copiar

Cada um destes mantém um único matiz e muda apenas a luminosidade e um pouco da saturação. As paradas mais escuras são ligeiramente mais saturadas que as claras, que é como a cor real se comporta na sombra e por isso estes parecem naturais.

Para o lado escuro desta família isoladamente, veja degradês pretos e degradês cinza. Para entender como os degraus se relacionam, tons claros, médios e escuros é a leitura de base.

Como fazer um degradê monocromático em CSS

O jeito mais simples de manter um só matiz é escrever as paradas em oklch e mudar apenas o primeiro número, a luminosidade. O ângulo do matiz fica fixo, então a cor não pode se desviar, e o oklch distribui a luminosidade de modo uniforme, então a mistura sobe em ritmo constante. 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

   Escolha o matiz

   Escolha uma cor e descubra o ângulo do seu matiz. Um azul fica por volta de 260, um verde por volta de 145, um vermelho por volta de 25.

2. 2

   Defina as paradas mais escura e mais clara

   Mantenha a ponta escura acima do preto puro e a clara abaixo do branco puro, a menos que queira uma borda dura. Uma luminosidade de 0,15 a 0,9 é uma faixa confortável.

3. 3

   Posicione a parada do meio com intenção

   Mova-a para a ponta que você quer que domine. Uma parada do meio em 30 por cento dá um quadro mais claro; em 70 por cento, mais escuro. Paradas de cor do degradê mostra mais.

4. 4

   Acrescente grão

   Uma camada leve de ruído sobre o degradê esconde as faixas e dá uma sensação de material.

Por que degradês monocromáticos escuros formam faixas

A maioria das telas mostra 256 níveis por canal. Um degradê do preto #000000 ao cinza-escuro #282828 tem só 40 degraus distintos para trabalhar. Estique-o por um destaque de 1920 pixels de largura e cada degrau vira uma faixa de 48 pixels, que o olho percebe com facilidade no escuro. Degradês de várias cores escondem isso porque os canais mudam em momentos diferentes; um degradê monocromático muda os três juntos, então as faixas se alinham.

Faixas em degradês e degradês com grão detalham a solução, com código para uma camada de ruído em SVG.

Onde os degradês monocromáticos funcionam

Como carregam uma cor só, os degradês monocromáticos deixam o texto e a fotografia liderarem. Combinam com lançamentos de produtos de luxo, escritórios de arquitetura, lançamentos de música e qualquer marca cuja identidade seja uma única cor. Coloque as palavras na ponta mais clara ou mais escura do mesmo matiz, ou em branco ou preto, e o design se lê como uma decisão confiante.

Se precisar de um destaque, tire-o de fora do matiz e use-o uma vez: uma única data laranja sobre um degradê marinho, ou um preço vermelho sobre grafite. O degradê continua monocromático, e o destaque recebe toda a atenção porque nada mais compete por ela.

Um fundo monocromático na Gradiently também pode se mover: um Mark renderiza a sua luz ao vivo, então um degradê de uma cor pode derivar devagar atrás das palavras e, com o Pro, ser exportado como um loop contínuo em cada tamanho que você criar.