Resposta direta
Um construtor de sistema de cores converte cores de marca imutáveis em escalas primitivas 50–950 e mapeamentos semânticos claro/escuro editáveis no navegador local, sem envio de dados a servidores.
Como usar esta ferramenta
Insira as cores de origem
Cole valores HEX, oklch() ou color(display-p3 …) e atribua cada cor a Primary, Neutral ou outra família com âncora 400/500/600.
Crie o projeto
Gere as escalas obrigatórias Primary e Neutral, escalas de status e mapeamentos semânticos padrão sem alterar as âncoras bloqueadas.
Edite e visualize
Ajuste etapas da escala ou mapeamentos semânticos e confira botões, cartões, formulários e status nos modos claro e escuro.
Âncoras imutáveis e camadas semânticas
As cores de origem permanecem como âncoras exatas no nível de escala escolhido. Escalas primitivas possuem passos de 50 a 950 por família. Papéis semânticos (fundo, superfície, texto, primário, texto em primário, borda, foco e status) referenciam primitivas separadamente para temas claros e escuros, desacoplando o significado prático das amostras brutas.
- Entradas com var() não resolvido, sintaxe de cor relativa ou color-mix() são rejeitadas com erros acionáveis.
- Escalas Primary e Neutral são obrigatórias; Secondary e Accent são opcionais; Success, Warning e Destructive estão sempre presentes.
- Todo o processamento e geração ocorrem no cliente com salvamento automático local, sem contas ou uploads.
Exemplos práticos
Sistema primário azul da marca
Entrada: Origem: #2563eb como Primary @ 500
Saída: Escala Primary 50–950 + papéis claro/escuro (primary, on-primary, focus) prontos para o verificador
Cria um documento de entrega completo a partir de uma única cor de marca sem fragmentar em ferramentas avulsas.
Limitações
- Não deduz valores para variáveis CSS não resolvidas ou color-mix(); utilize valores concretos de CSS Color 4.
- Recomendações estéticas de escala são orientações heurísticas, não uma certificação legal de conformidade.
Perguntas frequentes
Posso continuar para o verificador sem exportar?
Sim. O Tool Island compartilhado preserva o mesmo documento em memória, permitindo trocar de etapa sem recarregar a página.
O construtor envia minhas cores para algum servidor?
Não. Cores, escalas e arquivos de projeto permanecem na memória e no armazenamento local do navegador. Nada sai do seu dispositivo.
Como funciona a navegação por teclado entre etapas?
Use as abas de etapa para navegar entre construtor, verificador e gerador de tokens. O foco permanece visível e a URL canônica não é alterada.
Referências e normas oficiais
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.