Degradê cinza: códigos neutros que não são sem graça

Um degradê cinza deixa de ser sem graça no momento em que seus cinzas ganham um tom. Cinzas totalmente neutros, com vermelho, verde e azul iguais, parecem chapados e digitais. Empurre-os um pouco para o frio, em direção ao azul, e você tem névoa, ardósia e aço; empurre para o quente, em direção ao marrom, e você tem pedra, concreto e estanho. Acrescente uma luz que vem de algum lugar e um único acento, e o cinza vira calmo, moderno e discretamente confiante. Os códigos de cada um vêm a seguir.

Cinza quente ou cinza frio: escolha um

Cinzas frios parecem técnicos, limpos e precisos. Cinzas quentes parecem arquitetônicos, naturais e suaves. Os dois funcionam muito bem sozinhos. Juntos em um degradê, brigam, e o resultado parece uma mancha. Olhe as amostras abaixo em pares: a fileira de cima puxa para o azul, a de baixo puxa para o marrom, e a diferença é pequena, mas óbvia depois que você a vê.

Códigos de degradê cinza frio e quente

Névoa e ardósia são o par frio: névoa para layouts claros e arejados e ardósia para os escuros e sérios. A tempestade acrescenta uma nuvem iluminada, que dá profundidade real a um cinza escuro. Pedra e concreto são o par quente, mais próximo de materiais de construção, e o grafite é o quase preto que você pode usar no lugar do preto puro.

Se for ainda mais escuro, os códigos de degradê preto continuam a partir do grafite. Para designs feitos de um só tom em muitos níveis de luminosidade, veja degradê monocromático.

Prata, aço e outros degradês cinza metálicos

Metal não é uma cor, é um reflexo. Um degradê prata funciona por causa de uma faixa nítida e clara espremida entre pontos mais escuros, do jeito que a luz bate em uma superfície curva. O chumbo usa o mesmo truque em um nível mais escuro, e o aço escovado acrescenta linhas finas paralelas. São ousados, então use-os em um selo, em uma placa de título ou em um único painel, e não em uma página inteira.

O aço escovado fica melhor quando as linhas ficam sobre um degradê suave e iluminado, e não sozinhas. Duas camadas resolvem:

.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%);
}

Cinza mais uma cor

Poucos fundos destacam tanto uma única cor forte quanto o cinza. O acento parece mais vivo contra o neutro do que contra qualquer outra cor, então um pouco rende muito: uma palavra, um botão, uma linha. Escolha o acento pelo setor e pelo clima.

Há esquemas completos construídos assim em paletas de cores para tecnologia e paletas de cores neutras.

Cinza com cara de intencional

O efeito de faixas merece um aviso à parte. Cinzas não têm tom para distrair o olho, então cada passo de um degradê suave aparece, principalmente em telas grandes e depois da compressão. Uma camada leve de ruído o esconde; textura de ruído em CSS traz um trecho de código, e faixas em degradês explica por que isso acontece.

Degradês cinza em sites e no modo escuro

Na web, degradês cinza trabalham melhor em silêncio. Um degradê névoa atrás de uma seção de recursos a separa de uma página branca sem uma borda dura. No modo escuro, um degradê grafite que clareia um pouco em direção ao topo de um card dá profundidade, onde um cinza chapado pareceria um buraco. Mantenha a mudança entre os pontos pequena, alguns por cento de luminosidade, para que o degradê pareça luz e não enfeite. Design para modo escuro cobre as regras mais amplas para interfaces escuras, das cores de superfície ao contraste.

Fundos em degradê cinza na prática

Arquitetos, escritórios de engenharia e empresas de software usam cinza porque ele deixa o trabalho falar. Um degradê ardósia com texto branco e um acento azul faz o anúncio de um projeto parecer preciso; um degradê pedra quente com texto grafite faz a capa de um portfólio parecer tátil. Branding de escritório de arquitetura mostra até onde uma paleta contida pode ir.

Fundos sutis são onde um sistema de design compensa. No Gradiently, um Mark cinza traz o próprio grão, que mantém as faixas afastadas, e a tinta automática escolhe texto claro ou escuro linha a linha conforme o cinza muda ao longo do quadro.