Tokens de cor para design system
Gere um conjunto completo de tokens de cor para o seu design system a partir de 7 cores base — primária, secundária, destaque, sucesso, aviso, erro e info. Cada cor recebe 9 variantes derivadas automaticamente (base, light, dark, hover, active, bg, border, text e muted) para os modos claro e escuro. Exporte como propriedades personalizadas CSS ou JSON. Todo o processamento acontece no seu navegador — grátis, sem cadastro.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Geração completa de tokens
Gere tokens de design prontos para produção a partir apenas das suas cores base.
- 7 categorias semânticas: Primária, secundária, destaque, sucesso, aviso, erro e info — cada uma com um conjunto completo de variantes derivadas incluindo base, light, dark, hover, active, bg, border, text e muted.
- Modo claro e escuro: Cada token de cor é automaticamente adaptado ao modo escuro usando uma inversão perceptual de luminosidade que preserva a legibilidade e a hierarquia visual em temas escuros.
- Variantes inteligentes: As variantes hover, active, bg, border e texto-sobre-cor são geradas automaticamente usando mesclagem sensível à luminância — sem ajustes manuais para contraste compatível com WCAG.
- Exportação CSS + JSON: Copie propriedades personalizadas CSS prontas para uso nos seletores :root e [data-theme="dark"], ou exporte um arquivo JSON completo de tokens para integrar com ferramentas de design e pipelines de build.
Casos de uso comuns
De design systems ao modo escuro — tokens de cor potencializam interfaces consistentes.
- Desenvolvimento de design system: Gere tokens de cor consistentes para sua biblioteca de componentes ou design system. Use as variáveis CSS exportadas em todos os seus componentes como fonte única de verdade.
- Entrega de design: Converta tokens de design do Figma ou Sketch em variáveis CSS e arquivos JSON prontos para desenvolvedores. Elimine erros de mapeamento manual de cores entre design e desenvolvimento.
- Temas e white-label: Crie vários conjuntos de tokens para marcas ou temas diferentes. Cada conjunto recebe variantes claras/escuras consistentes automaticamente — perfeito para produtos SaaS multi-tenant.
- Implementação do modo escuro: Pare de adivinhar as cores do modo escuro. Insira sua paleta clara uma vez e obtenha instantaneamente tokens de modo escuro compatíveis com WCAG, sem cálculos on-the-fly.
- Migração de framework: Ao migrar entre frameworks CSS ou adicionar um design system no meio do projeto, gere tokens de cor consistentes que funcionam com Tailwind, CSS puro ou CSS-in-JS.
- E-commerce e sites de marketing: Mantenha a consistência da marca em páginas de destino, catálogos de produtos e fluxos de checkout com um único conjunto de tokens de cor semânticos compartilhado por todas as páginas.
Sobre tokens de cor para design system
Entenda como os tokens de cor funcionam e como usá-los nos seus projetos.
- O que são tokens de cor?: Os tokens de cor de um design system são nomes de variáveis semânticas que abstraem valores de cor codificados em identificadores significativos e reutilizáveis. Em vez de usar códigos hexadecimais diretamente — difíceis de manter e impossíveis de tematizar — você usa nomes como --color-primary-base ou --color-error-hover. Isso permite estilização consistente entre componentes e troca instantânea de tema.
- Como os tokens do modo claro são gerados: Para cada cor base, derivamos 9 variantes de token: base (a original), light (85% de mistura com branco), dark (75% de mistura com preto), hover (15% mais escura), active (30% mais escura), bg (95% de mistura com branco), border (50% de mistura com branco), text (preto ou branco para contraste) e muted (saturação reduzida). A variante text usa luminância WCAG para garantir contraste legível sobre a cor base.
- Como os tokens do modo escuro são adaptados: Os tokens do modo escuro usam um algoritmo de inversão perceptual de luminosidade. Cores base claras são deslocadas para a extremidade escura do espectro, preservando as relações de matiz e saturação. O resultado mantém a hierarquia visual da paleta original e é confortável de visualizar sobre um fundo escuro.
- Uso dos tokens exportados: A saída CSS inclui blocos :root e [data-theme="dark"] com todas as variáveis de token prontas para colar no seu projeto. A saída JSON usa um formato plano chave-valor compatível com os padrões da especificação Design Token. Arraste e solte na sua ferramenta de design ou importe via script de build para um fluxo totalmente automatizado.
Perguntas frequentes
Tokens de cor são variáveis semânticas que representam cores em um design system. Em vez de usar códigos hexadecimais em toda parte, você usa nomes como --color-primary ou --color-error-bg. Isso torna trivial atualizar cores globalmente, implementar o modo escuro e manter a consistência entre componentes. Nosso gerador online gratuito de tokens de cor cria um conjunto completo a partir de 7 cores base.
Cada cor base gera 9 variantes: base (a cor original), light (misturada com branco), dark (misturada com preto), hover (levemente mais escura), active (mais escura para estados pressionados), bg (bem clara para fundos), border (esmaecida para bordas), text (preto ou branco para contraste legível) e muted (saturação reduzida). As variantes de modo claro e escuro são geradas ambas.
A adaptação ao modo escuro usa um algoritmo de inversão perceptual que mapeia os valores de luminosidade do modo claro para equivalentes escuros por meio de uma curva que preserva as relações de contraste relativo. A saturação é ligeiramente reduzida no modo escuro porque cores altamente saturadas podem ser desconfortáveis de ler sobre fundos escuros.
Sim. A variante text de cada token usa cálculos de luminância WCAG para escolher automaticamente entre texto preto e branco, garantindo uma razão de contraste de pelo menos 7:1 sobre a cor base. Isso atende aos requisitos WCAG AAA para texto normal — sem ajustes manuais.
Dois formatos: propriedades personalizadas CSS (com blocos :root e [data-theme="dark"] separados, prontos para colar no seu projeto) e JSON (formato plano chave-valor compatível com os padrões da especificação Design Token e ferramentas como Style Dictionary).
Os nomes dos tokens seguem o padrão consistente --color-{categoria}-{variante}. Você pode renomeá-los depois de copiar com um simples localizar e substituir — ou modificar a saída CSS/JSON diretamente no seu código.
Sim, este gerador de tokens de cor para design system é 100% gratuito, sem cadastro, sem nível premium e sem limites de uso. Todo o processamento acontece no seu navegador.
As 7 categorias (primária, secundária, destaque, sucesso, aviso, erro, info) cobrem a maioria das necessidades de um design system. Se você precisar de categorias adicionais como surface, background, text ou border no nível superior, pode executar a ferramenta várias vezes com cores base diferentes e combinar as saídas.