Sobre o Amarelo
Amarelo (yellow) é um amarelo médio e vibrante, com o código hex #ffff00, ou rgb(255, 255, 0). No HSL ele fica em um matiz de 60°, com 100% de saturação e 50% de luminosidade. Ele é uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: yellow; no lugar do valor hex.
Usando o amarelo em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto amarelo no branco | 1,07 : 1 | reprovado |
| Texto amarelo no preto | 19,56 : 1 | AAA |
Em um fundo amarelo, use texto em preto (19,56 : 1). A WCAG exige no mínimo 4,5 : 1 para textos normais e 3 : 1 para textos grandes. Verifique outras combinações com o Verificador de Contraste.
CSS
.element {
color: yellow; /* or #ffff00 */
background-color: #ffff00;
border: 1px solid rgb(255 255 0 / 50%);
}Cores nomeadas parecidas
Gold (#ffd700), Orange (#ffa500), Green Yellow (#adff2f), Goldenrod (#daa520), Dark Orange (#ff8c00), Yellow Green (#9acd32).
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.