Color Palette Generator
Generate color harmonies (complementary, analogous, triadic, tetradic, square, split-complementary) plus a 11-step Tailwind-style shade scale (50-950) from any base color. Everything derived from HSL rotations.
brand: {
50: "#F0F6FE",
100: "#E2ECFE",
200: "#C0D7FC",
300: "#94BBFA",
400: "#5995F7",
500: "#1A6DF4",
600: "#145ACC",
700: "#104AA7",
800: "#0D3982",
900: "#09295D",
950: "#051938",
}About Color Palette Generator
A well-designed color palette combines a base brand color with harmonizing accents plus a full range of shades for UI states. This Palette Generator produces both: the color-harmony section shows complementary, analogous, triadic, tetradic, split-complementary, and square palettes (each derived from HSL rotations of your base color), and the shade-scale section produces a Tailwind-style 11-step scale (50-950) that you can drop directly into a design system.
Color harmonies each produce a different mood: complementary (2 opposites) is high-contrast and vibrant, analogous (3 neighbors) is calming and subtle, triadic (3 evenly-spaced) is bold and balanced, tetradic (4 spaced) is complex and requires careful weighting. Experiment to find what fits your brand. The 11-step scale is derived mathematically from your base at fixed lightness values, making the whole palette generatable from a single color.
How to Use
Pick a base color with the color picker or type a HEX code.
Choose a color-harmony scheme — complementary (2 colors, opposite), analogous (3 colors, next to each other), triadic (3 colors, evenly spaced), and more.
The generated shade scale (50-950) matches Tailwind CSS's naming convention — drop into your tailwind.config.js as a custom color.
Click any color chip to copy its HEX value.
Frequently Asked Questions
What is color harmony?
A rule-based way to pick multiple colors that look good together. Complementary = opposite on the color wheel (high contrast). Analogous = adjacent hues (subtle, calming). Triadic = 3 evenly-spaced hues (vibrant balance). Different harmonies produce different moods — pick based on the feel your design needs.
How does the shade scale work?
The tool derives 11 lightness values (12% to 97%) at the same hue and saturation as your base color, matching Tailwind CSS's 50-950 naming convention. Copy the entire scale as your custom color palette.
Can I use these palettes commercially?
Yes — colors are mathematical values with no copyright. Use freely in any project, personal or commercial. Consider matching your palette to your brand book if you have one — this tool is for exploration, not brand-mandate.
What harmony works best for UI design?
For most product UI: pick ONE brand color (base), then use analogous or monochromatic (just the shade scale) for the rest. Save complementary/triadic for marketing designs and hero graphics where high contrast is desirable.