Transforme uma única cor de marca em um sistema de design completo com escalas de 50 a 950, tokens semânticos para modo claro e escuro e combinações de contraste compatíveis com acessibilidade. Exporte como propriedades personalizadas CSS, configuração Tailwind ou tokens de design para uso imediato em produção.
Gere escalas de 50 a 950 para cada cor na sua paleta de marca. Cada matiz é perceptualmente uniforme e testado para etapas de luminosidade consistentes.
Gera automaticamente tokens de cor semânticos que funcionam tanto no modo claro quanto no escuro. Cores de superfície, texto e destaque são mapeadas para ambos os temas.
Cada combinação de cores é verificada em relação às taxas de contraste WCAG AA. Você verá quais combinações funcionam para texto, UI e elementos decorativos.
Exporte todo o seu sistema de cores como propriedades personalizadas CSS, configuração Tailwind CSS, mapa SCSS, tokens JSON ou um Guia de Estilo compartilhável.
Tokens semânticos mapeiam cores para sua finalidade — como 'background', 'text-primary', 'border', 'error' — em vez de valores específicos. Isso facilita a troca de temas (claro/escuro) ou a reformulação da marca sem tocar no código dos componentes.
Utilizamos o espaço de cores OKLCH para etapas de luminosidade perceptual uniforme. A partir da sua cor de marca, calculamos 10 tonalidades que parecem uniformemente espaçadas ao olho humano, ao contrário dos simples ajustes de luminosidade HSL.
Comece com sua cor primária. O gerador cria um sistema completo em torno dela. Você pode ajustar as cores secundárias e de destaque dentro do sistema gerado.
Sim. A configuração Tailwind exportada usa o formato de propriedade customizada CSS compatível tanto com Tailwind v3 (tailwind.config.js) quanto com v4 (@theme inline).