Gerador de Tons e Matizes
Gere uma escala completa de 11 etapas de qualquer cor hex. Exporte como variáveis CSS, config Tailwind, SCSS ou JSON.
:root {
--color-brand-50: #f7f5ff;
--color-brand-100: #ede8fe;
--color-brand-200: #dad2fc;
--color-brand-300: #beb3fa;
--color-brand-400: #998ff6;
--color-brand-500: #6366f1;
--color-brand-600: #4e52bc;
--color-brand-700: #3c408d;
--color-brand-800: #2d3269;
--color-brand-900: #21264a;
--color-brand-950: #191f38;
}Perguntas Frequentes
Qual é a diferença entre tom e matiz?
Um tom é uma cor misturada com preto (mais escura), um matiz é misturado com branco (mais claro).
Como uso as variáveis CSS exportadas?
Copie o output do tab CSS e cole no seu arquivo CSS global. Referencie com var(--brand-500).
A escala é compatível com Tailwind CSS?
Sim. Mude para o tab Tailwind e copie o objeto colors para tailwind.config.js.