UI Shades

Color palette generator - build and export a multi-color palette

#4040ff
Closest named color: Tailwind Indigo 600
#4040ff
oklch(0.519 0.269 271.93)
rgb(64 64 255)
hsl(240 100% 62.5%)
Share
Primary
Neutral
Success
Warning
Error

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Build a multi-color palette

Start from a primary brand color and the conventional semantic roles - Neutral, Success, Warning and Error - then add secondary and accent colors to taste. Every color in the palette expands into a full OKLCH tint-to-shade ramp or an 11-stop Tailwind scale, keyed to the same 50…950 stops, so what you export drops straight into a design system. Recolor, rename or remove any swatch; nothing is uploaded and the palette is yours to export or save.

How it works

  1. 1. Set your brand color. Click the primary swatch to choose it.
  2. 2. Add colors. Use “+” for secondary and accent colors; rename or remove roles.
  3. 3. Generate shades. Each color becomes an OKLCH ramp or Tailwind scale.
  4. 4. Export or save. Copy tokens, download a PNG, or sign in to save and share.

Frequently asked questions

What is a color palette generator?
It is a tool for assembling a set of colors that work together - a primary brand color, secondary and accent colors, and semantic roles like Neutral, Success, Warning and Error - then turning each into a full range of shades you can use in a design system.
How many colors can a palette hold?
The palette opens with a primary color plus the four seeded semantic roles, and you can add more brand and accent colors with the “+”. Recolor, rename or remove any swatch to shape the palette around your project.
How are the shades generated?
Each color expands into either an OKLCH tint-to-shade ramp (perceptually even lightness steps) or an 11-stop Tailwind scale. Both are keyed to the same 50…950 stop labels, so an export is a drop-in token scale.
What can I export?
The whole palette exports to Tailwind v4 and v3, CSS variables, W3C design tokens, Style Dictionary and Figma variables, with each color getting its own collision-safe token family. You can also download the palette as a PNG.
Is it free?
Yes. UIshades is free and ad-free. Sign in if you want to save a palette and share it with an unguessable link; everything else works without an account.