Um sistema de coordenadas para a cor: eixos, faixas e uma regra que liga os números à luz mensurável. O mesmo laranja é rgb(255 128 0), oklch(0.732 0.186 53) e, em XYZ, [49, 36.7, 4.5]. Uma paleta é um punhado de cores escolhidas; um espaço é uma maneira de anotar qualquer cor.

Um modelo de cor define os componentes usados para descrever uma cor: três primárias no RGB, matiz, saturação e claridade no HSL, quatro tintas no CMYK. Um espaço de cor especifica as primárias, o ponto branco e a curva de codificação, para que cada conjunto de valores corresponda a uma cor mensurável. Por isso, rgb(255 0 0) representa vermelhos diferentes em sRGB, Display P3 e Adobe RGB: um modelo, três espaços.

No uso comum, ambos são chamados de espaços, inclusive no color-mix(in hsl, …) do CSS e neste catálogo. Um modelo pode usar um espaço já definido como referência: aqui, HSL e HSV são baseados no sRGB, como no CSS.

Depende da tarefa:

• armazenar e compartilhar imagens – sRGB, o padrão da web;
• criar paletas e gradientes – OKLCH, em que passos iguais parecem iguais;
• matemática com luz (mesclagem, desfoque, 3D) – RGB em luz linear;
• gravar vídeo e fazer a correção de cor – o espaço log da sua câmera, entregue em Rec. 709 ou Rec. 2100;
• medir quão diferentes duas cores parecem – CIELAB ou DIN99o.

Para ver todos os espaços organizados por tarefa, agrupe o catálogo por finalidade.

OKLCH. Ele mantém os mesmos três controles – matiz, croma, claridade –, mas sua claridade é confiável: no HSL, o amarelo em L=50 emite cerca de 13 vezes a luz do azul em L=50, então L igual não significa brilho igual. No OKLCH, significa. O CSS suporta oklch() nativamente.

Digite ou cole o valor no campo de cor no topo, por exemplo #ff8000. Todos os espaços da página mostram essa cor ao mesmo tempo; em OKLCH os valores são 0.732, 0.186, 53, que o CSS escreve como oklch(0.732 0.186 53). A aba css de cada dossiê traz a forma pronta para copiar, e no código é space.rgb.oklch(255, 128, 0).

Porque são calculados em sRGB codificado com gama, onde tirar a média dos números de duas cores produz uma luz mais escura e mais apagada do que misturar de fato a sua luz produziria. Interpolar no OKLab evita isso; em CSS, fica linear-gradient(in oklab, red, blue). A linha interpolar de cada dossiê desenha a mesma mistura através de dois espaços lado a lado, para que você veja a diferença antes de escolher.

Abra o espaço log da sua câmera, como S-Log3, LogC4 ou Apple Log. No bloco LUT de conversão dele, escolha Rec. 709 e o seu editor: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg e outros. O seu navegador gera o arquivo .cube. É uma conversão técnica, sem mapeamento de tons: as altas luzes acima do branco difuso são cortadas, e o look fica por sua conta.

Uma cor que um espaço consegue descrever, mas outro – ou a sua tela – não consegue mostrar. Um verde vívido do Display P3 não existe no sRGB: converta-o, e os números caem fora da faixa válida. O atlas deixa isso à vista: a etiqueta ao lado da cor atual indica o gamut padrão mais estreito que a contém, e os trechos fora da faixa aparecem esmaecidos sobre um quadriculado.

Uma tela emite luz; o papel reflete o que suas tintas não absorvem. Tinta no papel alcança menos cores vivas – azuis, verdes e vermelhos RGB saturados ficam fora do seu gamut – e por isso saem mais apagados. A pré-impressão converte por um perfil ICC feito para a impressora e o papel, como o FOGRA39 para papel couché europeu ou o GRACoL nos EUA. O CMYK deste catálogo é a fórmula simples que o CSS usa para device-cmyk() sem perfil: certa para os números, não uma prova da impressão.

Para a web e para compartilhar, sRGB: navegadores e celulares o adotam por padrão quando o arquivo não traz perfil. O Display P3 preserva mais de uma cena vívida nas telas da Apple e de muitos aparelhos Android, desde que o perfil continue incorporado. Envie em Adobe RGB quando um laboratório de impressão pedir. Reserve o ProPhoto RGB para edição em 16 bits: o gamut dele é tão amplo que arquivos de 8 bits ficam com faixas visíveis.

As conversões são fórmulas fechadas, não aproximações por tabela, e as idas e voltas retornam dentro do ruído de ponto flutuante. As poucas exceções estão documentadas onde ocorrem: o OSA-UCS não tem inversa fechada, sistemas de atlas como o Munsell interpolam entre graus publicados, e a saída rgb é limitada ao gamut sRGB – passe pelo XYZ ou pelo RGB linear quando precisar de valores fora dele.

E são verificadas: cada espaço aponta o artigo ou a especificação que implementa, os valores são testados contra colorjs.io onde os dois se sobrepõem, e os logs de câmera contra as transformações ACES oficiais da Academia. formula-verification.md registra o que foi conferido contra o quê – inclusive alguns pontos em que os próprios artigos publicados tinham erros.

Se os números diferem dos de outra biblioteca, compare as faixas: esta mantém as faixas convencionais de cada espaço – RGB 0–255, claridade Lab 0–100, matiz 0–360 – enquanto muitas achatam tudo para 0–1. Cada cartão mostra suas faixas; no código elas são space.oklch.range.

Nativamente rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), além de color() para Display P3, Adobe RGB, ProPhoto, sRGB linear e XYZ (D65 e D50). O rec2020 do CSS é uma curva gama 2.4 pura, não a curva BT.2020 do Rec. 2020 deste catálogo – os mesmos números nomeariam uma cor diferente. A aba css de cada dossiê escreve a cor atual em forma copiável; os espaços que o CSS não tem são oferecidos como perfis ICC ou LUTs.

Abra Exibição e escolha uma opção em Visão: cegueira ao vermelho (protanopia), cegueira ao verde (deuteranopia) ou cegueira ao azul (tritanopia). O catálogo é redesenhado como esse olho o vê, para você conferir se as cores de uma paleta continuam distinguíveis. Cerca de 1 em cada 12 homens tem deficiência na visão de cores, segundo a contagem do NEI.

São produtos licenciados: suas cores são definidas por dados que os proprietários vendem, não por fórmulas publicadas – então não há matemática aberta para implementar, e redistribuir suas tabelas não seria legal. Parentes próximos cuja matemática é pública estão aqui: Munsell (sua renotação de 1943 é de registro público) e RAL Design (definido diretamente em CIELAB). Todo sistema cuja matemática tenha sido publicada algum dia tem lugar aqui; sugira um que esteja faltando.