Cores no CSS: As cores são o veículo principal para a comunicação visual e a identidade em qualquer design web. O CSS oferece uma rica variedade de métodos para definir, manipular e aplicar cores aos elementos HTML, desde o texto até as sombras.
Neste artigo, vamos explorar as diferentes sintaxes de cores no CSS, como gerenciar paletas com variáveis e a regra de ouro para garantir que suas escolhas de cores sejam acessíveis a todos os usuários.
1. As Principais Formas de Especificar Cores
O CSS aceita cores em diversos formatos, cada um com sua utilidade.
| Formato | Sintaxe | Descrição | Uso Principal |
| Nome | red, blue, black | Nomes de cores básicas (mais de 140 disponíveis). | Simplicidade e legibilidade. |
| Hexadecimal (HEX) | #RRGGBB | Combinação de 6 dígitos (0-9, A-F) para Vermelho, Verde e Azul. | Padrão na indústria de design; compacto. |
| RGB | rgb(R, G, B) | Intensidade de Vermelho, Verde e Azul de 0 a 255. | Mais intuitivo que HEX para alguns; usado em RGBA. |
| RGBA / HSLA | rgba(..., A) | Adiciona o canal Alpha (A), controlando a transparência (0.0 = totalmente transparente a 1.0 = totalmente opaco). | Criar fundos ou overlays semi-transparentes. |
| HSL | hsl(H, S, L) | Matiz (Hue: 0-360°), Saturação (Saturation: 0-100%), Luminosidade (Lightness: 0-100%). | Ideal para manipulação de cores, pois permite alterar brilho ou saturação facilmente. |
💡 HSL: O Formato Favorito dos Desenvolvedores
O HSL é especialmente útil para criar paletas de cores. Ao manter o Matiz (Hue) constante e apenas ajustar a Luminosidade (L) e a Saturação (S), é possível gerar tons mais claros ou mais escuros da mesma cor base (variações para :hover, :active, etc.).
2. Cores e Transparência: Alpha vs. opacity
É vital distinguir duas maneiras de criar transparência no CSS:
- Canal Alpha (
rgba,hsla): Torna apenas a cor ou o fundo transparente. O conteúdo (texto, imagens) dentro do elemento não é afetado. - Propriedade
opacity: Torna o elemento inteiro (cor, fundo e todo o seu conteúdo) transparente.
CSS
/* Apenas o background será 50% transparente. O texto permanece 100% opaco. */
.fundo-transparente {
background-color: rgba(0, 0, 0, 0.5);
}
/* O elemento INTEIRO (fundo e texto) será 50% transparente. */
.elemento-opaco {
opacity: 0.5;
}
3. Gerenciamento de Cores com Variáveis CSS
Para garantir consistência e facilitar a manutenção, a melhor prática é definir suas cores em Variáveis CSS Customizadas.
- As variáveis são definidas no seletor
:root(o elemento<html>) para estarem disponíveis globalmente. - Elas tornam o código mais legível e permitem a fácil criação de temas (dark mode, light mode).
CSS
/* Definição das variáveis globais */
:root {
--cor-principal: hsl(200, 70%, 50%); /* Azul (fácil de escurecer ou clarear) */
--cor-fundo-claro: #f5f5f5;
}
/* Uso das variáveis */
body {
background-color: var(--cor-fundo-claro);
}
.botao-primario {
background-color: var(--cor-principal);
/* Para o :hover, você pode usar a cor e escurecê-la */
border-color: darken(var(--cor-principal), 10%);
}
4. Acessibilidade: O Contraste é Obrigatório
A escolha das cores deve sempre priorizar a acessibilidade. Cores com baixo contraste tornam o conteúdo ilegível, especialmente para usuários com daltonismo ou deficiências visuais.
- Regra WCAG: O padrão Web Content Accessibility Guidelines (WCAG) exige uma taxa de contraste mínima de 4.5:1 entre o texto e seu fundo.
- Ferramentas: Use ferramentas online como o WebAIM Contrast Checker para testar suas combinações de cores (frente e fundo).
✅ Conclusão Cores no CSS
Dominar a representação de cores no CSS é essencial para a qualidade visual de um projeto. Adote os formatos Hexadecimal e HSL para precisão e manipulação, utilize Variáveis CSS para organização e, acima de tudo, sempre teste o contraste para garantir que suas páginas sejam bonitas e acessíveis a todos.
Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
