Gradientes pretos: como desenhar com quase-preto

Um gradiente preto é uma mistura que se move entre tons de quase-preto, ou do preto para uma cor, para que um design escuro tenha profundidade e luz em vez de um vazio plano. Os que parecem caros quase nunca usam #000000 puro. Partem de um preto com tom, como #0b0b10, deixam a luminosidade mudar apenas uns pontos percentuais e juntam uma única fonte de cor ou de luz algures no campo.

Este guia dá-te pretos com tom, códigos de gradientes pretos para copiar, a solução para as bandas que assolam as misturas escuras e regras para o texto. Para fundos mais escuros em geral, vê os fundos de gradiente escuros; para o básico de como funcionam as misturas, começa por o que é um gradiente.

Porque é que o preto puro parece plano

O #000000 não tem matiz nem sítio mais escuro para onde ir, por isso um design construído sobre ele não tem sombras, só uma ausência. Nada na vida real é tão preto: uma sala escura, um céu noturno e um tecido preto levam todos um vestígio de cor e uma lenta mudança de brilho. O teu olho lê essa mudança como profundidade.

Há também uma razão prática. Nos ecrãs OLED, os píxeis de preto puro desligam-se por completo e, em alguns telemóveis, demoram um instante a voltar a ligar, o que pode deixar um breve rasto quando o conteúdo escuro se desloca. Elevar o valor mais escuro uns passos acima de zero evita isso e não te custa nada visualmente.

Pretos com tom: as cores dentro de um bom preto

Um preto com tom é uma cor muito escura com um pouco de saturação por dentro. Em termos de HSL, mantém a luminosidade entre cerca de 4% e 9% e deixa a saturação em qualquer ponto entre 15% e 40%. O matiz decide o ambiente: os pretos azulados parecem técnicos e frios, os castanhos quentes parecem couro e café, e a beringela parece entardecer.

Se trabalhas em OKLCH, os números são mais fáceis de raciocinar: luminosidade à volta de 15% a 20% e croma entre 0,005 e 0,025. A Tinta acima é oklch(15.2% 0.011 285), um preto com um sopro de azul. O nosso guia dos códigos de cor explica como ler estes valores.

Códigos de gradientes pretos que podes copiar

Cada um destes mantém o valor mais escuro acima do preto puro e muda a luminosidade com suavidade. Usa-os como fundos completos, cabeçalhos ou bases de diapositivos e escolhe aquele cuja temperatura combina com a tua cor de destaque.

A direção importa mais no preto do que em qualquer outro sítio, porque há muito pouco mais a acontecer. A luz a cair de cima lê-se como natural e calma. A luz a subir de um canto inferior lê-se como um brilho, como um ecrã ou uma chama, e atrai o olhar para esse canto. Para mais sobre isto, vê os ângulos de gradientes.

Gradientes do preto para uma cor

Os gradientes pretos mais marcantes deixam uma cor emergir da escuridão. Duas regras mantêm-nos ricos. Primeiro, não dês à cor mais de um terço do campo, para que o preto continue a ser a nota principal. Segundo, escurece a cor até ao preto ao longo do seu próprio matiz em vez de a esbater através do cinzento: um violeta deve passar por um índigo profundo a caminho do fundo, não pelo carvão. Um meio cinzento é a causa mais comum dos gradientes turvos.

Os navegadores modernos podem fazer parte disto por ti. Interpolar em OKLCH mantém viva a croma da cor nas paragens mais escuras, e uma linha de recurso simples cobre os navegadores mais antigos.

.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}

Como evitar as bandas em gradientes escuros

Os ecrãs costumam mostrar 256 níveis por canal de cor. Um gradiente de #0a0a0a a #1a1a1a só tem 16 desses níveis com que trabalhar, por isso, num cabeçalho de 1920 píxeis de largura, cada degrau tem cerca de 120 píxeis e vês riscas. São as bandas em gradientes, e os gradientes escuros sofrem-nas mais.

O grão é a solução mais fiável, porque quebra a aresta dura de cada degrau em textura que o olho volta a misturar. Uns poucos por cento de opacidade chegam. Os gradientes com grão tratam do visual em profundidade; este é o CSS mínimo.

.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Texto e cor sobre um gradiente preto

Os fundos pretos fazem quase qualquer texto claro passar no contraste, por isso o risco passa para o texto secundário. Os cinzentos médios que parecem bem num monitor luminoso podem ficar abaixo do mínimo de 4,5:1 para texto corrido. O branco puro também tem um custo: alguns leitores acham o branco vivo sobre quase-preto agressivo em passagens longas, por isso um branco-sujo quente é mais simpático e continua a ler-se com nitidez. Vê o contraste de cor para as regras completas.

Onde funcionam melhor os gradientes pretos

• Lançamentos e revelações, onde um campo escuro faz um produto ou um título parecerem iluminados
• Luxo, fragrâncias e joalharia, combinados com um destaque metálico como #c9a96e
• Música, vida noturna e eventos, com uma cor saturada a subir de um canto
• Produtos de tecnologia e para programadores, onde os pretos azulados parecem precisos
• Interfaces em modo escuro, com dois ou três pretos com tom como camadas de superfície
• Portfólios de fotografia, onde uma moldura preta calma deixa as imagens carregar a cor

Na Gradiently, o Mercado permite pesquisar Marks por palavras de cor como "quase preto" ou "preto e dourado", e cada Mark já traz grão e luz, por isso os problemas de bandas e de planura acima ficam tratados antes de começares.