Cor

A paleta do Laboratório Belavista começa no vermelho do cartaz e no quase-preto do texto. Cor no CSS é contraste, marca e leitura — não só “ficar bonito”.

O exemplo deste capítulo é 27-cor, no pacote que acompanha o volume. Troque uma cor nomeada por oklch ou hex, preveja o contraste do texto, recarregue e confira.

O que você vai aprender

• Usar nomes, hex, rgb, hsl e cores modernas (oklch).
• Aplicar cor em texto, fundo e borda.
• Conhecer color-mix() e a ideia de cor relativa.
• Respeitar contraste para leitura.
• Preferir tokens em variáveis (prévia do capítulo 33).

Formas de escrever cor

.titulo {
  color: crimson;           /* nome */
  background: #1a1a1a;      /* hex */
  border-color: rgb(139 30 30);
  outline-color: hsl(0 70% 30%);
  accent-color: oklch(45% 0.12 25);
}

Cores de sistema (CanvasText, LinkText, etc.) acompanham o tema do SO. Úteis para respeito a preferências, com teste visual.

Onde a cor entra

color pinta texto (e herda). background-color pinta o fundo da caixa. Bordas usam border-color. Links visitados, foco e seleção também aceitam cor — com cuidado de contraste.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cor — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1 class="marca">Belavista</h1>
      <p class="chip">Oficina aberta</p>
    </main>
  </body>
</html>

body {
  color: #1a1a1a;
  background: #f7f4ef;
}

.marca {
  color: #8b1e1e;
}

.chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  color: #fff;
  background: color-mix(in oklab, #8b1e1e 80%, black);
}

Mistura e contraste

color-mix() mistura duas cores num espaço. Cor relativa (sintaxe moderna) deriva tons a partir de uma base. Se o gamut estourar, o navegador mapeia — teste no dispositivo real.

Texto claro em fundo claro some. Cheque contraste (ferramentas do navegador ou extensão). Marca vermelha em bege do papel costuma funcionar; cinza médio em bege, nem sempre.

Erro comum: definir só color sem background (ou o inverso) e herdar um fundo inesperado do pai. Defina o par quando o bloco for um “cartaz”.

Critério para avançar

Você avança se: reescreve a mesma cor em hex e rgb; usa color-mix num chip; confere se o texto do exemplo continua legível.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Cite três propriedades que aceitam valor de cor.
2. Por que color no body afeta o p?
3. O que color-mix(in oklab, #8b1e1e 80%, black) faz, em uma frase?

Respostas comentadas

1. Exemplos: color, background-color, border-color, outline-color, accent-color, fill/stroke em SVG.
2. Porque color é herdável: filhos pegam a cor do pai se não tiverem a própria.
3. Mistura 80% do vermelho Belavista com preto no espaço oklab, gerando um tom mais escuro.