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

10.8:1

Pass WCAG AAA

Primary / Background

1.6:1

Alert Needs work

Accent / Background

1.7: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: #D8BD4F;
  --color-primary-light: #D8BD4FCC;
  --color-primary-dark: #D8BD4F99;
  --color-secondary: #D2DEA1;
  --color-accent: #6ECB0B;
  --color-background: #EBEBEA;
  --color-text: #111111;
}

Palette history

Sign in with Supabase Auth to unlock palette saving.

Generator | Dev Palette Generator