Seletor de Cores

Os formatos, e quando cada um é o certo

Hex e rgb() são a mesma coisa escrita de formas diferentes: três valores de canal do jeito que a tela vai acioná-los. São exatos e entendidos em todo lugar, e não dizem nada sobre como uma cor vai parecer ao lado de outra.

hsl() reorganiza a mesma informação em matiz, saturação e luminosidade, o que facilita o raciocínio - gire o matiz, mantenha o resto - e é por isso que virou o jeito padrão de montar paletas em CSS. hsv() é o irmão usado pelos seletores de cor da maioria dos programas gráficos.

oklch() é o que vale aprender, se você ainda não conhece. cmyk() está aqui como referência e deve ser tratado como aproximado, porque uma conversão real depende da tinta, do papel e do perfil de saída; o valor mostrado usa a fórmula aritmética padrão, útil para ter uma ideia geral, não para mandar para a gráfica.

Por que o OKLCH é diferente

A luminosidade do HSL é uma média geométrica dos canais, não uma medida de quão clara uma cor parece. Amarelo puro e azul puro ficam ambos em 50% de luminosidade no HSL, e um deles parece quase branco aos olhos enquanto o outro parece quase preto. Por isso toda paleta montada mantendo a luminosidade HSL constante sai irregular, e acaba corrigida à mão, cor por cor, até parecer certa.

O OKLCH é construído sobre o espaço perceptual Oklab, em que passos numéricos iguais correspondem a diferenças percebidas mais ou menos iguais. Mantenha a luminosidade constante entre matizes e as cores de fato parecem igualmente claras; avance em passos iguais e você obtém uma escala uniforme. É isso que o torna útil para gerar variações mais claras e mais escuras, montar pares acessíveis e interpolar entre duas cores sem o cinza lamacento que aparece no meio de uma mistura em RGB.

Uma ressalva: o OKLCH consegue descrever cores fora da gama sRGB, e essas cores são cortadas quando exibidas numa tela comum. Isso aparece com croma alto em luminosidades extremas, e o efeito é que dois valores OKLCH diferentes aparecem idênticos.

Lendo as razões de contraste

O contraste é calculado com a fórmula do WCAG 2: luminância relativa de cada cor com os canais sRGB linearizados, depois a mais clara mais 0,05 dividida pela mais escura mais 0,05. O resultado vai de 1:1 para duas cores idênticas até 21:1 para preto sobre branco.

Os limites são 4,5:1 para texto comum no nível AA; 3:1 para texto grande - cerca de 24px, ou 19px em negrito - e para componentes de interface e gráficos com significado; e 7:1 para AAA. As razões contra branco e contra preto aparecem juntas porque a que você precisa depende de onde a cor está aplicada, e uma cor que falha sobre branco muitas vezes passa com folga sobre preto.

A fórmula tem fraquezas conhecidas, e vale não tratar o número como a resposta completa. Ela superestima sistematicamente o contraste de texto claro sobre fundo escuro, e é por isso que alguns temas escuros que passam no papel são cansativos de ler; e não leva em conta o peso ou o tamanho da fonte além do limite único de texto grande, então pesos finíssimos que passam ainda podem ser difíceis. Uma métrica sucessora, a APCA, trata das duas questões, mas ainda não é o que as diretrizes exigem. Atinja a razão e depois olhe com os próprios olhos.

Alfa e o hex de oito dígitos

O hex pode levar alfa como quarto canal: #RRGGBBAA na forma completa ou #RGBA na abreviada. Os dois são suportados por todos os navegadores atuais e aceitos aqui.

Duas coisas dão errado com eles. A primeira é a ordem dos canais - algumas plataformas, entre elas o Android, escrevem o alfa primeiro, como #AARRGGBB, então um valor copiado de uma dessas ferramentas e colado no CSS gera uma cor errada com toda a convicção, em vez de um erro. A segunda é que o alfa é hexadecimal, então 50% de opacidade é 80, e não 50; a sintaxe moderna rgb(0 0 0 / 50%) evita a conta por completo e é mais fácil de ler seis meses depois.

O que um valor de cor realmente descreve

Um trio hexadecimal não é uma cor, é uma instrução para a tela. #CC0000 diz para acionar o canal vermelho a 80% do máximo e os outros em zero, e o que a pessoa vê depende do painel, da calibração dele, da luz ambiente e do espaço de cor em que o número é interpretado.

Esse espaço é sRGB, a menos que algo diga o contrário. Ele foi padronizado em 1996 para descrever os monitores CRT da época, e ficou porque a web precisava de uma suposição que todos pudessem compartilhar. Telas atuais de celular e notebook cobrem uma faixa mais ampla que sRGB, e é por isso que uma imagem marcada como Display P3 parece mais saturada do que os mesmos números interpretados como sRGB.

