Designer de Paletas de Cores

O que Designer de Paletas de Cores faz?

Cores que parecem boas e também passam no contraste vêm de um processo: escolher matizes para o clima, depois ajustar a luminosidade com matemática. Roda de harmonia, 60-30-10 e gráficos de psicologia das cores são heurísticas iniciais sem evidências de usabilidade. Contraste, moderação (um matiz de ação) e um destaque que se destaca do seu entorno são as partes que se sustentam. Projete para elas.

Todos os números vêm de scripts/palette.mjs (Node sem dependências). Execute-o em vez de estimar taxas ou valores OKLCH manualmente; o contraste calculado manualmente é errado com frequência suficiente para importar (a pesquisa da qual este skill se originou tinha vários valores errados entre 0,05 e 0,15).

S=<diretório-do-skill>/scripts/palette.mjs
node $S contrast '#767676' '#ffffff'        # 4.54:1, notas, APCA Lc
node $S oklch '#3F6B4E'                     # OKLCH exato
node $S solve '#C0643F' '#FFFFFF' 4.5 darker   # Ajustar apenas L até passar
node $S ramp 155 0.12                       # Rampa OKLCH 50-950
node $S generate --hue 155 --chroma 0.07 --neutral-hue 95 --accent-offset -110 --format report
node $S generate ... --format css           # também: css-light-dark | json | dtcg
node $S audit sage-wellness                 # ID de paleta selecionada, ou qualquer arquivo roles.json
node $S presets                             # Presets de divisão de área e mix de estados
node $S ratio 70 25 5 --preset calm         # Validar divisão de área (porcentagem da área visível)
node $S states sage-wellness --css          # Misturas resolvidas de hover/active/disabled/tint + verificações
node $S dark midnight-terminal              # Regras de modo escuro D1-D11 (adicione --light <id|arquivo>, --oled)
node $S cvd '#0072B2' '#D55E00' '#009E73'   # Separação de daltonismo

audit, generate, dark, states e ratio saem com código diferente de zero em um par falho ou regra FAIL, então use-os como porta antes de mostrar qualquer coisa ao usuário. Para modo escuro, generate e audit executam as regras escuras automaticamente.

Fluxo de trabalho: do briefing à paleta validada

1. Interpretar o briefing. Cor(es) da marca, palavras de clima, setor, público (idade, visão), modos (claro, escuro ou ambos), conformidade (AA por padrão; AAA para texto do corpo para saúde, governo, públicos mais velhos). Se o usuário deu apenas uma vibe, escolha um matiz da tabela de decisão abaixo e declare a suposição em uma linha em vez de perguntar.
2. Escolher uma estratégia. O padrão é neutro matizado + uma primária (+ opcionalmente um destaque). Monocromático mais cores semânticas é o mais seguro. Use um complementar apenas para fazer o CTA se destacar (efeito de isolamento). Tríades e tétrades pertencem a gráficos e ilustrações, raramente em chrome de UI.
3. Âncora de matiz e croma. Com um hex da marca, execute oklch e mantenha seu matiz. Limite o croma em torno de 0,12 para cores terrosas/bem-estar, 0,20-0,26 para vibrantes/tecnologia. Sem um, escolha um matiz distinto dos concorrentes óbvios na categoria.
4. Gerar. generate constrói funções neutras, primárias, de destaque e semânticas para cada modo e resolve a luminosidade para que as metas de contraste sejam atingidas. Para uma paleta manual, construa rampas com ramp e mapeie os passos para as funções (tabela abaixo).
5. Validar cada par com audit. Em caso de falha, mova apenas a luminosidade (solve), nunca o matiz; reduza o croma se a cor sair do sRGB. Cada falha nas 15 paletas selecionadas foi um destaque de luminosidade média e croma alto (OKLCH L cerca de 0,60-0,77): muito claro para texto branco, muito escuro para texto escuro, muito próximo do branco para 3:1. Correção: escurecer para L <= 0,55 e usar texto branco, clarear para L >= 0,72 e usar texto escuro, ou mantê-lo decorativo com uma borda.
6. Verificação de daltonismo com cvd. Se primário, sucesso e erro colapsam (dE_OK < 0,10 sob qualquer simulação), separe-os por luminosidade e exija um ícone e rótulo, porque apenas o matiz não pode transmitir significado (WCAG 1.4.1).
7. APCA é consultivo. WCAG 3 não adotou um algoritmo de contraste (o rascunho de trabalho de setembro de 2026 diz que ainda está para ser determinado), então WCAG 2.2 decide passar/falhar. Relate APCA Lc como um aviso: texto do corpo abaixo de |Lc| 75 é fino (comum em modo escuro); abaixo de 15 é invisível.
8. Definir estados com states, não manualmente. As porcentagens de hover e active dependem da paleta: porcentagens de preset plano deixaram pelo menos um passo de estado abaixo de dL 0,03 (quase invisível) em 37 de 45 combinações de paleta/preset que medimos, e apenas o passo de hover em 26. node $S states <palette> --preset standard --css resolve a porcentagem de mistura e direção (em direção a qualquer um que seja texto/fundo mantenha a legibilidade no primário), verifica o contraste de cada estado e emite variáveis color-mix(in oklab, ...); generate --format css --states standard as adiciona a cada modo. Desabilitado: misturado em direção ao fundo mais uma dica não cromática. Foco: anel de 2px, deslocamento 2px, >= 3:1 contra fundo. Selecionado e visitado precisam de uma dica não cromática.
9. Escolher as proporções (veja "Regras de porcentagem" abaixo) e declare o preset nas notas de entrega.
10. Emitir a tabela de funções (hex + OKLCH exato), a tabela de passar/falhar, propriedades CSS personalizadas e, opcionalmente, @theme do Tailwind v4 ou JSON DTCG. Rotule a justificativa como convenção ou evidência (veja references/evidence-and-conventions.md) para que o texto gerado nunca repita folclore de psicologia das cores.
11. Mostrar. Ofereça ou construa a página de demonstração (abaixo) para que o usuário julgue a paleta em um layout real, não em uma grade de amostras.

