Color Palette Generator — Harmonious Palettes from Any Color
Enter a valid HEX color like #3b82f6 or #f80.
Pick a base color and get a matching palette built on classic color-wheel harmony rules: complementary, analogous, triadic, tetradic, or monochromatic. Every swatch shows its HEX, RGB, and HSL codes, and a single click copies any of them. Everything runs in your browser — nothing is uploaded anywhere.
How it works
- 1 Pick a base color Use the color picker or type a HEX code (like #3b82f6). Three-digit shorthand such as #f80 works too.
- 2 Choose a harmony rule Select complementary, analogous, triadic, tetradic, or monochromatic. The palette updates instantly as you switch.
- 3 Copy the codes Click any swatch to copy its HEX value, or click the RGB and HSL codes below it to copy those formats.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- What do the harmony rules actually mean?
- They are positions on the color wheel. Complementary takes the hue directly opposite your base (180° away). Analogous takes the neighbors 30° on each side. Triadic spaces three hues 120° apart, tetradic spaces four hues 90° apart, and monochromatic keeps the hue fixed while stepping lightness up and down.
- Which palette type should I use for a website?
- A common approach: build the interface around one dominant color with monochromatic or analogous variations, then use the complementary color sparingly for calls to action. Triadic and tetradic schemes suit illustrations and dashboards where you need several distinct but balanced hues.
- What color formats can I copy?
- Each swatch offers HEX (#3b82f6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)) — the three formats CSS accepts everywhere. Click a code and it lands on your clipboard.
- Why do some generated colors look dull or gray?
- Harmony rules rotate the hue but keep your base color's saturation and lightness. If the base is muted, every derived color is muted too. Start from a fairly saturated base and adjust lightness afterwards if you need softer tones.
- Is anything sent to a server?
- No. The palette math is a few HSL rotations computed entirely in your browser. The page works offline once loaded, and no color you pick is logged or transmitted.
From the blog
Color Wheel Harmony: Picking Palettes That Actually Work What complementary, analogous, and triadic really mean, and a practical way to turn a single brand color into a full UI palette. Read the post →Related tools
Color Converter Convert colors between HEX, RGB, HSL, and HSV formats. Color Contrast Checker Check text and background contrast against WCAG AA and AAA. CSS Gradient Generator Visual builder for copy-paste CSS linear and radial gradients. CSS Box Shadow Generator Visual builder that outputs copy-paste CSS box-shadow code.