Color Scheme Generator
Generate harmonious color palettes from a base color using complementary, analogous, triadic, and other harmony rules.
About this tool
Pick any base color and instantly generate a full palette using six harmony modes: Complementary, Analogous, Triadic, Tetradic, Split-Complementary, and Monochromatic. Each swatch displays HEX, RGB, and HSL values. Export your palette as CSS custom properties, a JSON array, or a Tailwind config snippet — or hit Randomize to discover a new palette.
How to use
- 1 Use the color picker or type a HEX value to set your base color.
- 2 Select a harmony mode from the buttons (Complementary, Analogous, Triadic, etc.).
- 3 Click any swatch to copy its HEX code, or use the Export dropdown to copy the full palette as CSS, JSON, or Tailwind config.
- 4 Hit Randomize to explore a new color combination, then fine-tune the base hue with the picker.
Color harmony is geometry on a wheel
Every "harmony" this tool offers is really a rule for picking angles on the color wheel. The wheel is the hue dimension of the HSL color model, running 0–360 degrees, and the relationships designers have used for centuries are just fixed rotations from your base hue. A complementary pair sits 180° apart for maximum contrast; triadic colors are spaced 120° apart for a balanced, vivid set; analogous colors cluster within about 30–60° for a calm, cohesive look; and monochromatic schemes keep the hue fixed while stepping the lightness up and down. The generator takes the hex color you choose, converts it to HSL, rotates the hue by the right amount for the selected mode, and converts back to hex — so the math is doing exactly what a color wheel does by hand.
What each mode produces
| Mode | Hue offsets from base | Feel |
|---|---|---|
| Complementary | +180° | High contrast, two colors |
| Analogous | −30, base, +30, +60 | Harmonious, low tension |
| Triadic | +120, +240 | Balanced and lively |
| Tetradic | +90, +180, +270 | Rich, four-color |
| Split-Comp | +150, +210 | Contrast, less jarring |
| Monochromatic | same hue, lightness ±15/±30 | Subtle, single-color |
To keep results usable, the tool clamps saturation to the 5–95% range and lightness to 10–90%, so it never hands you a color that is pure black, pure white, or a muddy zero-saturation gray by accident.
A worked example
Start with the default blue #3b82f6. In HSL that is roughly hue 217°, saturation 92%, lightness 60%. Choose complementary and the tool rotates the hue to 217 + 180 = 397, which wraps to 37° — a warm orange-gold — at the same saturation and lightness, giving you a blue/orange pair that designers reach for constantly. Switch to triadic and you get the base blue plus hues at 337° (a pink-red) and 97° (a green), a trio that stays balanced because the three are evenly spaced around the wheel. The "Randomize" button, by the way, doesn't pick a fully random color — it constrains saturation to 50–90% and lightness to 40–60% so the starting point is always pleasant rather than neon or washed out.
Reading the swatches and exporting
Each swatch shows the color in three notations: HEX for CSS and design tools, RGB for code that needs channel values, and HSL so you can see the hue/saturation/lightness logic directly. Click any swatch to copy its HEX to your clipboard. When you're happy, the export panel emits the whole palette as CSS custom properties (--color-1 …), a JSON array, or a Tailwind colors block — ready to paste into a stylesheet or config without retyping a single value. Everything happens in your browser; no colors are uploaded.
Practical tips
- Pick one dominant color, not equal thirds. The classic 60-30-10 rule says a dominant color, a secondary, and an accent. Use your base as the 60%, a harmony color as the accent, and don't spread all swatches evenly.
- Check contrast for text. A harmonious pair isn't automatically readable. The HSL lightness values are your clue — pairing two mid-lightness colors as text-on-background usually fails accessibility contrast, so push one much lighter or darker.
- Use monochromatic for UI depth. The lightness steps make natural hover, active, and disabled states from a single brand color.
Common mistakes
- Treating harmony as accessibility. Complementary colors look striking but can vibrate uncomfortably when placed as small text — harmony rules are about aesthetics, not legibility.
- Forgetting hue wraps around. Offsets past 360° wrap back to the start, which is why a +180 from a high hue can land on a warm color rather than the "opposite" you pictured.
- Using a near-gray base. If your base has very low saturation, rotating its hue barely changes anything — start from a saturated color to see the harmonies clearly.