Color Palette Generator
Generate beautiful color palettes from a base color. Shades, tints, complementary colors.
{
50: '#021431',
100: '#042862',
200: '#073c92',
300: '#0950c3',
400: '#0b64f4',
500: '#3c83f6',
600: '#6da2f8',
700: '#9dc1fb',
800: '#cee0fd',
900: '#e7effe'
}About Color Palette Generator
Generate a complete color palette from any base color. Produces a 10-step scale (50–900) of tints and shades similar to Tailwind CSS, plus complementary, analogous, triadic, and split-complementary color schemes based on color theory. Export the full palette as CSS custom properties, a Tailwind CSS theme config, or a list of hex codes. Perfect for building design systems and UI component libraries.
All processing happens entirely in your browser using modern web APIs. Nothing is uploaded to our servers — your data stays local and private. Free to use forever.
Common use cases
- Generating a Tailwind-compatible 10-shade color scale from a brand color
- Creating a complete CSS design token palette for a design system
- Exploring complementary and analogous colors for a UI color scheme
- Finding accessible light/dark variations of a brand color
- Building a consistent color scale for data visualization charts
How it works
Converts the base color to HSL. For the shade scale: lightness is interpolated from 95% (shade 50) to 10% (shade 900) while preserving hue and adjusting saturation slightly. For complementary colors: hue is rotated 180°. For analogous: ±30°. For triadic: ±120°. All resulting colors are converted back to HEX for output.