Contrato de funções

Cada paleta define estas funções para cada modo suportado. Componentes consomem funções, nunca hex bruto.

Função	Propósito	Mínimo
bg, surface, surface-2	tela, cartões, painéis elevados	distinguível (OKLCH dL >= ~0,03)
border	divisores decorativos	nenhum
border-strong	contornos de entrada, controles	3:1 em bg (SC 1.4.11)
text	corpo	4,5:1 em bg e superfícies (buscar 7+)
text-muted	texto secundário	4,5:1 em bg e superfícies
primary / on-primary	preenchimento de ação principal / texto sobre ele	preenchimento 3:1 em bg, texto de link 4,5:1; texto sobre preenchimento 4,5:1
accent / on-accent	segundo matiz opcional	mesmo que primário se carregar significado
success warning error info	texto de status e ícones	4,5:1 em bg; nunca apenas cor
focus-ring	foco do teclado	3:1 vs cores adjacentes

Mapeamento de rampa para função (escala 50-950): claro bg 50 ou branco, superfície branco/50, superfície-2 100, borda 200, borda-forte 500, texto 900-950, texto-suave 600, primário 600-700, on-primary branco, foco primary-600. Escuro: bg 950 (ou 900), superfície 900, superfície-2 800, borda 800, borda-forte 600, texto 50-100, texto-suave 400, primário 300-400, on-primary 950, foco primary-300. Trate o mapeamento como um primeiro palpite e deixe audit decidir.

Regras rígidas (WCAG 2.2 AA a menos que AAA seja solicitado)

• Texto 4,5:1; texto grande (>= 24px, ou >= 18,66px negrito) 3:1; componentes de interface e gráficos significativos 3:1 (SC 1.4.11); AAA é 7:1 texto, 4,5:1 grande.
• Bordas decorativas podem ser sutis, mas um contorno de entrada que é a única dica para o campo deve atingir 3:1. Uma borda de entrada "elegante" de 1,3:1 é uma falha.
• Cor nunca carrega significado sozinha. Sublinhar links de corpo ou dar a eles 3:1 contra o texto ao redor mais uma dica de hover/foco; erros têm ícone e mensagem; séries de gráficos têm rótulos ou formas diretos.
• Fundos matizados mudam a matemática. Cores semânticas ajustadas para branco caem para cerca de 4,4:1 em um fundo de papel quente; execute audit no bg real, não no branco.
• Contraste em gradientes e fotos deve se manter no pior ponto (região mais clara e mais escura) ou adicionar um scrim.

