Sobre a cor Rosa
Rosa (pink) é um vermelho muito claro e vibrante, com o código hex #ffc0cb, ou rgb(255, 192, 203). No HSL, ela fica no matiz de 350°, com 100% de saturação e 88% de luminosidade. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: pink; no lugar do valor hex.
Usando o Rosa em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto rosa no branco | 1.54 : 1 | reprova |
| Texto rosa no preto | 13.65 : 1 | AAA |
Em um fundo rosa, use texto em preto (13.65 : 1). A WCAG exige pelo menos 4.5 : 1 para textos corridos e 3 : 1 para textos grandes. Confira outras combinações com o Verificador de contraste.
CSS
.element {
color: pink; /* or #ffc0cb */
background-color: #ffc0cb;
border: 1px solid rgb(255 192 203 / 50%);
}Cores nomeadas parecidas
Rosa claro (#ffb6c1), Pêssego (#ffdab9), Bisque (#ffe4c4), Trigo (#f5deb3), Cardo (#d8bfd8), Rosa nebuloso (#ffe4e1).
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.