Gradientes vermelho e preto: códigos dramáticos sem faixas

Um gradiente vermelho e preto esbate um vermelho vivo como #dc2626 ou um carmesim mais profundo como #b91c1c até um quase preto, idealmente através de um vermelho-sangue como #450a0a para a transição continuar rica. Poucos pares são tão dramáticos: o vermelho agarra a atenção e o preto não lhe dá nada com que competir. Aqui ficam códigos vermelho e preto para cinco tipos de drama, como evitar faixas e as cores de texto que funcionam.

Como esbater o vermelho no preto sem ficar castanho

O erro comum é misturar vermelho puro diretamente com preto puro em duas paragens. O meio dessa mistura é um vermelho castanho turvo, que parece sujo em vez de escuro. Passa antes por vermelhos mais escuros e usa um preto com um traço de vermelho, para a sombra pertencer à mesma família da luz.

Códigos de gradiente vermelho e preto para cinco tipos de drama

Cinema e thriller

Quase tudo preto, com o vermelho a chegar como uma única luz lateral, como um sinal de saída numa sala escura. Quieto e tenso.

Desporto e noite de combate

Vermelho quente a subir de baixo, como se o chão da arena estivesse iluminado. Ruidoso, físico e urgente.

Jogos

Diagonais nítidas e cortes secos, mais perto de um gráfico do que de um brilho. Lêem-se como rápidos e agressivos.

Moda e luxo

Carmesim profundo e preto laca, com quase nenhum vermelho vivo. Pensa numa caixa lacada ou num forro de seda vermelha: polido, caro e controlado.

Halloween e terror

Vermelho que se acumula no fundo do quadro ou se infiltra pelos cantos. Usado com parcimónia, é genuinamente inquietante; em excesso, parece uma loja de fatos.

Porque os gradientes vermelho e preto fazem faixas e como evitá-lo

Os gradientes escuros e lisos têm muito poucos tons distintos com que trabalhar, por isso partem-se em degraus visíveis, sobretudo depois de uma aplicação os voltar a comprimir. O vermelho saturado piora no vídeo, porque a maioria dos formatos de vídeo guarda a cor com menor resolução do que o brilho, e as bordas vermelhas esborratam-se. As faixas em gradientes explicam o mecanismo.

1. 1

   Junta grão fino

   Uma camada leve de ruído parte os degraus. Os gradientes granulados têm uma receita pronta a usar.

2. 2

   Exporta no tamanho real

   Carrega no tamanho da própria plataforma, como 1080×1350 para uma publicação de Instagram, para não ser redimensionado e comprimido duas vezes.

3. 3

   Prefere PNG para imagens fixas

   O PNG evita os artefactos em blocos que o JPEG cria em zonas escuras e lisas.

4. 4

   Mantém alguma textura no vídeo

   Um esbatido vermelho perfeitamente liso é o mais difícil para um codificador de vídeo. Um pouco de movimento ou de grão sobrevive muito melhor.

Quanto vermelho usar com o preto

O vermelho carrega associações fortes: perigo, calor, paixão, urgência e, em muitos sítios, sorte e celebração. Ao lado do preto, esses significados ficam mais altos, por isso a proporção decide se um design parece dramático ou alarmante. O significado da cor vermelha trata das associações em mais profundidade.

Cores de texto sobre vermelho e preto

No lado do preto, quase tudo o que é claro se lê. No lado do vermelho, depende da profundidade do vermelho. O escarlate vivo é mais claro do que as pessoas pensam, por isso o texto branco aí deve ser grande e a negrito. As razões usam a fórmula WCAG, em que 4,5:1 é o objetivo para texto pequeno.

CSS de gradiente vermelho e preto

.drama {
  background-color: #0a0505;
  background-image:
    radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%),
    linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%);
  color: #fef2f2;
}

.split {
  background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%);
}

Para mais vermelhos profundos, vê os gradientes vermelhos e os gradientes bordeaux. Se o vermelho e preto é central na tua marca, reserva um Mark do Gradiently e mais ninguém o pode exportar. Desenha-se em todos os tamanhos, de um story a um banner de transmissão, e move automaticamente a sua zona escura mais calma para trás das tuas palavras.