# Gradientes vermelhos: energia sem cara de alerta [Canonical HTML page](https://gradiently.design/pt-br/guide/red-gradient) O vermelho chama atenção mais rápido que qualquer outra cor, e é exatamente por isso que dá errado. Como criar gradientes vermelhos que parecem vivos, quentes e confiantes, e não barulhentos. ## The short version - Um gradiente vermelho é uma mistura construída em torno de tons de vermelho como carmim, escarlate, sangue de boi ou coral, usada em designs que precisam de calor e urgência. - Os gradientes vermelhos ficam melhores quando só uma parada é totalmente saturada e as outras seguem para um vinho mais profundo ou para um laranja e um rosa mais quentes. - O #ff0000 puro com texto branco tem razão de contraste de 4:1, abaixo do mínimo de 4,5:1 para texto corrido normal. - Manter o vermelho ao lado dos seus vizinhos quentes, e não de um azul saturado, evita a vibração e o alarme que deixam os designs vermelhos agressivos. - Vermelhos profundos como sangue de boi e vinho parecem premium e calmos, enquanto o escarlate vivo e o coral parecem enérgicos e divertidos. Um **gradiente vermelho** é uma mistura construída em torno do vermelho, do escarlate vivo e do carmim ao sangue de boi profundo e ao coral suave, e é o gradiente mais enérgico que você pode colocar numa tela. O segredo para usá-lo bem é a contenção: deixe uma parada com saturação total, leve o resto para um vinho mais profundo ou para um laranja e um rosa mais quentes e mantenha o vermelho longe dos lugares onde as pessoas esperam avisos. Assim, o vermelho parece calor e apetite, e não uma mensagem de erro. Abaixo você encontra três paletas vermelhas, nove códigos de gradiente vermelho para copiar, os números de contraste para texto sobre vermelho e onde o vermelho funciona melhor. Para entender como as cores carregam significado, veja [psicologia das cores](https://gradiently.design/pt-br/guide/color-psychology). ## Por que o vermelho é mais difícil de usar do que parece O vermelho é barulhento por vários motivos ao mesmo tempo. O vermelho de tela atinge uma saturação altíssima, então domina tudo o que está ao lado. As interfaces ensinaram as pessoas a lê-lo como perigo: estados de erro, botões de excluir, bateria fraca e contadores de não lidos são quase sempre vermelhos. E um vermelho vivo colocado bem ao lado de um azul saturado pode parecer tremer ou ficar numa profundidade diferente, um efeito chamado cromostereopsia, que torna cansativo ler texto nessa combinação. ### Parece alarme - `#ff0000` chapado preenchendo a tela inteira - Texto ou bordas vermelhas numa página branca sem nenhuma outra cor quente - Vermelho colocado direto contra um azul saturado - Vermelho usado tanto na marca quanto nas mensagens de erro ### Parece energia - Uma parada vermelha viva caindo para um vinho ou sangue de boi profundo - Vermelho misturado com os vizinhos quentes, laranja e rosa - Vermelho sobre um fundo escuro e quente, com um branco suave para o texto - Uma cor separada e claramente diferente reservada para os erros ## Três paletas vermelhas: carmim, sangue de boi e coral A maioria dos gradientes vermelhos bem-sucedidos vem de uma de três famílias. O carmim puxa um pouco para o azul e parece ousado e clássico. O sangue de boi e o vinho são vermelhos profundos e escuros que lembram couro, veludo e vinho tinto. O coral é o vermelho levado para o laranja e o rosa, mais suave e mais simpático. Escolha uma família antes de escolher um gradiente, porque misturar as três numa mesma mistura costuma deixar tudo barrento. - Carmim: #e11d48 - Carmim profundo: #b91c1c - Sangue de boi: #7f1d1d - Vinho: #4a0e0e - Coral: #ff6f61 - Rosado: #fecaca O carmim no topo, sangue de boi e vinho para profundidade, coral e rosado para leveza. Cada família cria o seu tipo de gradiente vermelho. ## Códigos de gradiente vermelho para copiar Todos estes gradientes mantêm o vermelho como nota principal, mas variam em temperatura e profundidade. Os mais escuros funcionam como fundos inteiros; os mais vivos são melhores para botões, selos, cartões e explosões curtas de atenção. - Fogo carmim: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)` - Sangue de boi: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)` - Coral ao carmim: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)` - Brilho cereja: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)` - Vermelho ao rosa: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)` - Escarlate ao vinho: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)` - Terracota: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)` - Rosado suave: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)` - Vermelho ao preto: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)` Nove gradientes vermelhos, do vivo ao profundo. Cada um se mistura só com vizinhos quentes ou vermelhos mais profundos, nunca passando pelo cinza. Repare no que os códigos têm em comum. A parada viva fica numa ponta ou num ponto, nunca no campo inteiro. As paradas escuras são *vermelhos* escuros, não preto nem cinza, então a mistura mantém a cor enquanto escurece. Se um gradiente vermelho fica marrom no meio, você provavelmente o misturou com um verde ou um cinza; o nosso guia de [gradientes barrentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por quê. ## Como controlar a intensidade do vermelho 1. **Escolha uma parada viva** Decida onde fica o vermelho mais saturado, geralmente perto de um título ou do ponto focal. Todo o resto desce a partir dele em luminosidade ou saturação. 2. **Dê a ele vizinhos escuros** Vermelhos profundos como `#7f1d1d` e `#4a0e0e` fazem a parada viva brilhar por contraste, como uma única brasa acesa numa fogueira escura. 3. **Misture com cores quentes** Laranja, coral e rosa ficam ao lado do vermelho no círculo cromático, então se misturam sem problemas. Veja [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) para entender por que os vizinhos sempre se comportam bem. 4. **Limite o vermelho a uma parte do design** O vermelho é, por natureza, uma cor de destaque. Mesmo num design guiado pelo vermelho, uma área grande e calma ajuda; a [regra 60-30-10](https://gradiently.design/pt-br/guide/60-30-10-rule) é uma boa proporção inicial. 5. **Use outra cor para os erros** Se a sua marca é vermelha, dê às mensagens de erro um tratamento claramente diferente, como um ícone mais um vermelho mais escuro ou puxado para o laranja, para que um aviso nunca pareça marketing. ## Texto sobre um gradiente vermelho O vermelho fica num meio incômodo para texto. O vermelho puro de tela é escuro demais para o texto preto ser confortável e claro demais para o texto branco passar no mínimo de texto corrido. A solução é deixar o fundo mais escuro quando você quer letras brancas, ou mais claro quando quer letras escuras, e conferir o ponto mais claro do gradiente que fica atrás das suas palavras. | Fundo | Texto | Contraste | Veredito | | --- | --- | --- | --- | | `#ff0000` vermelho puro | Branco | 4,0:1 | Só texto grande | | `#dc2626` vermelho | Branco | 4,8:1 | Passa para texto corrido | | `#b91c1c` carmim profundo | Branco | 6,5:1 | Confortável | | `#7f1d1d` sangue de boi | `#fff1f0` branco suave | 9,1:1 | Excelente | | `#ff6f61` coral | Branco | 2,7:1 | Falha | | `#ff6f61` coral | `#1a0505` quase preto | 7,2:1 | Excelente | Razões calculadas com a fórmula da WCAG. 4,5:1 é o mínimo para texto normal e 3:1 para texto grande. Detalhes em [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility). Um post de liquidação em retrato com as palavras Liquidação de inverno em branco sobre um gradiente carmim profundo O título sobre a parte mais profunda do vermelho, onde o texto branco fica confortável. Um story vertical anunciando o novo horário estendido sobre um gradiente vermelho quente com um brilho vivo perto do topo O mesmo vermelho num story, com a parada viva longe das palavras. ## Onde os gradientes vermelhos funcionam melhor O vermelho pertence aos lugares onde energia e apetite são o objetivo. É comum em comida e bebida, esporte, entretenimento e promoções, e no design festivo; na tradição chinesa, o vermelho é fortemente associado à sorte e à celebração, e é por isso que ele lidera o design do Ano-Novo Lunar. Os significados mudam entre culturas, então confira os do seu público em [significados das cores pelo mundo](https://gradiently.design/pt-br/guide/color-meanings-around-the-world). - **Comida, cafés e restaurantes:** gradientes coral e terracota parecem quentes e apetitosos - **Esporte e fitness:** fogo carmim e escarlate ao vinho transmitem velocidade e esforço - **Moda e beleza:** sangue de boi, vinho e rosado parecem pensados e premium - **Promoções e lançamentos:** uma parada viva sobre um campo vermelho profundo atrai o olhar sem gritar - **Música e vida noturna:** vermelho ao preto e brilho cereja combinam com espaços escuros e iluminados Se você quer o vermelho sem refazê-lo para cada formato, o Mercado do Gradiently permite buscar Marks com palavras como “vermelho profundo” ou “coral”. Cada Mark move sua área mais calma para trás das suas palavras, o que resolve para você o problema do texto sobre vermelho visto acima. ## FAQ ### Que cores combinam com o vermelho num gradiente? Os vizinhos quentes se misturam melhor: laranja, coral, rosa e vinho profundo. Misturar o vermelho com verde ou cinza tende a deixar o meio marrom. ### Dá para usar texto branco sobre um fundo vermelho? Sim, se o vermelho for profundo o bastante. Branco sobre `#dc2626` dá 4,8:1 e passa para texto corrido, mas branco sobre o `#ff0000` puro dá só 4:1, então use apenas para texto grande. ### Qual é o código hex de um gradiente vermelho escuro? Experimente `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, uma mistura sangue de boi que continua vermelha de ponta a ponta. ### Por que o meu gradiente vermelho parece agressivo? Normalmente porque o campo inteiro é vermelho totalmente saturado. Mantenha uma parada viva, deixe o resto cair para vermelhos mais profundos e evite colocar o vermelho direto contra um azul saturado.