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

14.1:1

Pass WCAG AAA

Primary / Background

6.7:1

Pass WCAG AA

Accent / Background

9.9: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: #13B942;
  --color-primary-light: #13B942CC;
  --color-primary-dark: #13B94299;
  --color-secondary: #1A5643;
  --color-accent: #4ED5E4;
  --color-background: #181B18;
  --color-text: #FFFFFF;
}

Palette history

Sign in with Supabase Auth to unlock palette saving.

Generator | Dev Palette Generator