UI Colors

For UI and frontend teams building Tailwind-style 50–950 ramps from one brand hex—not a full multi-brand token studio. Generate and preview scales in component examples on the free site. Pro unlocks secondary/tertiary/success/warning/error colors, theory-based combos, Contrast matrix + APCA, all-example previews, HSL/OKLCH/RGB export, shade locking and per-color HSL edits, plus save/share via public link. Site also links Figma plugins and a free site-contrast Chrome extension.

Color & Style Exploration

$Freemium

Use it when

You need a fast Tailwind-shaped shade scale from a brand color, want to eyeball it on UI previews, and only upgrade when you need full role colors, APCA, or saved shared palettes.

What it does well

Free core: generate editable Tailwind-oriented scales from a base color and preview them in on-site UI examples
Pro color management: add secondary, tertiary, success, warning, and error colors; build theory-based combinations
Pro accessibility: Contrast matrix and APCA settings for accessible systems; preview colors across all design examples
Pro export and collaboration: export HSL, OKLCH, and RGB; lock shades and edit individual HSL values; save palettes and share with a public link

Skip it when

You need a full OKLCH token workspace with team versioning beyond this generator (consider a broader palette studio)
You only need Coolors-style mood boards without Tailwind 50–950 structure
You assume Free includes save/share, multi-role semantic colors, APCA, or HSL/OKLCH/RGB export packs—the upgrade modal lists those under Pro
You’re not in a Tailwind/shadcn-style stack and don’t care about shade-number ramps

Fits your workflow

Pick a base hex → generate the scale → preview on Cards/Dashboard/shadcn-style examples → copy into Tailwind or Figma. Stay free for one-off ramps; upgrade to Pro when you need semantic roles, accessibility tooling, richer export, or saved public links. Cancel anytime is stated on the Pro modal.