⚡ Curso de CSS • Web-ZoneWare

Cores no CSS: Guia de HEX, RGB, HSL e OKLCH | Web Academy

Lição 8 de 50

Cores no CSS: Guia de HEX, RGB, HSL e OKLCH | Web Academy

A cor é a fundação da identidade visual e da hierarquia funcional de qualquer interface digital. No desenvolvimento web moderno, definir uma cor vai muito além de escolher um código visual atraente: envolve entender os modelos de cores aditivas, gerenciar canais de transparência alfa, garantir a conformidade com as diretrizes internacionais de acessibilidade (WCAG) e arquitetar paletas escaláveis para modos claro e escuro. Nesta aula, dissecaremos todas as formas de declarar cores no CSS — desde o clássico Hexadecimal até o revolucionário espaço perceptual oklch().

1. O Quadro Comparativo dos Formatos de Cor na Web

O CSS oferece diferentes métodos para representar cores. Cada formato possui uma finalidade técnica onde se destaca com maior clareza e controle:

Formato Sintaxe Clássica Sintaxe Moderna (CSS Color 4) Suporte a Alfa? Melhor Cenário de Uso
Nomes (Keywords) coral, crimson rebeccapurple Não (exceto transparent) Prototipagem rápida e testes estruturais.
Hexadecimal (HEX) #0284c7 #0284c780 (com alfa) Sim (2 dígitos finais) Cópia direta do Figma e bibliotecas de branding.
RGB / RGBA rgba(2, 132, 199, 0.5) rgb(2 132 199 / 50%) Sim Cálculo matemático de telas de luz emitida.
HSL / HSLA hsla(200, 98%, 39%, 0.5) hsl(200 98% 39% / 50%) Sim Design Systems e geração de tons claros/escuros.
OKLCH (Moderno) — oklch(0.6 0.25 210) Sim Uniformidade perceptual e telas Wide Gamut (P3).

2. Palavras-Chave de Cor e o Superpoder do currentColor

O W3C padroniza 148 palavras-chave de cores nomeadas (como black, white, royalblue). No entanto, duas palavras-chave dinâmicas merecem atenção especial na engenharia front-end:

  • transparent: Representa uma cor totalmente invisível (equivalente a rgba(0, 0, 0, 0)). Muito usada para inicializar bordas invisíveis que ganham cor no :hover sem deslocar o layout.
  • currentColor: Herda dinamicamente o valor da propriedade color do próprio elemento. Se o texto do elemento mudar de azul para vermelho no hover, qualquer borda ou ícone SVG que utilize currentColor mudará instantaneamente de cor junto, sem nenhuma linha extra de CSS!
CSS
current-color.css
CSS3 15 linhas 
.btn-outline {
    color: #0284c7;
    /* A borda e o ícone SVG herdam automaticamente a cor do texto */
    border: 2px solid currentColor;
    background-color: transparent;
    transition: color 0.2s ease;
}
 
.btn-outline:hover {
    color: #0369a1; /* Ao mudar a cor aqui, a borda também muda automaticamente! */
}
 
.btn-outline svg {
    fill: currentColor; /* O SVG fica sincronizado com a cor da tipografia */
}

A notação hexadecimal codifica as intensidades de Vermelho (Red), Verde (Green) e Azul (Blue) na base numérica 16, variando de 0 (zero absoluto) até F (intensidade máxima de 15, correspondente a 255 em decimal).

CSS
hex-variants.css
CSS3 16 linhas 
/* 1. Hexadecimal Completo de 6 dígitos (#RRGGBB) */
.box-primaria {
    background-color: #0284c7;
}
 
/* 2. Hexadecimal Compacto de 3 dígitos (#RGB) */
/* Quando os pares se repetem (#ffffff vira #fff; #0099cc vira #09c) */
.box-branca {
    background-color: #fff;
}
 
/* 3. Hexadecimal com Canal Alfa de Transparência (#RRGGBBAA) */
/* Os últimos 2 dígitos representam o canal alfa de 00 (0%) a FF (100%) */
.box-com-transparencia {
    background-color: #0284c780; /* 80 em hex = 128 em decimal (~50% de opacidade) */
}

4. Notação RGB: O Modelo de Cores Aditivas

O modelo RGB opera diretamente na lógica física das telas de computador e smartphones, que emitem feixes de luz nas cores primárias aditivas. Cada canal varia de 0 a 255 (ou de 0% a 100%).

