Vermelho é um tom ousado e vívido que se encontra entre laranja e roxo na roda de cores. Sendo uma das três cores primárias no espaço de cores RGB, o vermelho não pode ser criado pela mistura de outras cores. Em vez disso, outras cores são derivadas dele. Isso inclui tons mais profundos como bordô e vinho até tons mais suaves como vermelho-rosado.

O vermelho é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #FF2C2C
- Valor RGB: 100% vermelho, 17,3% verde e 17,3% azul
A escolha de cores no design de UX e UI deve considerar critérios de acessibilidade, que são fundamentais. Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
Aqui estão algumas maneiras de usar o vermelho em seus designs:
- Incentivar ação. Você pode usar vermelho para avisos, mensagens de erro ou botões de chamada para ação. A cor cria uma sensação de urgência, incentivando os usuários a interagir com elementos ou tomar uma ação.
- Desencadear respostas emocionais. O vermelho pode provocar emoções fortes, como paixão, amor ou excitação. É por isso que tons de vermelho frequentemente representam “curtidas” em aplicativos sociais.
- Estabelecer hierarquia visual. O vermelho funciona bem para estabelecer hierarquia visual em designs, usando sua ousadia para chamar a atenção para os elementos visuais mais importantes de um design. Isso facilita para o espectador priorizar visualmente elementos críticos sobre os menos importantes.
Dica: Ao projetar para um público global, pesquise o simbolismo da cor em diferentes culturas — o vermelho não significa o mesmo em todos os lugares.
Para variações dentro do mesmo espectro de cores ricas como o vermelho, considere:
- Vermelho-laranja (#FF4B33) compartilha a mesma vivacidade do vermelho, mas o toque de laranja adiciona um pouco mais de brilho.
- Escarlate (#ED2100) combina vermelho e laranja, mas pende mais para o vermelho, resultando em um tom ousado e sofisticado.
- Vermelho pastel (#FF746C) é um tom de vermelho suave e sonhador que adiciona um toque de suavidade.
- Vermelho-rosado (#FA003F) é um tom suave de vermelho-rosa que exala uma tonalidade semelhante a uma rosa.
Para complementar o vermelho, considere combiná-lo com:
- Aqua (#00FFF0) combina lindamente com vermelho para criar uma combinação de cores suave e relaxante.
- Laranja claro (#FFDBBB) cria uma paleta de cores quente e vibrante quando combinada com vermelho.
- Rosa claro (#FFC5CB) combina bem com este tom rosado para designs românticos e íntimos.
- Creme (#FDFBD4) é um tom de amarelo pálido que cria uma paleta de cores quente e elegante quando combinado com vermelho.
- Azul marinho (#000080) cria uma sensação tradicional e sofisticada quando usado com diferentes tons de vermelho.
Outras cores que combinam bem com vermelho incluem tons neutros como branco, cinza, preto e alguns tons de marrom. Essas cores ajudam a suavizar a intensidade do vermelho enquanto oferecem um estilo de design elegante e moderno.
Embora o vermelho seja versátil, ele pode entrar em conflito com:
- Verde (#008000) e vermelho são cores complementares, mas espectadores com deficiência de visão de cores geralmente têm dificuldade em distinguir uma da outra.
- Magenta (#FF00FF) e vermelho podem ser visualmente avassaladores quando usados juntos, dificultando que elementos de design individuais se destaquem.
- Roxo neon (#BC13FE) pode entrar em conflito com a vivacidade do vermelho, criando um efeito visual distrativo e agressivo.
- Amarelo (#FFFF00) éaltamente saturado, o que pode parecer opressor ao lado do vermelho.
De acordo com a psicologia das cores, o vermelho simboliza amor, paixão, força e desejo. Mas também pode despertar sentimentos de perigo e raiva. A capacidade do vermelho de evocar uma ampla gama de emoções profundas é o que o torna uma cor tão rica e especial.
O vermelho é uma cor simbólica em muitas culturas diferentes. Nas culturas chinesa e japonesa, o vermelho simboliza prosperidade, boa sorte e alegria — por isso é uma cor tão proeminente em casamentos e celebrações. Na Índia, o vermelho simboliza pureza, fertilidade e felicidade matrimonial. Hoje, o vermelho é um símbolo de romance, mas também pode simbolizar avisos em designs.
Como o vermelho tem muitos significados culturais diferentes, é importante considerar como você usa a cor, especialmente ao projetar para um público global.
Embora a origem precisa seja desconhecida, etimologistas rastrearam o nome “vermelho” até a palavra proto-indo-europeia “reudh.” Muitas variações da palavra existiram antes de evoluir para “vermelho” no inglês moderno. Em muitas culturas diferentes, foi a primeira cor nomeada além de preto e branco.
A cor vermelha remonta aos tempos pré-históricos, quando os primeiros humanos usavam argila vermelha como pigmento de cor para pintura corporal e em cavernas. Historicamente, a cor ousada do vermelho representou sangue, poder, vida e riqueza.
No antigo Egito, o vermelho simbolizava vida e renascimento, mas também estava associado à destruição e ao mal. Essa cor marcante e memorável era — e ainda é — proeminente em arte, cosméticos e cerimônias religiosas.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Romance Vermelho
Saudações de Temporada
Kit de Lábios
Verificador de contraste
Contraste 3,72
- Texto grande
#FF2C2C
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Aprovado | Reprovado | |
Aprovado | Reprovado |
Contraste 5,65
- Texto grande
#FF2C2C
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Reprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #ff2c2c, conhecida como Vermelho, tem valores RGB de R:255, G:44, B:44 e valores CMYK de C:0, M:83, Y:83, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ff2c2c | #ff2c2c |
| RGB DECIMAL | 255, 44, 44 | RGB(255,44,44) |
| RGB PERCENTAGE | 100.0, 17.3, 17.3 | RGB(100.0%,17.3%,17.3%) |
| CMYK | 0, 83, 83, 0 | |
| HSL | HSL(0.0, 100.0%, 58.6%) | HSL(0.0, 100.0%, 58.6%) |
| HSV (OR HSB) | 0.0°, 82.7, 100.0 | |
| WEB SAFE | #2555151 | #2555151 |
| BINARY | 11111111, 00101100, 00101100 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.173, blue: 0.173) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.173, blue: 0.173, alpha: 1) | |
| Android - Compose | Color(0xFFFF2C2C) |


