Gradiente cinzento: códigos neutros que não são aborrecidos

Um gradiente cinzento deixa de ser aborrecido no momento em que os seus cinzentos ganham tom. Os cinzentos neutros puros, com vermelho, verde e azul iguais, parecem planos e digitais. Empurra-os um pouco para o frio, para o azul, e tens névoa, ardósia e aço; empurra-os para o quente, para o castanho, e tens pedra, betão e estanho. Junta uma luz que vem de algum lado e uma cor de acento, e o cinzento torna-se calmo, moderno e discretamente confiante. Seguem-se os códigos de cada um.

Cinzento quente ou frio: escolhe um

Os cinzentos frios soam técnicos, limpos e precisos. Os quentes soam arquitetónicos, naturais e suaves. Ambos funcionam lindamente sozinhos. Juntos num gradiente lutam entre si, e o resultado parece uma mancha. Olha para as amostras abaixo em pares: a linha de cima inclina-se para o azul, a de baixo para o castanho, e a diferença é pequena mas óbvia depois de a veres.

Códigos de gradiente cinzento frio e quente

A névoa e a ardósia são o par frio: névoa para composições claras e arejadas e ardósia para as escuras e sérias. A tempestade junta uma nuvem iluminada, que dá profundidade real a um cinzento escuro. A pedra e o betão são o par quente, mais próximo de materiais de construção, e o grafite é o quase preto que podes usar em vez de preto simples.

Se fores ainda mais escuro, os códigos de gradiente preto continuam a partir do grafite. Para designs construídos com um só matiz em muitos níveis de luminosidade, vê gradiente monocromático.

Prata, aço e outros gradientes cinzentos metálicos

O metal não é uma cor, é um reflexo. Um gradiente prateado funciona por causa de uma faixa nítida e clara espremida entre paragens mais escuras, como a luz a bater numa superfície curva. O metal de canhão usa o mesmo truque num nível mais escuro, e o aço escovado junta linhas finas paralelas. São ousados, por isso usa-os num emblema, numa placa de título ou num só painel e não numa página inteira.

O aço escovado fica melhor quando as linhas assentam sobre um gradiente suave e iluminado e não sozinhas. Duas camadas conseguem-no:

.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}

Cinzento mais uma cor

Poucos fundos destacam tão bem uma única cor forte como o cinzento. O acento parece mais vivo contra o neutro do que contra outras cores, por isso um pouco chega: uma palavra, um botão, uma linha. Escolhe o acento pelo setor e pelo humor.

Há esquemas completos construídos assim em paletas de cores tecnológicas e paletas de cores neutras.

Cinzento com ar deliberado

As faixas merecem um aviso próprio. Os cinzentos não têm matiz que distraia o olho, por isso cada passo de um gradiente suave se vê, sobretudo em ecrãs grandes e depois de compressão. Uma camada leve de ruído esconde-o; textura de ruído em CSS tem um excerto, e bandas em gradientes explica porque acontecem.

Gradientes cinzentos em sites e no modo escuro

Na web, os gradientes cinzentos fazem o melhor trabalho em silêncio. Um gradiente de névoa atrás de uma secção de funcionalidades separa-a de uma página branca sem aresta dura. No modo escuro, um gradiente de grafite que sobe ligeiramente para o topo de um cartão dá-lhe profundidade, onde um cinzento plano pareceria um buraco. Mantém a mudança entre paragens pequena, uns poucos por cento de luminosidade, para o gradiente se ler como luz e não como decoração. Design para modo escuro cobre as regras mais amplas das interfaces escuras, das cores de superfície ao contraste.

Fundos de gradiente cinzento na prática

Arquitetos, empresas de engenharia e empresas de software usam o cinzento porque deixa o trabalho falar. Um gradiente de ardósia com letra branca e um acento azul faz o anúncio de um projeto parecer preciso; um gradiente de pedra quente com letra de grafite faz a capa de um portefólio parecer tátil. Identidade de marca para gabinetes de arquitetura mostra até onde uma paleta contida pode ir.

Os fundos subtis são onde um sistema de design compensa. No Gradiently, um Mark cinzento traz o seu próprio grão, que mantém as faixas afastadas, e a tinta automática escolhe tipo claro ou escuro linha a linha à medida que o cinzento muda ao longo do quadro.