Detalhes, fórmulas, conjuntos seguros para daltonismo (Okabe-Ito) e limites APCA: references/accessibility.md.

Trabalhando em OKLCH

• Use oklch(L C H) como a fonte da verdade. L é luminosidade percebida (0-1), então cores com L igual realmente parecem igualmente claras; em HSL um amarelo 50% e um azul 50% são drasticamente diferentes. Girar o matiz em OKLCH mantém a luminosidade, que é por que deslocamentos de harmonia funcionam lá e não em HSL.
• Neutros matizados com o matiz da marca em croma muito baixo: cerca de 0,005-0,015 perto do branco, 0,01-0,045 em escuros. Neutros quentes (matiz 60-100) adequam-se a bem-estar, alimentação, editorial; frios (240-270) adequam-se a SaaS, finanças, ferramentas de desenvolvedor. Evite cinzas puros soltos ao lado de matizados.
• Alvos de rampa: L 0,985, 0,967, 0,928, 0,872, 0,707, 0,554, 0,446, 0,372, 0,279, 0,208, 0,129 para passos 50-950, croma diminuindo em ambas as extremidades. Mapeie o gamut reduzindo o croma, não recortando; navegadores recortam grosseiramente.
• Gradientes: interpole in oklab ou in oklch para evitar pontos médios lamacentos acinzentados; evite gradientes escuros de viewport inteiro com croma próximo de zero (faixas) ou adicione ruído sutil.
• Suporte (final de 2026): oklch() Baseline desde 2023; color-mix() Amplamente Disponível desde novembro de 2025; sintaxe de cor relativa em Chrome 122+, Firefox 128+, Safari 18+; light-dark() atinge Amplamente Disponível em 13 de novembro de 2026. Envie propriedades personalizadas simples com um prefers-color-scheme mais substituição [data-theme] como saída padrão; ofereça light-dark() como alternativa compacta. Na sintaxe de cor relativa, l é 0-1.

Tabela de decisão: briefing para estratégia

Sinal de briefing	Neutro	Primário	Destaque	Modo	Alvo
Bem-estar, orgânico, spa, chá	quente, H 70-100, C 0,008-0,02	sálvia/musgo/verde-azulado, C 0,05-0,10, L ~0,50	análogo ou complementar terroso (terracota, argila)	claro	AA, corpo 7:1 preferido
E-commerce	neutro/quente, C <= 0,01	marca	matiz de CTA isolado usado em nenhum outro lugar	claro	AA
SaaS / B2B	frio, H 250-270, C 0,01-0,04	azul/índigo/violeta	monocromático + semântico	claro + escuro	AA
Ferramenta de desenvolvedor	frio ou cinza puro	azul/violeta/verde, escuro L 0,70-0,80	mono; cores de sintaxe apenas em código	escuro primeiro + claro	AA, verificar APCA
Agência / portfólio	papel off-white ou quase preto	preto/branco	um destaque elétrico, com bordas se falhar 3:1	qualquer	AA
Finanças	azul marinho frio	marinho/azul	ganho/perda com +/- e setas	claro (+ escuro)	AA, AAA para figuras
Saúde	neutro frio	verde-azulado/azul	verde calmo	claro	AAA corpo
Infantil / criador	creme quente	violeta/azul saturado	tríade, cada <= 10% da área	claro	AA

Pontos de partida: references/palettes.md (15 paletas verificadas com CSS, OKLCH e tabelas de passar/falhar). Escolha a mais próxima, adapte matiz e croma, execute novamente audit.

Regras de porcentagem e presets

Divisões de área são um orçamento de área, não uma lei: 60-30-10 é uma convenção de design de interiores sem nenhum estudo de usabilidade por trás dos números exatos, mas uma pequena parcela de destaque protege o único efeito baseado em pesquisa aqui (um CTA se destaca apenas se seu matiz for raro). Parcelas são porcentagem da área de fundo visível (a tinta do texto não é contada). Verifique uma divisão com ratio; meça uma página real com scripts/measure-area.js em vez de adivinhar.

