Color Palette Generator

How to use this tool

1. Pick a base color. Click the color swatch or type a hex value to choose your starting color.
2. Select a harmony rule. Choose complementary, analogous, triadic, tetradic, monochromatic, or split-complementary.
3. Adjust the count. Use the slider to select how many colors the palette should contain (3–10).
4. Copy or export. Click any hex swatch to copy that color, or use the export buttons to copy the entire palette as CSS variables or JSON.

Color harmony rules explained

Color harmony rules are systematic methods for selecting colors that look visually pleasing together. They are rooted in color theory and the relationships between hues on the color wheel.

Complementary

Complementary colors sit directly opposite each other on the color wheel (180° apart). The pairing produces maximum contrast and visual tension, useful for accents, call-to-action buttons, and anything that needs to stand out. Blue and orange, red and green, and yellow and purple are classic complementary pairs.

Analogous

Analogous colors are adjacent on the wheel (typically ±30° steps). They share a hue family, making them feel naturally cohesive and low-tension. Nature uses analogous palettes extensively. Think autumn leaves (yellow to orange to red). Great for backgrounds, illustrations, and brand identities.

Triadic

Three colors equally spaced around the wheel (120° apart). Triadic palettes are vibrant and offer high contrast while remaining balanced. To prevent visual overload, designers often use one color as dominant and the other two as accents.

Tetradic (square)

Four colors in two complementary pairs, 90° apart. Tetradic schemes are rich and complex. They work best when one color dominates; otherwise the palette can feel chaotic.

Monochromatic

A single hue explored at different lightness and saturation levels. Monochromatic palettes are elegant, easy to manage, and always harmonious. They are especially popular for minimalist designs, dark-mode UIs, and data visualizations where relative magnitude matters.

Split-complementary

The base color plus the two colors adjacent to its complement (150° and 210° away). The result is similar in visual energy to complementary but softer and less jarring. A popular compromise for designers who want contrast without the tension of a pure complement.

Neutrals in palettes

No brand palette is complete without neutral colors. Black, white, and grays serve as supporting players that allow the primary palette to breathe and maintain hierarchy. Best practices:

• Warm vs. cool neutrals: tint your grays slightly toward your brand hue for a more cohesive look. A brand with blue accents might use a slightly cool-tinted near-white (#F5F6FA instead of pure #FFFFFF).
• At least 5 neutral stops: most design systems define a neutral scale from near-white to near-black (e.g., 50, 100, 200, 400, 600, 800, 950) to cover all text, border, and background use cases.
• Off-black over pure black: pure #000000 can feel harsh against most backgrounds. A very dark gray (#0F172A or #111827) is typically more pleasant for body text.

Real brand palette examples