Sobre o Verde-azulado
Verde-azulado (teal) é um ciano escuro e vibrante, com o código hexadecimal #008080, ou rgb(0, 128, 128). No HSL, ela tem matiz de 180°, saturação de 100% e luminosidade de 25%. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: teal; em vez do valor hex.
Usando o verde-azulado em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto verde-azulado sobre branco | 4,77 : 1 | AA |
| Texto verde-azulado sobre preto | 4,40 : 1 | AA apenas para texto grande |
Em um fundo verde-azulado, use texto em branco (4,77 : 1). A WCAG exige no mínimo 4,5 : 1 para textos normais e 3 : 1 para textos grandes. Teste outras combinações com o Verificador de Contraste.
CSS
.element {
color: teal; /* or #008080 */
background-color: #008080;
border: 1px solid rgb(0 128 128 / 50%);
}Cores nomeadas parecidas
Ciano Escuro (#008b8b), Verde Mar (#2e8b57), Verde Mar Claro (#20b2aa), Verde Mar Médio (#3cb371), Cinza Ardósia Escuro (#2f4f4f), Azul Aço (#4682b4).
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.