Sobre o Roxo
Roxo (purple) é um magenta escuro e vibrante, com o código hex #800080, ou rgb(128, 0, 128). Em HSL, ele tem matiz de 300°, saturação de 100% e luminosidade de 25%. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: purple; no lugar do valor hex.
Usando o roxo em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto roxo no branco | 9.42 : 1 | AAA |
| Texto roxo no preto | 2.23 : 1 | reprovado |
Em um fundo roxo, use texto branco (9.42 : 1). O WCAG exige no mínimo 4.5 : 1 para textos corridos e 3 : 1 para textos grandes. Teste outras combinações com o Verificador de Contraste.
CSS
.element {
color: purple; /* or #800080 */
background-color: #800080;
border: 1px solid rgb(128 0 128 / 50%);
}Cores nomeadas semelhantes
Magenta Escuro (#8b008b), Índigo (#4b0082), Roxo Rebecca (#663399), Vermelho Violeta Médio (#c71585), Azul Ardósia Escuro (#483d8b), Violeta Escuro (#9400d3).
Nomear Cores
Cole um código HEX para obter o nome mais próximo, legível para humanos, e nomes de tokens limpos para o seu CSS, SCSS, JavaScript ou configuração do Tailwind.