Cor, unidade e variável: a paleta do portfólio · CSS do zero

Escrever cor

h1 {
  color: springgreen; /* nome */
  color: #6ee7a5; /* hexadecimal */
  color: rgb(110 231 165); /* vermelho, verde, azul */
  color: rgb(110 231 165 / 50%); /* com transparência */
  color: hsl(146 68% 67%); /* matiz, saturação, luminosidade */
}

O hexadecimal é o mais comum: #RRGGBB, dois dígitos por canal, de 00 a ff. Quando os pares se repetem dá para abreviar: #ffffff vira #fff.

A paleta de um portfólio

Um portfólio precisa de poucas cores, e uma só de realce. A conta é simples: realce funciona por escassez. Se o verde está no nome, no botão, na borda do cartão, no ícone e no título de cada seção, ele parou de destacar qualquer coisa.

Cinco papéis bastam:

Papel	Onde aparece
fundo	o corpo da página
superfície	cartões e blocos que se levantam do fundo
tinta	o texto principal
suave	texto secundário: legenda, ficha, rodapé
realce	uma coisa por tela: o nome, o botão, o estado

Mais uma, que não é cor de texto: a borda, quase sempre branco com pouca opacidade, que separa sem pesar.

Contraste não é gosto

Texto cinza-claro sobre branco fica elegante na tela do escritório e some na tela do celular na luz do sol. Num portfólio de fundo escuro - o formato mais comum - o risco é o mesmo, invertido: cinza-escuro sobre quase-preto.

A recomendação internacional (WCAG) pede contraste de 4,5:1 para texto normal e 3:1 para texto grande.

/* Contraste ruim sobre fundo escuro: 3,1:1 - reprova em texto normal */
p {
  color: #5b6270;
  background: #0e1116;
}

/* Contraste bom: 8:1 */
p {
  color: #a1a9b8;
  background: #0e1116;
}

Dá para conferir de graça no WebAIM Contrast Checker.

Unidades

Unidade	O que é	Use para
`px`	pixel, fixo	borda, sombra
`rem`	múltiplo da fonte-raiz (16px por padrão)	fonte, espaçamento
`em`	múltiplo da fonte do próprio elemento	espaçamento interno de botão
`%`	porcentagem do elemento pai	largura
`vw/vh`	porcentagem da largura/altura da tela	seção de tela cheia
`ch`	largura do caractere "0" da fonte	largura máxima de texto

Por que rem importa: quem tem dificuldade de enxergar aumenta o tamanho da fonte nas configurações do navegador. Um texto em rem cresce junto; um texto em px ignora a escolha da pessoa e continua pequeno.

body {
  font-size: 1rem; /* 16px por padrão, e cresce se a pessoa pedir */
}

h1 {
  font-size: 2rem; /* o dobro, sempre */
}

.cartao {
  border: 1px solid var(--borda); /* px aqui está certo: borda não cresce */
}

Variáveis

O mesmo verde aparece no nome, no botão, na borda do cartão em foco e no estado "no ar" de um projeto. Escrito quatro vezes, mudar de tom vira uma caça:

:root {
  color-scheme: dark;

  /* superfície */
  --fundo: #0e1116;
  --superficie: #161b22;
  --superficie-alta: #1d232c;

  /* texto */
  --tinta: #fbfbfb;
  --suave: #a1a9b8;

  /* realce - um só */
  --realce: #6ee7a5;
  --realce-tinta: #10161d;

  /* separação */
  --borda: rgb(255 255 255 / 0.08);
  --borda-forte: rgb(255 255 255 / 0.16);

  /* espaço - uma escala, não números soltos */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 1rem;
  --espaco-4: 1.5rem;
  --espaco-5: 2.5rem;
  --espaco-6: 4rem;

  /* forma */
  --raio: 12px;
  --raio-grande: 24px;

  /* medida de leitura */
  --medida: 65ch;
}

E o uso:

body {
  background: var(--fundo);
  color: var(--tinta);
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--espaco-4);
}

.selo {
  color: var(--realce);
}

figcaption {
  color: var(--suave);
}

:root é o elemento raiz do documento. O que se declara ali vale para a página inteira - e, no seu caso, para as seis.

`color-scheme`, que quase ninguém escreve

:root {
  color-scheme: dark;
}

Uma linha, e ela conta ao navegador que a página é escura. Com ela, a barra de rolagem, os campos de formulário e os menus nativos vêm escuros também. Sem ela, um portfólio de fundo escuro tem uma barra de rolagem branca no canto e campos de contato brancos no meio da página - e ninguém entende de onde vieram.

A escala de espaço faz mais do que parece

Duas vantagens práticas, e a segunda é a maior:

Trocar o respiro do site vira uma linha.
A escala impede a decisão caso a caso. Sem --espaco-*, aparecem padding: 18px num cartão e 20px noutro, e a página perde ritmo sem ninguém saber por quê.

Seis valores bastam para um portfólio inteiro. Se você precisou de um sétimo, quase sempre é porque a estrutura ali está errada, não a escala.

Valor de reserva

color: var(--realce, #6ee7a5);

Se a variável não existir, usa o segundo valor. Útil enquanto o conjunto de variáveis ainda está sendo montado.

O tema claro, adiantado

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --fundo: #fcfcfd;
    --superficie: #f6f7f9;
    --superficie-alta: #ffffff;

    --tinta: #191c21;
    --suave: #5c6470;

    --realce: #10783f;
    --realce-tinta: #ffffff;

    --borda: rgb(20 24 30 / 0.1);
    --borda-forte: rgb(20 24 30 / 0.18);
  }
}

Se todo o resto do CSS usa as variáveis, o site inteiro vira no claro com essas doze linhas - respeitando a preferência que a pessoa já configurou no aparelho.

Repare que o realce muda de tom: #6ee7a5 tem 12,3:1 sobre o fundo escuro e apenas 1,5:1 sobre o claro. O mesmo verde não serve nos dois. A aula 13 volta a isso com a conta na mão.

No portfólio

Hoje a folha ganha a espinha:

o bloco :root completo, com superfície, texto, realce, borda, escala de espaço, raio e medida;
color-scheme: dark;
as regras de base do body reescritas com var();
nenhuma cor escrita fora do :root - procure e troque as quatro que a aula 1 deixou soltas;
o bloco @media (prefers-color-scheme: light).

Depois troque --realce por outra cor qualquer e recarregue. Se alguma coisa verde continuar verde, ela ficou escrita à mão em algum lugar.

Exercícios

Escreva o bloco :root do seu portfólio com as onze variáveis de cor e forma, mais a escala de seis espaços.
Reescreva todas as regras que você já tem usando var().
Confira no WebAIM o contraste do seu texto suave sobre o fundo. Está acima de 4,5:1?
Troque --realce por vermelho e recarregue. Sobrou algum verde na página? Onde?
Troque os tamanhos de fonte de px para rem, aumente a fonte padrão do navegador para 24px e veja a diferença.
Adicione o bloco de tema claro e alterne a preferência do sistema. Alguma parte da página ficou ilegível?

Referências

Valores e unidades - MDN - cores, tamanhos e o que cada unidade significa
Variáveis CSS - MDN - declaração, uso e valor de reserva
Contrast Checker - WebAIM - conferir contraste antes de publicar