Sobre o Coral
Coral (coral) é um laranja claro e vibrante, com o código hex #ff7f50, ou rgb(255, 127, 80). Em HSL, ele fica com matiz de 16°, 100% de saturação e 66% de luminosidade. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: coral; no lugar do valor hex.
Usando o Coral em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto coral no branco | 2.50 : 1 | reprova |
| Texto coral no preto | 8.40 : 1 | AAA |
Em um fundo coral, use texto em preto (8.40 : 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: coral; /* or #ff7f50 */
background-color: #ff7f50;
border: 1px solid rgb(255 127 80 / 50%);
}Cores nomeadas semelhantes
Tomate (#ff6347), Salmão (#fa8072), Marrom Arenoso (#f4a460), Coral Claro (#f08080), Salmão Escuro (#e9967a), 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.