How to Build a Color Palette From a Base Color
Set Your Base Color
Drag the visual color picker or type a six-digit hex code such as #3B82F6 into the base color field. The picker and the hex input stay in sync, so editing one updates the other instantly. This single color becomes the anchor the generator builds every harmony around.
Pick a Harmony Type
Choose one of the six schemes: complementary, split-complementary, triadic, tetradic, analogous, or monochromatic. Each rotates the hue and adjusts saturation and lightness in HSL space to derive five related colors. Click Generate Palette to produce the swatches in your browser.
Read and Copy the Values
Every swatch shows its HEX, RGB, and HSL values together. Click the Copy HEX button on any swatch to send its uppercase hex code to your clipboard, then paste it straight into your CSS, design tool, or style guide.
The Six Harmony Types Explained
The generator starts from your base hue and uses color theory rules to rotate around the color wheel and shift lightness. Here is how each option derives its five colors so you can pick the scheme that matches your design goal.
| Harmony Type | Hue Rotation | Best For |
|---|---|---|
| Complementary | Base hue plus 180 degrees, with lighter and darker variants | High-contrast accents and call-to-action elements |
| Split-Complementary | Base hue plus 150 and 210 degrees | Strong contrast that is softer than pure complementary |
| Triadic | Base hue plus 120 and 240 degrees | Balanced, vibrant three-way color schemes |
| Tetradic | Base hue plus 90, 180, and 270 degrees | Rich multi-color layouts with a dominant base |
| Analogous | Base hue minus 40 to plus 40 degrees | Calm, cohesive gradients and backgrounds |
| Monochromatic | Same hue, lightness stepped from dark to light | Subtle, single-color tints, tones, and shades |
Which Harmony Should You Choose
Want Maximum Contrast
Pick complementary. The opposite hue makes a button or badge pop against your base color, and the generator adds a lighter and darker variant so you have a ready hover and pressed state.
Want Balanced Variety
Choose triadic or tetradic. These spread colors evenly around the wheel, giving you three or four distinct hues that share equal visual weight for charts, tags, or category systems.
Want a Calm, Cohesive Look
Use analogous. Hues within 40 degrees of the base sit next to each other on the wheel, producing smooth backgrounds and gradients that feel unified rather than busy.
Want a Single-Color Theme
Select monochromatic. It keeps your exact hue and steps lightness from dark to light, ideal when a brand mandates one color but you still need depth for borders, fills, and text.
Common Problems and Fixes
The Palette Does Not Update
The generator reads the hex input first and only falls back to the picker if the text is not a valid six-digit code. Make sure the field reads exactly seven characters, starting with # followed by six hex digits like #1A2B3C, then click Generate Palette again.
Three-Digit Shorthand Hex Is Rejected
Shortcodes such as #F00 are not accepted. Expand them to the full six-digit form, so #F00 becomes #FF0000, and the picker and palette will respond correctly.
Copy HEX Did Nothing
Copying uses your browser clipboard, which requires a secure page and clipboard permission. If the button does not switch to Copied, allow clipboard access for the site or select the hex value shown on the swatch and copy it manually.
A Gray Base Gives Flat Results
Pure grays, black, and white have no saturation, so rotating the hue produces little or no visible change. Start from a saturated color if you want clearly distinct harmony colors, then reduce saturation afterward if needed.