# Degradê vermelho e preto: códigos dramáticos sem faixas [Canonical HTML page](https://gradiently.design/pt-br/guide/red-black-gradient) Vermelho contra preto é o par mais dramático das cores. Pode lembrar o saguão de um cinema, uma luta de título ou um cartaz de terror. Estes códigos dão o drama e mantêm o controle. ## The short version - Um degradê vermelho e preto leva um vermelho como #dc2626 ou #b91c1c até um quase preto, em geral passando por um vermelho-sangue profundo como #450a0a. - Passar o vermelho por um carmim escuro em vez de ir direto ao preto mantém a transição rica e evita uma faixa marrom ou cinza. - Degradês vermelho e preto formam muitas faixas em imagens e vídeos comprimidos, então adicione granulação e evite áreas grandes, lisas e de baixo contraste. - Texto branco lê bem sobre vermelho profundo e preto, enquanto vermelhos médios saturados pedem letras grandes e em negrito para o branco funcionar. - O par combina com cinema, esporte, games, moda, vida noturna e Halloween, e funciona melhor com uma fonte de luz forte do que com vermelho espalhado por igual. Um **degradê vermelho e preto** leva um vermelho vivo como `#dc2626` ou um carmim mais fundo como `#b91c1c` até um quase preto, de preferência passando por um vermelho-sangue como `#450a0a`, para que a transição continue rica. Poucos pares são tão dramáticos: o vermelho chama a atenção e o preto não deixa nada competir com ele. Aqui estão códigos de vermelho e preto para cinco tipos de drama, como evitar as faixas e as cores de texto que funcionam. ## Como fazer o vermelho virar preto sem ficar marrom O erro comum é misturar vermelho puro direto com preto puro em duas paradas. O meio dessa mistura é um vermelho amarronzado e turvo, que parece sujo em vez de escuro. Passe por vermelhos mais escuros e use um preto com um traço de vermelho, para que a sombra pertença à mesma família da luz. - Branco osso: #fef2f2 - Vermelho sinal claro: #f87171 - Escarlate: #ef4444 - Vermelho: #dc2626 - Carmim: #b91c1c - Óxido: #7f1d1d - Sangue: #450a0a - Preto: #0a0a0a Uma rampa de vermelho a preto, com um branco osso para o texto. Use de três a quatro amostras vizinhas em cada degradê. - Duas paradas: meio turvo: `linear-gradient(180deg, #dc2626 0%, #000000 100%)` - Em degraus: rico até o fim: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)` O mesmo vermelho e a mesma escuridão. A versão em degraus passa por carmim e vermelho-sangue em vez de marrom. ## Códigos de degradê vermelho e preto para cinco tipos de drama ### Cinema e suspense Quase tudo preto, com o vermelho chegando como uma única luz lateral, como uma placa de saída em uma 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%)` ### Esporte e noite de luta Vermelho quente subindo de baixo, como se o piso da arena estivesse iluminado. Alto, físico e urgente. - Piso da arena: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)` - Calor subindo: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)` ### Games Diagonais nítidas e cortes secos, mais perto de um gráfico do que de um brilho. Parecem rápidos e agressivos. - Corte seco: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)` - Padrão de linhas de varredura: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)` ### Moda e luxo Carmim profundo e preto laqueado, quase sem vermelho vivo. Pense em uma caixa laqueada ou em um forro de seda vermelha: polido, caro e controlado. - Laca: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)` - Veludo carmim: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)` ### Halloween e terror Vermelho que se acumula na base do quadro ou escorre pelos cantos. Com moderação, é de fato perturbador; em excesso, parece loja de fantasias. - 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 climas. Em cada um, o vermelho ocupa uma região e o preto segura o resto. [Artes de Halloween](https://gradiently.design/pt-br/guide/halloween-graphics) traz mais ideias sazonais. ## Por que degradês vermelho e preto formam faixas e como evitar Degradês escuros e lisos têm poucos tons distintos para trabalhar, então se quebram em degraus visíveis, especialmente depois que um aplicativo os recomprime. O vermelho saturado piora isso em vídeo, porque a maioria dos formatos guarda a cor em resolução menor que o brilho, e as bordas vermelhas borram. [Faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding) explica a mecânica. 1. **Adicione granulação fina** Uma camada leve de ruído quebra os degraus. [Degradês granulados](https://gradiently.design/pt-br/guide/grainy-gradients) traz uma receita pronta. 2. **Exporte no tamanho real** Envie no tamanho da própria plataforma, como 1080×1350 para um post do Instagram, para não ser redimensionado e comprimido duas vezes. 3. **Prefira PNG para imagens estáticas** O PNG evita os artefatos em bloco que o JPEG cria em áreas escuras e lisas. 4. **Mantenha alguma textura no vídeo** Um fade de vermelho perfeitamente liso é o que há de mais difícil para um codificador de vídeo. Um pouco de movimento ou granulaçã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 lugares, sorte e celebração. Ao lado do preto, esses sentidos ficam mais altos, então a proporção decide se um design parece dramático ou alarmante. [Significado da cor vermelha](https://gradiently.design/pt-br/guide/red-color-meaning) trata das associações com mais profundidade. ### Alarmante - Vermelho espalhado por igual em 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 segurando a maior parte do quadro, vermelho em uma região - Carmim profundo atrás do texto, vermelho vivo longe dele - Vermelho, preto e um branco osso discreto - Texto simples, com a luz fazendo o trabalho ## Cores de texto sobre vermelho e preto No lado preto, quase qualquer cor clara se lê. No lado vermelho, depende da profundidade do vermelho. O escarlate vivo é mais claro do que as pessoas pensam, então o texto branco ali deve ser grande e em negrito. As razões usam a fórmula da WCAG, em que 4,5:1 é a meta para texto pequeno. | Fundo | Texto | Contraste | Veredito | | --- | --- | --- | --- | | Preto `#0a0a0a` | Branco osso `#fef2f2` | 18,1:1 | Excelente | | Preto `#0a0a0a` | Escarlate `#ef4444` | 5,3:1 | Bom para títulos em vermelho | | Escarlate `#ef4444` | Branco | 3,8:1 | Só texto grande e em negrito | | Vermelho `#dc2626` | Branco | 4,8:1 | Bom | | Carmim `#b91c1c` | Branco | 6,5:1 | Bom | | Óxido `#7f1d1d` | Branco | 10,0:1 | Excelente | Texto vermelho sobre preto é legível, mas reserve-o para títulos; trechos longos em vermelho saturado cansam a leitura. Um cartaz vertical de noite de luta com letras brancas sobre preto e luz vermelha subindo da base do quadro Um post de academia de boxe com o vermelho subindo do piso e texto branco osso acima. Um 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 lateral vermelha. ## CSS de degradê 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 seção escura iluminada de baixo com vermelho, e um corte diagonal seco. Duas paradas na mesma posição criam uma borda nítida. Para mais vermelhos profundos, veja [degradês vermelhos](https://gradiently.design/pt-br/guide/red-gradient) e [degradês bordô](https://gradiently.design/pt-br/guide/maroon-gradient). Se vermelho e preto são centrais na sua marca, reserve um Mark do Gradiently e ninguém mais poderá exportá-lo. Ele renderiza em qualquer tamanho, de um story a um banner de transmissão, e leva a região escura mais calma para trás das suas palavras automaticamente. ## FAQ ### Qual é um bom código de degradê vermelho e preto? Um bem rico é `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Ele passa por carmim e vermelho-sangue em vez de virar marrom. ### Por que meu degradê de vermelho para preto fica marrom? Uma mistura de duas paradas, de vermelho puro a preto puro, passa por um vermelho amarronzado e turvo. Adicione paradas de carmim e vermelho-sangue e use um preto com um traço de vermelho. ### Que cor de texto usar sobre um degradê vermelho e preto? Branco ou um branco osso quente leem bem sobre preto e sobre vermelhos profundos. Sobre escarlate vivo, use branco só em texto grande e em negrito. ### Como fazer um fundo vermelho e preto com corte seco em CSS? Coloque duas paradas na mesma posição: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` cria uma borda diagonal nítida. ### Como evitar faixas em um degradê vermelho escuro? Adicione granulação fina, exporte no tamanho da própria plataforma e use PNG para imagens estáticas. Fades de vermelho escuro e liso formam mais faixas do que quase qualquer outro degradê.