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.4:1

Alert Needs work

Accent / Background

2.2: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: #D7CC50;
  --color-primary-light: #D7CC50CC;
  --color-primary-dark: #D7CC5099;
  --color-secondary: #CFEB94;
  --color-accent: #49BA1C;
  --color-background: #EEEDE7;
  --color-text: #111111;
}

Palette history

Sign in with Supabase Auth to unlock palette saving.

Generator | Dev Palette Generator