Mike WebworksMike WebworksDev Palette Generator

Generator

Build polished palettes for production UIs.

Generate color systems with harmony rules, preview them in context, and ship exports straight into your stack.

Click a lock icon to keep a color fixed. Press SPACE to generate a new palette.

Accessibility

Contrast checks

Quick WCAG checks for the most important foreground and background pairings.

Text / Background

11.6:1

Pass WCAG AAA

Primary / Background

5.2:1

Pass WCAG AA

Accent / Background

4.4:1

Alert Needs work

Live UI preview

Navbar

Mike Webworks

Heading preview

Build a sharper interface system in minutes.

Test contrast, hierarchy, and rhythm with palette-aware components before pushing colors into code.

Card preview

Release palette v2.1

Accent highlights show alert states, focus rings, badges, and lightweight data visualization.

AccentToken-ready

Developer export

Copy implementation-ready tokens for your stack.

:root {
  --color-primary: #5C40E7;
  --color-primary-light: #5C40E7CC;
  --color-primary-dark: #5C40E799;
  --color-secondary: #C596E8;
  --color-accent: #BB0FC7;
  --color-background: #EAEAEB;
  --color-text: #111111;
}

Palette history

Sign in with Supabase Auth to unlock palette saving.

Generator | Dev Palette Generator