Preset	Divisão n-p-d	Uso para
classic	60-30-10	Marketing de e-commerce e SaaS, padrão geral
calm	70-25-5	Bem-estar, saúde, finanças, editorial
dense-app	80-17-3	Dashboards, administração, ferramentas de desenvolvedor (claro ou escuro)
product-first	80-15-5	Catálogos onde fotos carregam cor; um matiz de CTA isolado
editorial	70-27-3	Brutalista/editorial: bordas e tinta fazem o trabalho
dark-showcase	70-22-8	Portfólio/agência escura com um destaque vívido
bold-brand	50-30-20	Criador, campanha, infantil: destaque pode liderar

Regras: parcelas somam 100 (FAIL); neutro é a maior parcela, >= 45; destaque permanece dentro do intervalo do preset (gradientes saturados e sobreposições de marca contam como destaque); primário detém >= 70% da área de destaque para que um matiz de ação lidere; cores semânticas <= 2% em repouso; temas escuros mantêm neutro >= 70. Presets de estado (subtle 8/14/50, standard 12/20/60, strong 16/26/70 como porcentagens mínimas para hover/active/disabled, tons 8/10/14) são aumentados por paleta por states até que o passo seja visível. Intervalos, regras A1-A7 e S1-S6, lógica de direção e o trecho de medição: references/proportions-and-states.md.

Modo escuro

Um tema escuro é uma segunda paleta, nunca uma inversão. O mecanismo impõe as regras mensuráveis (node $S dark ..., também executado por generate e audit); o resto são regras de implementação a serem aplicadas manualmente. Tabela completa com limites e correções: references/dark-mode-rules.md.

Medido (FAIL bloqueia; WARN precisa de uma razão declarada):

• D1 bg não é preto puro: OKLCH L 0,13-0,24 (verdadeiro #000 apenas para uma variante OLED declarada).
• D2 texto não é branco puro: L 0,88-0,95. D3 texto/bg <= 17:1.
• D4 elevação por luminosidade: bg < superfície < superfície-2, cerca de +0,04 L por passo; sombras não elevam no escuro.
• D5 neutros matizados, bg croma <= 0,045.
• D6 primário é um preenchimento claro (L >= 0,70) com on-primary escuro, ou um preenchimento profundo (L <= 0,58) com on-primary branco; a faixa 0,58-0,68 é uma zona morta. Preenchimento precisa de 3:1 em bg e superfície.
• D7 contra o tema claro: mesmo matiz (dentro de 10 graus), mais claro, croma não maior (cortar 10-30%).
• D8 cores de status reajustadas para escuro: 4,5:1 em bg e na superfície elevada, com ícone e texto.
• D9 borda-forte 3:1; bordas decorativas ainda visíveis (dL >= 0,05). D11 anel de foco 3:1.
• D10 APCA consultivo: texto |Lc| >= 75, suave >= 45 (mirar 60); polaridade escura expõe texto fino que WCAG 2 passa.

Manualmente: nunca use filter: invert (N1); clarear no hover em vez de escurecer (N3); sem texto alfa (N4); escurecer fotos brilhantes e enviar variantes de logotipo claro/monocromático (N5); evitar tipo pequeno e fino (N6); definir color-scheme e theme-color por esquema (N8); seguir o SO com um alternador de três estados e sem flash (N9); verificar novamente as cores do gráfico na superfície escura (N10). O modo claro é melhor para a maioria dos usuários com visão normal e o escuro ajuda alguns usuários com baixa visão, então ofereça ambos. Paletas escuras de referência e arquitetura de tokens: references/dark-mode-and-tokens.md.

Anti-padrões a detectar

Três ou mais matizes saturados no chrome; o matiz de CTA reutilizado para títulos, ícones e crachás; complementares saturados em L igual (bordas vibram); texto cinza em fundos coloridos (use o matiz do fundo em L ajustado); texto "minimalista" cinza claro sobre off-white abaixo de 4,5:1; destaque de L médio com texto branco; outline: none sem substituição; estados hover e active que diferem por uma mudança minúscula de matiz (alterar L por 0,05-0,10); disabled que parece enabled; mesma cor de marca saturada reutilizada inalterada no modo escuro;

…

[truncado para tradução]