A Nova Sintaxe do CSS Color Module Level 4

Na especificação moderna do CSS, as vírgulas foram substituídas por espaços em branco, e o canal alfa agora é delimitado por uma barra inclinada (/). Além disso, a função rgba() tornou-se um alias legado: a própria função rgb() aceita transparência nativamente:

CSS
modern-rgb.css
CSS3 9 linhas 
/* Sintaxe Clássica (Legada, mas suportada por compatibilidade) */
.card-antigo {
    background-color: rgba(2, 132, 199, 0.75);
}
 
/* Sintaxe Moderna do CSS4 (Mais limpa e recomendada) */
.card-moderno {
    background-color: rgb(2 132 199 / 75%); /* Espaços e barra com porcentagem! */
}

5. Notação HSL: O Formato Mais Intuitivo da Engenharia UI

Enquanto o Hexadecimal e o RGB são práticos para computadores, eles são incompreensíveis para o raciocínio humano. Se você olhar para #2a7561, é quase impossível deduzir de cabeça qual é a cor exata ou como clareá-la em 20%.

O modelo HSL resolve esse problema modelando as cores de acordo com a percepção humana:

Componente Escala de Valores Significado Visual
H (Hue / Matiz) 0deg a 360deg O ângulo na roda de cores: 0° Vermelho, 60° Amarelo, 120° Verde, 180° Ciano, 240° Azul, 300° Magenta.
S (Saturation / Saturação) 0% a 100% Intensidade da cor: 0% é tom de cinza neutro e 100% é a cor com saturação pura e vívida.
L (Lightness / Luminosidade) 0% a 100% Claridade: 0% é preto absoluto, 50% é a cor normal e 100% é branco puro.
CSS
hsl-palette.css
CSS3 9 linhas 
/* Criando uma família de tons no Design System alterando apenas o L (Lightness): */
:root {
    --brand-h: 200; /* Azul */
    --brand-s: 98%;
 
    --brand-light:   hsl(var(--brand-h) var(--brand-s) 90%); /* Azul bem clarinho */
    --brand-regular: hsl(var(--brand-h) var(--brand-s) 50%); /* Azul padrão */
    --brand-dark:    hsl(var(--brand-h) var(--brand-s) 20%); /* Azul marinho escuro */
}

6. O Futuro das Cores: OKLCH e a Função color-mix()

Embora o HSL seja excelente, ele possui uma falha científica conhecida como distorção de luminosidade não-perceptual: para os olhos humanos, o amarelo parece muito mais claro que o azul, mesmo quando ambos estão com 50% de Lightness no HSL.

Para solucionar isso, o CSS moderno introduziu o espaço OKLCH (Lightness, Chroma, Hue). O OKLCH é perceptualmente uniforme: 60% de luminosidade no OKLCH produz exatamente o mesmo brilho visual em qualquer tom, além de destravar a gama de cores Display P3 (com 25% mais cores que o antigo sRGB de monitores antigos).

CSS
oklch-colormix.css
CSS3 10 linhas 
/* Sintaxe OKLCH: Luminosidade (0 a 1), Croma (0 a 0.4), Matiz (0 a 360) */
.badge-moderna {
    background-color: oklch(0.65 0.22 142); /* Verde vibrante Display P3 */
}
 
