Roxo está situado exatamente entre vermelho e azul na roda de cores. Essas cores primárias evocam emoções opostas, com o vermelho sendo mais ardente e o azul mais sereno. Essa contradição se funde perfeitamente no roxo, despertando sensações de riqueza, sofisticação e poder.
Roxo é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #9D00FF
- Valor RGB: 61,6% vermelho, 0% verde e 100% 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 roxo em seus designs:
- Crie uma marca luxuosa. Roxo é ideal para projetos que visam transmitir luxo e qualidade, sendo uma excelente escolha para interfaces de produtos ou serviços de alto padrão.
- Faça informações importantes se destacarem. Uma paleta de roxo bem escolhida pode diferenciar efetivamente categorias ou destacar estatísticas específicas para determinados conjuntos de dados.
- Atraia atenção e incentive a ação. Um toque de roxo vibrante contra um fundo neutro chama a atenção para botões ou seções importantes de um site.
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 avermelhado-azulado que o roxo, considere:
- Violeta (#7F00FF) tende mais para o azul e pode ter uma associação mais forte com espiritualidade e sabedoria.
- Lavanda (#D3D3FF) é um parente próximo do roxo, mas oferece um efeito mais leve e calmante.
- Lilás (#A47DAB) tende a ser um pouco mais frio e próximo ao violeta do que o roxo verdadeiro.
- Periwinkle (#CCCCFF) está mais próximo do azul do que a maioria dos roxos, evocando emoções mais calmas e pacíficas.
Para complementar o roxo, considere combiná-lo com:
- Rosewater (#FFD6D1) oferece um contraste sutil para realçar a ousadia do roxo.
- Ouro (#EFBF04) enfatiza a sensação de luxo e riqueza do roxo.
- Marfim (#FFFFE3) fornece um fundo neutro para que o roxo se destaque.
- Azul real (#305CDE) cria um contraste ousado que amplifica o drama do roxo.
Outras cores que combinam bem com roxo incluem neutros como branco, cinza ou preto. Elas criam um pano de fundo sofisticado enquanto permitem que o roxo brilhe em qualquer design.
Como o roxo é brilhante e ousado, ele pode entrar em conflito com:
- Marrom (#550000) é uma cor forte que entra em conflito com um roxo igualmente intenso.
- Fúcsia (#FE3894) é muito semelhante ao roxo, então a combinação faz o design parecer desordenado.
- Chartreuse (#CCFF00) é uma cor brilhante que entra em conflito com a ousadia do roxo.
- Verde neon (#2CFF05) é visualmente chocante quando combinado com um roxo vibrante.
Roxo é uma cor cativante que conota poder, confiança e sabedoria. Simboliza realeza, extravagância e, às vezes, magia.
Na psicologia das cores, o roxo evoca uma gama complexa de emoções devido à sua mistura de vermelhos apaixonados e azuis tranquilos. Está associado à criatividade e imaginação, despertando inspiração e alegria quando usado em determinados contextos.
A versatilidade do roxo o torna uma excelente escolha para uma ampla gama de designs de UI, desde aplicativos criativos até plataformas financeiras. Ao usar roxo em seus designs, é importante considerar sua ousadia — use-o como um destaque ou combine-o com tons neutros para criar uma experiência equilibrada e visualmente confortável.
Roxo tem uma história rica que remonta aos anos 1500. Além de flores ou pedras preciosas ocasionais, o roxo é raramente visto na natureza. Os usos históricos do roxo vêm principalmente de corantes feitos pelo homem usando muco de caracol.
Às vezes conhecido como roxo real, essa cor representou luxo, riqueza e sofisticação por séculos. Realezas do Egito, Roma e Pérsia popularizaram a reverência pelo roxo ao limitar seu uso às roupas e joias de membros da sociedade de alta posição.
Hoje, o roxo mantém sua reputação de riqueza e sofisticação, enquanto se torna mais acessível às massas.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Neblina Roxa
Reação Alquímica
Fantasia Fúcsia
Verificador de contraste
Contraste 5,42
- Texto grande
#9D00FF
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Reprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Contraste 3,88
- Texto grande
#9D00FF
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Aprovado | Reprovado | |
Aprovado | Reprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #9d00ff, conhecida como Roxo, tem valores RGB de R:157, G:0, B:255 e valores CMYK de C:38, M:100, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #9d00ff | #9d00ff |
| RGB DECIMAL | 157, 0, 255 | RGB(157,0,255) |
| RGB PERCENTAGE | 61.6, 0.0, 100.0 | RGB(61.6%,0.0%,100.0%) |
| CMYK | 38, 100, 0, 0 | |
| HSL | HSL(276.9, 100.0%, 50.0%) | HSL(276.9, 100.0%, 50.0%) |
| HSV (OR HSB) | 276.9°, 100.0, 100.0 | |
| WEB SAFE | #1530255 | #1530255 |
| BINARY | 10011101, 00000000, 11111111 | |
| iOS - SwiftUI | Color(red: 0.616, green: 0.000, blue: 1.000) | |
| iOS - UIKit | UIColor(red: 0.616, green: 0.000, blue: 1.000, alpha: 1) | |
| Android - Compose | Color(0xFF9D00FF) |
