Sobre a Laranja
Laranja (orange) é um laranja médio e vibrante, com o código hex #ffa500, ou rgb(255, 165, 0). Em HSL, ele tem matiz de 39°, saturação de 100% e luminosidade de 50%. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: orange; em vez do valor hex.
Usando laranja em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto laranja no branco | 1.97 : 1 | reprovado |
| Texto laranja no preto | 10.63 : 1 | AAA |
Em um fundo laranja, use texto em preto (10.63 : 1). O WCAG exige no mínimo 4.5 : 1 para textos corridos e 3 : 1 para textos grandes. Verifique outras combinações com o Verificador de Contraste.
CSS
.element {
color: orange; /* or #ffa500 */
background-color: #ffa500;
border: 1px solid rgb(255 165 0 / 50%);
}Cores nomeadas semelhantes
Laranja Escuro (#ff8c00), Vara-de-ouro (#daa520), Ouro (#ffd700), Vara-de-ouro Escuro (#b8860b), Chocolate (#d2691e), Peru (#cd853f).
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.