Color Palette Generator

About This Tool

The Color Palette Extractor generates a 10-step design system scale from any base color, matching the 50–900 shade conventions used by Tailwind CSS, Material Design, and similar frameworks. Each step adjusts the lightness in HSL space while preserving the hue and saturation of your chosen color.

Each swatch in the generated scale displays its hex, RGB, and HSL values. The text color on each swatch automatically adjusts to white or dark based on luminance, ensuring readability across the full range from lightest to darkest.

How to Use

1. Pick a base color using the color picker or type a hex value.
2. The 10-step scale (50–900) generates instantly, covering the full lightness range.
3. Use the hex, RGB, or HSL values to apply colors in your design system or CSS variables.

Use Cases

Design system teams generate complete color scales to use as Tailwind config extensions or CSS custom properties. Frontend developers build accessible UI components where the 50 shade provides a light background and 900 provides a dark text color. Brand designers validate how a logo color looks across all shades before committing to a palette.

FAQ

• How is the scale different from "shades" in other color tools? — This tool generates a fixed 10-step scale (50, 100, 200, … 900) anchored at specific lightness values, matching common design system conventions. Other tools may use custom step counts.
• Does changing saturation affect the scale? — The saturation of your base color is preserved across all steps — only the lightness changes. A desaturated base color produces a near-grayscale scale.
• Can I use these colors directly in Tailwind CSS? — Yes. Copy the hex values from each shade level and add them to your tailwind.config.js under theme.extend.colors with the shade numbers as keys.