Sobre o Rosa Claro
Rosa Claro (lightpink) é um vermelho muito claro e vibrante, com o código hex #ffb6c1, ou rgb(255, 182, 193). Em HSL, ele fica no matiz de 351°, com 100% de saturação e 86% de luminosidade. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: lightpink; em vez do valor hex.
Usando o Rosa Claro em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto Rosa Claro no branco | 1,65 : 1 | reprova |
| Texto Rosa Claro no preto | 12,71 : 1 | AAA |
Em um fundo rosa claro, use texto preto (12,71 : 1). O WCAG pede no mínimo 4,5 : 1 para textos normais e 3 : 1 para textos grandes. Confira outras combinações no Verificador de contraste.
CSS
.element {
color: lightpink; /* or #ffb6c1 */
background-color: #ffb6c1;
border: 1px solid rgb(255 182 193 / 50%);
}Cores nomeadas parecidas
Rosa (#ffc0cb), Pêssego Claro (#ffdab9), Trigo (#f5deb3), Branco Navajo (#ffdead), Bisque (#ffe4c4), Cardo (#d8bfd8).
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.