O vermelho é uma das cores mais intensas e apelativas do espectro visível. Associa-se à energia, paixão, ação e força, pelo que é uma escolha frequente em design gráfico, branding, publicidade e design de interfaces.
O vermelho é uma das cores mais intensas e apelativas do espectro visível.
Por atrair tão fortemente a atenção, o vermelho é frequentemente usado para destacar elementos-chave, criar chamadas à ação ou transmitir emoção de forma instantânea.
O vermelho associa-se habitualmente a conceitos como:
O seu significado pode variar consoante a cultura e o contexto, mas quase em todo o lado é uma cor que captura a atenção de forma instantânea.
Na psicologia das cores, o vermelho é um dos matizes que desencadeia a resposta emocional mais intensa.
Pode transmitir entusiasmo, determinação e confiança, mas também urgência ou aviso quando usado com alta saturação.
Por isso é comum encontrá-lo em:
Em interfaces digitais, costuma reservar-se para ações importantes, alertas ou elementos que precisam de se destacar do resto do conteúdo.
O vermelho é amplamente utilizado tanto em media digitais como impressos. É especialmente comum em:
A sua capacidade de captar a atenção torna-o uma excelente cor para destacar botões, promoções e elementos de conversão.
O vermelho tem uma enorme variedade de matizes. Alguns dos tons mais usados são:
| Nome | Amostra | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| IndianRed | |||||
| LightCoral | |||||
| Salmon | |||||
| Crimson | |||||
| FireBrick | |||||
| Red | |||||
| DarkRed | |||||
| Maroon | |||||
| Tomato | |||||
| Coral |
Cada tom transmite uma sensação diferente. Os vermelhos vivos parecem mais dinâmicos, enquanto os vermelhos escuros conferem elegância e sofisticação.
Cores HTMLEmbora o vermelho seja uma cor protagonista, combina facilmente com outras para criar composições equilibradas. As combinações mais habituais incluem:
#FFFFFF#111111#9CA3AF#FFFFF0#F5F5DC#001F3F#0E4D5C#556B2F#F8C8DC#D4AF37A escolha depende do estilo visual pretendido: moderno, elegante, clássico ou arrojado.
A complementar do vermelho situa-se na zona verde-azulada ou ciano do círculo cromático. As combinações complementares criam um contraste muito elevado, pelo que são frequentemente usadas para destacar elementos-chave, criar equilíbrio visual ou construir layouts de grande impacto.
O vermelho pode formar diferentes harmonias cromáticas consoante a disposição das cores no círculo cromático. As mais usadas são:
Combina o vermelho com cores próximas, como laranja e laranja avermelhado, para composições quentes e naturais.
Emparelha o vermelho com verde-azulado para obter o máximo contraste visual.
Mantém o contraste complementar usando duas cores adjacentes à complementar, para um resultado mais equilibrado.
Usa três cores equidistantes no círculo cromático. Popular em ilustração, branding e design criativo.
Usa quatro cores organizadas em dois pares complementares, ideal para paletas mais ricas em projetos complexos.
A partir do vermelho podem gerar-se muitas variações alterando a luminosidade e a saturação. As mais comuns são:
Matizes (adicionando branco)
Tons (adicionando cinza)
Sombras (adicionando preto)
Variações de saturação
Escalas cromáticas
Estas alterações permitem adaptar a mesma cor a diferentes elementos da interface sem perder coerência visual.
As paletas baseadas em vermelho podem comunicar desde energia até elegância, consoante as cores que as acompanham. Combinações populares incluem:
3 cores
3 cores
3 cores
3 cores
3 cores
Em design web, recomenda-se equilibrar o vermelho com neutros para evitar uma sensação visual demasiado intensa.
Paletas de coresAo usar vermelho em texto ou botões, verifique o contraste com o fundo.
Seguir as recomendações de acessibilidade WCAG ajuda a manter o conteúdo legível para todos os utilizadores, especialmente com tons claros ou altamente saturados.
Antes de usar uma cor numa interface, verifique a sua razão de contraste sobre fundos brancos e pretos.
Texto vermelho / fundo branco
4.99:1AA ✓
Texto branco / fundo vermelho
4.99:1AA ✓
Texto preto / fundo coral
7.56:1AA ✓
Texto vermelho / fundo preto
5.77:1AA ✓
O vermelho funciona especialmente bem em gradientes graças à sua riqueza cromática. Gradientes comuns incluem:
#FF0000 → #FF8C00#FF0000 → #FF69B4#FF0000 → #8B008B#FF0000 → #7F1D1D#FF0000 → #111111Estes gradientes são amplamente usados em fundos, interfaces modernas e elementos destacados.
Gerador de gradientesPara além dos códigos HEX, o vermelho tem um papel concreto nas interfaces. Veja como funciona em componentes reais de UI: botões, estados, formulários e branding.
O vermelho simboliza energia, paixão, força, ação e protagonismo. Também pode representar urgência, perigo ou aviso consoante o contexto.
O vermelho combina especialmente bem com branco, preto, cinzento, azul marinho, bege, marfim, verde azeitona e dourado.
A sua complementar situa-se na gama verde-azulada ou ciano, criando um dos contrastes mais fortes do círculo cromático.
É usado em botões CTA, promoções, mensagens importantes, indicadores de erro, branding e elementos que precisam de captar a atenção rapidamente.
Escolha qualquer cor e copie Hex, RGB, HSL ou OKLCH com tons e harmônicas.
ExperimentarExplore paletas prontas e guarde as favoritas neste dispositivo.
ExperimentarExplore harmônicas num círculo interativo e crie paletas equilibradas.
Experimentar