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

13.9:1

Pass WCAG AAA

Primary / Background

3.0:1

Alert Needs work

Accent / Background

12.3:1

Pass WCAG AAA

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: #BA3712;
  --color-primary-light: #BA3712CC;
  --color-primary-dark: #BA371299;
  --color-secondary: #533E1D;
  --color-accent: #F0D942;
  --color-background: #1B1918;
  --color-text: #FFFFFF;
}

Palette history

Sign in with Supabase Auth to unlock palette saving.

Generator | Dev Palette Generator