# Gradientes vermelho e preto: códigos dramáticos sem faixas [Canonical HTML page](https://gradiently.design/pt-pt/guide/red-black-gradient) O vermelho contra o preto é o par mais dramático da cor. Pode parecer o átrio de um cinema, um combate de título ou um cartaz de terror. Estes códigos dão-te o drama e mantêm o controlo. ## The short version - Um gradiente vermelho e preto esbate um vermelho como #dc2626 ou #b91c1c até um quase preto, normalmente através de um vermelho-sangue profundo como #450a0a. - Esbater o vermelho através de um carmesim escuro, em vez de direto para preto, mantém a transição rica e evita uma faixa castanha ou cinzenta. - Os gradientes vermelho e preto fazem muitas faixas em imagens e vídeos comprimidos, por isso junta grão e evita zonas grandes, lisas e de baixo contraste. - O texto branco lê-se bem sobre vermelho profundo e preto, enquanto os vermelhos médios saturados precisam de letra grande e a negrito para o branco funcionar. - O par serve cinema, desporto, jogos, moda, vida noturna e Halloween, e funciona melhor com uma fonte de luz forte do que com vermelho espalhado por igual. 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. - Branco osso: #fef2f2 - Vermelho sinal claro: #f87171 - Escarlate: #ef4444 - Vermelho: #dc2626 - Carmesim: #b91c1c - Óxido: #7f1d1d - Sangue: #450a0a - Preto: #0a0a0a Uma rampa de vermelho a preto, com um branco osso para o texto. Usa três ou quatro amostras vizinhas em cada gradiente. - Duas paragens: meio turvo: `linear-gradient(180deg, #dc2626 0%, #000000 100%)` - Escalonado: rico até ao fim: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)` O mesmo vermelho e a mesma escuridão. A versão escalonada passa por carmesim e vermelho-sangue em vez de castanho. ## 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. - Luz lateral: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)` - Borda vermelha: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)` ### 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. - Chão da arena: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)` - Calor a subir: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)` ### 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. - Corte seco: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)` - Padrão de linhas de varrimento: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)` ### 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. - Laca: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)` - Veludo carmesim: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)` ### 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. - Poça: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)` - Vinheta vermelha: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)` Dez códigos em cinco ambientes. Em cada um, o vermelho ocupa uma região e o preto segura o resto. Os [gráficos de Halloween](https://gradiently.design/pt-pt/guide/halloween-graphics) têm mais ideias sazonais. ## 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](https://gradiently.design/pt-pt/guide/gradient-banding) explicam o mecanismo. 1. **Junta grão fino** Uma camada leve de ruído parte os degraus. Os [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) têm uma receita pronta a usar. 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. **Prefere PNG para imagens fixas** O PNG evita os artefactos em blocos que o JPEG cria em zonas escuras e lisas. 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](https://gradiently.design/pt-pt/guide/red-color-meaning) trata das associações em mais profundidade. ### Alarmante - Vermelho espalhado por igual por todo o quadro - Vermelho vivo atrás de texto branco pequeno - Vermelho, preto e uma terceira cor berrante - Brilho vermelho em cada palavra ### Dramático - Preto a segurar a maior parte do quadro, vermelho numa região - Carmesim profundo atrás do texto, vermelho vivo afastado - Vermelho, preto e um branco osso discreto - Letra simples, com a luz a fazer o trabalho ## 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. | Fundo | Texto | Contraste | Veredicto | | --- | --- | --- | --- | | Preto `#0a0a0a` | Branco osso `#fef2f2` | 18,1:1 | Excelente | | Preto `#0a0a0a` | Escarlate `#ef4444` | 5,3:1 | Bom para títulos a vermelho | | Escarlate `#ef4444` | Branco | 3,8:1 | Só letra grande e a negrito | | Vermelho `#dc2626` | Branco | 4,8:1 | Bom | | Carmesim `#b91c1c` | Branco | 6,5:1 | Bom | | Óxido `#7f1d1d` | Branco | 10,0:1 | Excelente | O texto vermelho sobre preto é legível, mas reserva-o para títulos; passagens longas em vermelho saturado cansam a leitura. Cartaz vertical de noite de combate com letras brancas sobre preto e luz vermelha a subir do fundo do quadro Uma publicação de ginásio de boxe com vermelho a subir do chão e letra branco osso por cima. Story vertical de cinema com letras claras sobre preto, iluminado de um lado por um brilho vermelho profundo Um story de cinema iluminado por uma única luz vermelha lateral. ## CSS de gradiente vermelho e preto ```css .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%); } ``` Uma secção escura iluminada com vermelho por baixo e um corte diagonal seco. Duas paragens na mesma posição fazem uma borda nítida. Para mais vermelhos profundos, vê os [gradientes vermelhos](https://gradiently.design/pt-pt/guide/red-gradient) e os [gradientes bordeaux](https://gradiently.design/pt-pt/guide/maroon-gradient). 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. ## FAQ ### Qual é um bom código de gradiente vermelho e preto? Um rico é `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Passa por carmesim e vermelho-sangue em vez de ficar castanho. ### Porque é que o meu gradiente de vermelho para preto parece castanho? Uma mistura de duas paragens, de vermelho puro a preto puro, passa por um vermelho castanho turvo. Junta paragens de carmesim e vermelho-sangue e usa um preto com um traço de vermelho. ### Que cor de texto vai num gradiente vermelho e preto? O branco ou um branco osso quente lê-se bem sobre preto e sobre vermelhos profundos. Sobre escarlate vivo, usa o branco só em letra grande e a negrito. ### Como faço um fundo vermelho e preto de corte seco em CSS? Põe duas paragens na mesma posição: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` cria uma borda diagonal nítida. ### Como evito faixas num gradiente vermelho escuro? Junta grão fino, exporta no tamanho da própria plataforma e usa PNG para imagens fixas. Os esbatidos vermelhos escuros e lisos fazem mais faixas do que quase qualquer outro gradiente.