Build primary, secondary and neutral scales together. Copy Tailwind v4 @theme, v3 configuration or CSS.
Update theme ↓Add generated declarations below your existing framework imports. Keep the setup and plugins your project already uses.
A sample page with your background, surfaces and accents. Change the palette to see every section update.
Generated defaults, not an accessibility certificate. Check the actual text, backgrounds, focus states and charts in your interface.
Illustrative chart, not analytics. Colors alone do not make a chart accessible.
/* 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;
}Generated defaults, not an accessibility certificate. Check the actual text, backgrounds, focus states and charts in your interface.