/* Função color-mix(): Mistura duas cores nativamente no navegador sem pré-processador */
.banner-promo {
    /* Cria uma cor resultante de 80% do azul da marca com 20% de preto */
    background-color: color-mix(in srgb, #0284c7 80%, black);
}

7. Acessibilidade de Cores & Diretrizes WCAG 2.1

Uma interface bem projetada deve ser legível por qualquer indivíduo, incluindo pessoas com daltonismo, baixa visão ou usando telas sob luz solar direta. As diretrizes internacionais WCAG 2.1 estabelecem taxas mínimas de contraste matemático entre a cor do texto e o fundo:

Nível de Conformidade Texto Normal (Abaixo de 18pt / 24px) Texto Grande (18pt+ ou 14pt negrito) Componentes Gráficos e Bordas de Input
Nível AA (Obrigatório) No mínimo 4.5 : 1 No mínimo 3.0 : 1 No mínimo 3.0 : 1
Nível AAA (Excelência) No mínimo 7.0 : 1 No mínimo 4.5 : 1 Recomendável

8. Laboratório Prático: Paleta de Design System com Variáveis e Contraste

Neste exemplo prático, construímos um componente de cartão corporativo estruturado com tokens de cores semânticas em HSL, aproveitando canais alfa e o poder do currentColor:

HTML
color-palette-demo.html
HTML5 22 linhas 
<div class="pricing-card">
    <span class="pricing-badge">Plano Enterprise</span>
    <h3 class="pricing-title">R$ 189<span class="pricing-period">/mês</span></h3>
    <p class="pricing-desc">Acesso total à Web Academy com suporte dedicado e certificação.</p>
 
    <ul class="pricing-features">
        <li>
            <svg class="check-icon" viewBox="0 0 20 20">
                <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
            </svg>
            Mais de 150 ferramentas liberadas
        </li>
        <li>
            <svg class="check-icon" viewBox="0 0 20 20">
                <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
            </svg>
            Playground IDE sem limites de execução
        </li>
    </ul>
 
    <button class="btn-action">Assinar Agora</button>
</div>
CSS
color-palette-demo.css
CSS3 112 linhas 
/* ==========================================================================
   DESIGN TOKENS EM HSL COM CONTROLE ALFA
   ========================================================================== */
:root {
    /* Matiz e Saturação Mestres da Marca */
    --h-brand: 200;
    --s-brand: 98%;
 
    /* Tons Derivados */
    --color-surface:    hsl(222 47% 11%);       /* Fundo escuro #0f172a */
    --color-card-bg:    hsl(217 33% 17%);       /* Card #1e293b */
    --color-card-border:hsl(215 25% 27%);       /* Borda sutil */
    
    --color-primary:    hsl(var(--h-brand) var(--s-brand) 39%); /* Azul vivo */
    --color-primary-hover: hsl(var(--h-brand) var(--s-brand) 32%);
    --color-primary-soft: hsl(var(--h-brand) var(--s-brand) 39% / 15%); /* Fundo com 15% alfa */
 
    --color-text-main:  hsl(210 40% 98%);       /* Contraste 13:1 (AAA) */
    --color-text-muted: hsl(215 20% 65%);       /* Contraste 5.5:1 (AA) */
}
 
body {
    background-color: var(--color-surface);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}
 
.pricing-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 2.25rem;
    max-width: 380px;
    width: 100%;
    color: var(--color-text-main);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}
 
.pricing-badge {
    display: inline-block;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
}
 
.pricing-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}
 
.pricing-period {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 400;
}
 
.pricing-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.75rem;
}
 
.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
}
 
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-main);
    margin-bottom: 0.85rem;
}
 
/* O ícone SVG herda o preenchimento via currentColor da cor primária */
.check-icon {
    width: 18px;
    height: 18px;
    color: #22c55e; /* Verde de sucesso */
    fill: currentColor;
    flex-shrink: 0;
}
 
.btn-action {
    width: 100%;
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
 
.btn-action:hover {
    background-color: var(--color-primary-hover);
}
⚡ Abrir no Playground IDE →

9. Boas Práticas da Indústria na Gestão de Cores

  • ✅ Padronize um Formato Central no Projeto: Utilize Hexadecimal para valores estáticos diretos ou HSL/OKLCH com variáveis CSS para temas dinâmicos. Evite misturar aleatoriamente múltiplos formatos no mesmo componente.
  • ✅ Nunca Transmita Informação Apenas pela Cor: Usuários daltônicos ou com baixa visão não distinguirão erros se um campo com falha tiver apenas a borda vermelha. Sempre combine cores com ícones explicativos ou mensagens textuais claras.
  • ✅ Audite o Contraste com as Ferramentas DevTools: O Chrome e o Firefox DevTools exibem a pontuação WCAG diretamente ao clicar no conta-gotas de qualquer propriedade de cor. Verifique sempre se seus textos atingem no mínimo o nível AA (4.5:1).

10. Ferramentas Relacionadas & Próximos Passos

Aprimore seus conhecimentos e valide paletas de cores no ecossistema Web-ZoneWare:

🚀
Próxima Lição: Na Lição 09: Backgrounds e Imagens de Fundo no CSS, aprenderemos a controlar cores de fundo, posicionamento de imagens com background-image e a propriedade background-repeat.

11. Referências Técnicas & Especificações Oficiais

Rolar para cima