Primary text — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary text — Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Accent text — Ut enim ad minim veniam, quis nostrud exercitation.
Primary text — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary text — Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Accent text — Ut enim ad minim veniam, quis nostrud exercitation.
/* Light Theme */
:root {
--light-primary: #1e293b;
--light-secondary: #64748b;
--light-accent: #7c3aed;
--light-background: #f9fafb;
}
/* Dark Theme */
:root {
--dark-primary: #e0e7ff;
--dark-secondary: #94a3b8;
--dark-accent: #a78bfa;
--dark-background: #1f2937;
}
/* Or use data attribute for theme switching */
[data-theme="light"] {
--primary: #1e293b;
--secondary: #64748b;
--accent: #7c3aed;
--background: #f9fafb;
}
[data-theme="dark"] {
--primary: #e0e7ff;
--secondary: #94a3b8;
--accent: #a78bfa;
--background: #1f2937;
}/* Light Theme */
:root {
--light-primary: #1e293b;
--light-secondary: #64748b;
--light-accent: #7c3aed;
--light-background: #f9fafb;
}
/* Dark Theme */
:root {
--dark-primary: #e0e7ff;
--dark-secondary: #94a3b8;
--dark-accent: #a78bfa;
--dark-background: #1f2937;
}
/* Or use data attribute for theme switching */
[data-theme="light"] {
--primary: #1e293b;
--secondary: #64748b;
--accent: #7c3aed;
--background: #f9fafb;
}
[data-theme="dark"] {
--primary: #e0e7ff;
--secondary: #94a3b8;
--accent: #a78bfa;
--background: #1f2937;
}The Quick Theme Palette Generator lets you create accessible light and dark mode color palettes with real-time contrast validation. It uses the official WCAG 2.1 algorithm to ensure your primary, secondary, accent, and background colors meet key AA or AAA accessibility requirements.
You can adjust colors manually, randomize fully compliant palettes, preview them in an interactive UI, and export your final theme as CSS variables or JSON. The entire tool runs in your browser, making it fast, responsive, and ideal for designers and developers building modern, accessibility-focused interfaces.