Sobre a Lavanda
Lavanda (lavender) é um azul muito claro e vibrante, com o código hex #e6e6fa, ou rgb(230, 230, 250). Em HSL, ela fica com matiz de 240°, saturação de 67% e luminosidade de 94%. É uma das 148 cores nomeadas que todo navegador entende, então você pode escrever color: lavender; em vez do valor hex.
Usando a lavanda em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto lavanda no branco | 1.23 : 1 | reprova |
| Texto lavanda no preto | 17.06 : 1 | AAA |
Em um fundo lavanda, use texto em preto (17.06 : 1). A WCAG exige no mínimo 4.5 : 1 para textos corridos e 3 : 1 para textos grandes. Confira outras combinações com o Verificador de Contraste.
CSS
.element {
color: lavender; /* or #e6e6fa */
background-color: #e6e6fa;
border: 1px solid rgb(230 230 250 / 50%);
}Cores nomeadas semelhantes
Azul Alice (#f0f8ff), Fumaça Branca (#f5f5f5), Branco Fantasma (#f8f8ff), Ciano Claro (#e0ffff), Rubor Lavanda (#fff0f5), Azul-celeste (#f0ffff).
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.