Crea juntas las escalas primaria, secundaria y neutra. Copia @theme para Tailwind v4, configuración v3 o CSS.
Actualizar tema ↓Añade las declaraciones debajo de los imports existentes. Conserva la configuración y los plugins de tu proyecto.
Una página de ejemplo con tus fondos, superficies y acentos. Cambia la paleta para actualizar cada sección.
Valores iniciales generados, no un certificado de accesibilidad. Comprueba texto, fondos, foco y gráficos en tu interfaz.
Gráfico ilustrativo, no estadísticas. El color por sí solo no hace accesible un gráfico.
/* 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 iniciales generados, no un certificado de accesibilidad. Comprueba texto, fondos, foco y gráficos en tu interfaz.