Esquema de cores do site — tokens CSS semânticos
Gere um esquema de cores do site no navegador. Escolha um HEX de marca (teal de exemplo #0F6E8C), receba neutros compartilhados, action/hover/soft/focus, links neutros, cores de status fixas, prévia do chrome e autochecagens AA; depois copie CSS :root ou JSON. Baseado em regras — não é IA na nuvem; nada é enviado.
Neutros e status compartilhados; cada tema só sobrescreve tokens derivados da marca. Máx. 4 temas.
| Token | Valor |
|---|
| Token | Valor | Papel |
|---|
Como funciona
Informe até quatro temas de marca (id + HEX). A ferramenta mantém uma escada neutra compartilhada, deriva tokens de ação de cada marca, mapeia papéis semânticos (incluindo links neutros e status fixos), desenha um chrome claro, roda autochecagens AA e deixa copiar variáveis CSS ou JSON — tudo local.
Regras que você deve esperar
Camadas de tokens, link ≠ ação, status independente, dicas de contraste e privacidade.
- Primitivos guardam neutros brutos e derivados da marca. A semântica nomeia o propósito (bg, surface, link, action…). Componentes devem referenciar só a semântica.
- Marca → --action; hover escurece ~22%; soft ≈ 10% alpha; focus-ring ≈ 40% alpha; --bg é um neutro levemente tingido.
- Links mapeiam para text / text-strong (neutro). Não ligue o --link padrão a --action.
- Danger / success / warning / info ficam fixos entre temas para a marca nunca substituir a semântica de erro.
- Privacidade: geração, prévia e cópia para a área de transferência rodam nesta aba. Nenhuma cor de marca é enviada.
Exemplo
Carregue o exemplo (id teal, #0F6E8C). A prévia mostra superfície branca, destaque suave teal no item ativo (sem barra esquerda), links de corpo neutros e uma linha danger vermelha. A semântica mapeia --link para a cor do texto (não --action). Copiar CSS entrega neutros em :root mais overrides html[data-theme="teal"].
Bom encaixe
- Chrome de ferramenta ou SaaS: casca clara legível com acentos de marca em seleção e foco, não em cada link.
- Rebrand de landing: troque marcas via html[data-theme] mantendo o esqueleto neutro e as cores de status.
- Handoff design→dev: cole variáveis CSS :root em vez de listas HEX de screenshot.
Frequently asked questions
«Inteligente» é a mesma coisa que IA de cores?
Aqui «inteligente» quer dizer regras determinísticas: neutros fixos, a marca deriva action/hover/soft/focus, links ficam neutros e status nunca seguem a marca. Sem chamada a modelo e sem upload — o cálculo roda nesta aba.
Por que os links não usam a cor da marca?
Links padrão usam cores de texto para a página não virar um muro de hiperlinks da marca. A cor da marca fica para ações, seleção, anéis de foco e fills soft leves.
Por que as cores de status não mudam com o tema?
Danger, success, warning e info permanecem fixos entre temas. Uma marca âmbar não pode virar a cor de erro, senão a UI inteira parece um alerta.
Quando usar Gerar escala de cor da marca?
Use Gerar escala de cor da marca quando precisar de uma rampa 50–950 ou listas HEX/HSL/OKLCH. Esta página entrega um esquema semântico claro completo (bg/surface/link/action/status) pronto para colar.
Quão completa é a autochecagem de contraste?
As autochecagens cobrem alguns pares-chave do tema ativo. Para pares arbitrários ou AAA, abra o verificador de contraste WCAG e cole o HEX de qualquer token.
Related tools
Dúvidas ou feedback
Algo pouco claro, quebrado ou faltando? Escreva abaixo — lemos cada mensagem sobre estas ferramentas.