Crie juntas as escalas primária, secundária e neutra. Copie @theme para Tailwind v4, configuração v3 ou CSS.
Atualizar tema ↓Adicione as declarações abaixo dos imports existentes. Mantenha a configuração e os plugins do seu projeto.
Uma página de exemplo com seus fundos, superfícies e destaques. Altere a paleta para atualizar cada seção.
Valores iniciais gerados, não um certificado de acessibilidade. Verifique texto, fundos, foco e gráficos na sua interface.
Gráfico ilustrativo, não estatísticas. Só a cor não torna um gráfico acessível.
/* Tailwind CSS v4: add after your existing Tailwind import. */
@theme {
--color-primary-50: #EAF6FF;
--color-primary-100: #D5E9FF;
--color-primary-200: #AFD1FF;
--color-primary-300: #81AFFF;
--color-primary-400: #4E86FA;
--color-primary-500: #2563EB;
--color-primary-600: #0038BF;
--color-primary-700: #001D9F;
--color-primary-800: #00007D;
--color-primary-900: #03005F;
--color-primary-950: #050048;
--color-secondary-50: #F6F1FF;
--color-secondary-100: #EAE2FF;
--color-secondary-200: #D5C5FF;
--color-secondary-300: #B79FFF;
--color-secondary-400: #9570EC;
--color-secondary-500: #6A31C4;
--color-secondary-600: #5B19B1;
--color-secondary-700: #460091;
--color-secondary-800: #310071;
--color-secondary-900: #210055;
--color-secondary-950: #15003F;
--color-neutral-50: #F4F5F7;
--color-neutral-100: #E6E8EC;
--color-neutral-200: #CDD1D8;
--color-neutral-300: #ACB1BB;
--color-neutral-400: #757C8A;
--color-neutral-500: #656C7A;
--color-neutral-600: #474D5A;
--color-neutral-700: #323844;
--color-neutral-800: #1F242E;
--color-neutral-900: #10141C;
--color-neutral-950: #060910;
}Valores iniciais gerados, não um certificado de acessibilidade. Verifique texto, fundos, foco e gráficos na sua interface.