Há mais uma sutileza escondida nos números: sRGB não é linear. O valor 128 não tem metade do brilho de 255, porque a codificação tem uma curva de gama que dá mais precisão aos tons escuros, onde a visão humana é mais sensível. É por isso que fazer a média de dois valores hexadecimais canal a canal dá um resultado mais sujo do que misturar as mesmas cores num espaço linear, e por que as fórmulas de contraste linearizam os canais antes de qualquer conta.

Construindo uma paleta utilizável a partir de uma cor

A maioria das paletas de interface é um punhado de matizes, cada um expresso em vários passos de luminosidade: um fundo, uma superfície discreta, uma borda, uma cor de texto suave, uma cor de marca sólida e um ou dois tons mais escuros para os estados de hover e ativo. Nove a onze passos por matiz é uma escolha comum porque cobre tema claro e escuro a partir de uma definição.

O método que funciona é fixar a luminosidade perceptual de cada passo em todos os matizes e deixar o croma variar. O passo 500 do azul, do verde e do vermelho deve parecer igualmente pesado na página; se um salta aos olhos, a escala vai parecer desequilibrada em todo lugar em que for usada. Fazer isso em OKLCH significa que os números fazem o trabalho; fazer em HSL significa corrigir cada cor a olho.

O croma normalmente precisa diminuir nos extremos. Cores muito claras e muito escuras não sustentam muita saturação dentro da gama sRGB, então uma escala que mantém o croma constante vai ser cortada nas duas pontas e dois passos vizinhos vão aparecer idênticos.

A cor não é o único canal

Cerca de um em cada doze homens e uma em cada duzentas mulheres têm alguma forma de deficiência na visão de cores, mais comumente uma dificuldade em distinguir vermelho de verde. Um sistema de status construído só com vermelho e verde é invisível para essas pessoas, e o mesmo vale para um gráfico cujas séries diferem apenas pelo matiz.

A solução é redundância, não evitar cor: combine a cor com uma forma, um ícone, um rótulo ou uma posição. Uma mensagem de erro vermelha com um ícone de exclamação e a palavra Erro funciona para todo mundo; só o vermelho funciona para a maioria. Em gráficos, rótulos diretos batem legendas, e variar luminosidade além do matiz mantém uma série distinguível quando a página é impressa em preto e branco.

As razões de contraste também entram aqui, e conferi-las é barato. Texto a 4,5:1 e elementos de interface a 3:1 são os limites que a maioria das regras de compra de software e auditorias de acessibilidade usa.

Tema escuro não é uma inversão

Inverter todas as cores produz um tema escuro que parece errado, por motivos majoritariamente perceptuais. Texto claro sobre fundo escuro parece espalhar e pesar mais, então o mesmo peso de fonte parece mais grosso; cores saturadas vibram contra superfícies escuras; e preto puro com texto branco puro cria um efeito de halo que cansa na leitura de texto corrido.

Os ajustes usuais são usar um cinza bem escuro em vez de preto, reduzir a saturação das cores de destaque, apoiar-se em superfícies mais claras em vez de sombras para indicar elevação, já que sombra é invisível sobre preto, e reduzir um pouco o peso da fonte em vez de repetir exatamente o do tema claro.

Os dois temas precisam ser verificados separadamente. Uma cor que passa no contraste sobre branco frequentemente falha sobre uma superfície escura, e vice-versa, e é por isso que as razões aqui aparecem contra os dois ao mesmo tempo.

Cor no CSS e como organizá-la

O CSS moderno aceita todos esses formatos diretamente, incluindo oklch() e a sintaxe separada por espaços com barra para o alfa: rgb(0 0 0 / 50%). Vale adotar essa sintaxe porque ela se lê sem ambiguidade e porque o alfa é uma porcentagem, não um par hexadecimal que ninguém converte de cabeça.

A forma duradoura de organizar cor são duas camadas de custom properties. A primeira nomeia a paleta literalmente - --blue-500, --grey-900 - e a segunda nomeia o papel: --color-text, --color-surface, --color-border, --color-accent. Componentes referenciam apenas papéis, o que faz do tema escuro uma redefinição da camada de papéis, e não uma edição em cada componente.

Dois recursos mais novos mudam o que é possível. color-mix() combina duas cores numa proporção declarada e num espaço declarado, então um estado de hover pode ser derivado da cor base em vez de escolhido à mão. E a sintaxe de cor relativa permite construir uma variante a partir de um valor existente ajustando um canal, o que mantém a escala em sincronia com a cor de origem. Os dois têm suporte nos navegadores atuais, e os dois são bem mais fáceis de raciocinar em OKLCH do que em HSL.