Gerador de paleta de cores acessível a partir da sua marca

O jeito mais simples de clarear ou escurecer uma cor é misturá-la com branco ou preto no sRGB ou mudar o L do HSL. As duas abordagens geram escalas irregulares. A luminosidade do HSL não é perceptual: um amarelo a 50 % parece bem mais claro que um azul a 50 %, então o “mesmo” passo tem contraste muito diferente de um tom para outro. Misturar com branco no sRGB desloca o tom: azuis puxam para o roxo e vermelhos, para o rosa.

O OKLCH, forma cilíndrica do espaço OKLab publicado por Björn Ottosson em 2020 e hoje parte do CSS Color Level 4, separa as três coisas que importam no design:

Como L acompanha o quanto a cor parece clara, passos iguais em L geram escalas uniformes em qualquer tom, e o contraste com branco ou preto muda de forma previsível de um passo para outro. Por isso o Tailwind CSS v4 define sua paleta padrão em OKLCH.

Como este gerador monta a escala

1. A cor da marca é convertida para OKLCH e colocada no passo com a luminosidade de referência mais próxima (ou no passo escolhido). O HEX dela é mantido exato.
2. Os passos mais claros são distribuídos de forma uniforme em L entre a cor da marca e L ≈ 97,5 % (passo 50); os mais escuros, entre a cor da marca e L ≈ 25 % (passo 900).
3. O tom não muda. O croma diminui em direção ao lado claro — tons muito claros com croma total parecem neon — e cai no máximo um terço em direção ao escuro.
4. Qualquer cor fora do gamut sRGB volta para dentro dele com redução de croma, mantendo L e H, como recomenda o CSS Color 4.
5. Cada HEX é arredondado para 8 bits por canal, e o contraste é calculado com esse valor arredondado — o mesmo que vai para o código.

Para cada passo, a tabela mostra a razão de contraste WCAG 2.2 com texto branco puro (#fff) e preto puro (#000):

• AA — pelo menos 4,5:1: serve para texto corrido, rótulos e links.
• Grande — entre 3:1 e 4,5:1: só para texto a partir de 24 px (18,66 px em negrito) e elementos não textuais como ícones, bordas e indicadores de foco (WCAG 1.4.11).
• Não — abaixo de 3:1: só decoração, nunca texto.

Como os passos seguem a luminosidade perceptual, o resultado é parecido na maioria dos tons: texto branco passa AA de 600 a 900 e texto preto de 50 a 500. Praticamente nenhuma cor passa com os dois: 4,5:1 contra branco e contra preto ao mesmo tempo só é possível numa faixa muito estreita de luminância relativa (0,175–0,183). Por isso os design systems usam 600 ou 700 para botões principais com texto branco e reservam 400–500 para preenchimentos, gráficos e texto grande.

A coluna APCA mostra o contraste de luminosidade (Lc) do rascunho da WCAG 3 para texto branco e preto. Acima de 75 é confortável para texto corrido, acima de 60 para rótulos de interface e acima de 45 para títulos. O APCA ainda não é padrão: use-o para escolher entre opções que já passam na WCAG 2.2.

Pares dentro da paleta

Interfaces tingidas — avisos informativos, linhas selecionadas, tags, dicas de onboarding — colocam um passo escuro sobre um passo claro do mesmo tom. A lista de pares indica, para cada fundo, quais passos de texto chegam a 4,5:1. Como regra prática, passos separados por cinco posições ou mais (50 com 600, 100 com 700) costumam passar; vizinhos, nunca.

• Nomeie pela função, não pelo valor. Exporte a escala como --brand-50 … --brand-900 e atribua funções por cima: --color-primary: var(--brand-600), --color-primary-text: var(--brand-700), --color-info-bg: var(--brand-50). Se a marca mudar, você altera uma lista só.
• Documente os pares aprovados. Registre qual passo de texto vai em qual fundo, para ninguém colocar texto 400 em fundo 100 na pressa.
• O tema escuro é outro mapeamento. Reaproveite a escala ao contrário — passos claros para texto, escuros para superfícies — e confira os pares de novo: combinações escuras que passam na WCAG 2 ainda podem parecer apagadas, algo que o APCA mostra melhor.
• Estados também precisam de contraste. Hover e pressionado costumam descer um passo; o indicador de foco precisa de 3:1 contra o fundo ao redor.
• Cores semânticas (sucesso, alerta, erro) são geradas do mesmo jeito, cada uma a partir da sua cor base. Amarelo e verde-limão só são reconhecíveis em passos claros, onde texto branco não passa — use texto escuro sobre elas.

Para conferir um par específico, inclusive cores fora da paleta ou camadas semitransparentes, use o verificador de contraste de cores.

1. Ottosson B. A perceptual color space for image processing, 2020 — OKLab e OKLCH, matrizes de conversão.
2. W3C. CSS Color Module Level 4 — notação oklch() e ajuste de gamut por redução de croma.
3. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — critérios 1.4.3, 1.4.6 e 1.4.11, luminância relativa e razão de contraste.
4. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — valores Lc.
5. W3C Design Tokens Community Group. Design Tokens Format Module, rascunho — estrutura $type e $value da exportação de tokens.