UI Color System Generator

Generate a full Tailwind-style 50-950 shade scale from one base color.

Base Color*

Your result will show up here

Copied

How To Use UI Color System Generator

Enter your base color

Provide the hex code of your primary brand or UI color.

Generate the scale

The tool produces eleven shades from 50 (lightest) to 950 (darkest) based on that hue.

Preview the strip

Review the full scale as a continuous strip to check it reads smoothly light-to-dark.

Copy individual shades

Click any shade card to copy its hex value for use in your design system.

Frequently Asked Questions

1. What is a "50-950" color scale?

It's the naming convention popularized by Tailwind CSS: eleven steps from 50 (lightest tint) through 500 (the base color) to 950 (near-black shade), used for consistent UI color systems across buttons, backgrounds, borders, and text.

2. Which step should I use as my base brand color?

Typically 500 or 600 represents your primary brand color, with lighter steps (50-300) used for backgrounds/hover states and darker steps (700-950) used for text and high-contrast elements.

3. Can I export this straight into my Tailwind config?

Yes — generate your shade scale here, then use the Palette to Tailwind CSS export tool to get a ready-to-paste tailwind.config.js snippet or CSS custom properties.

4. Will the generated shades stay accessible for text?

The scale spans a wide lightness range, but you should still verify specific pairings (e.g. 600 text on white) with the Color Accessibility Checker before shipping.