Color Palette Generator

A color palette generator builds related colors from one base swatch using classic hue relationships. This Color Palette Generator supports complementary, analogous, triadic, split complementary, tetradic, and monochrome modes, then lets you copy HEX or CSS for each swatch.

Harmonies are computed in HSL: the base RGB is converted to hue, saturation, and lightness; hues are rotated by fixed offsets for the selected mode; results convert back to RGB and HEX. Monochrome keeps hue and saturation and steps lightness up and down.

Harmony is about relationship, not accessibility. Pleasant palettes can still fail WCAG contrast for text—always verify critical pairs in the Contrast Checker.

Color theory modes map cleanly to HSL hue math, which is why this tool converts to HSL before rotating. That keeps saturation and lightness stable while accents move around the wheel—predictable behavior for design systems.

Starting from one brand color is faster than inventing five unrelated HEX values. Hue-wheel relationships give structured options for accents, charts, and illustration fills.

Exporting HEX and CSS keeps designers and engineers on the same tokens when spinning up a new theme or marketing page.

When stakeholders ask for “more colors” without a plan, harmony modes give a constrained vocabulary you can defend in critique.

• Six harmony modes from one base color
• Copy HEX or CSS per swatch
• Monochrome lightness steps for tonal scales
• Private browser generation

Choose a base color and a mode. Complementary adds the hue +180°. Analogous uses −30° and +30° around the base. Triadic uses +120° and +240°. Split complementary uses +150° and +210°. Tetradic uses +90°, +180°, and +270°. Monochrome returns five swatches at roughly −30, −15, base, +15, and +30 lightness (clamped between 5 and 95).

Saturation and lightness of the base are preserved in hue-rotation modes. That means a very dark base still yields dark related hues—useful for themes, but you may still need manual lightness edits for text.

Changing the base color regenerates the whole set. Changing the mode keeps the same base and recomputes companions. Copy HEX for tokens or CSS for quick prototypes.

Count of swatches depends on mode: two for complementary, three for analogous/triadic/split, four for tetradic, five for monochrome. Order includes the base where the implementation places it.

These are geometric hue relationships, not AI mood boards. They will not automatically produce accessible body-text colors on white or dark backgrounds.

If the base is highly saturated, companions stay saturated. Desaturate in the Color Converter when you need quieter borders or surfaces.

Consistent hue logic makes UI accents feel intentional. Teams ship fewer one-off colors that fight the brand.

Documenting how a palette was derived—complementary vs triadic—also helps future designers extend the system without guessing.

After RGB→HSL, each harmony rotates hue with (h + degrees) modulo 360, then HSL→RGB. Monochrome adjusts lightness with clamp(L ± step, 5, 95) while holding hue and saturation.

H' = (H + Δ) mod 360; monochrome: L' = clamp(L ± {15,30}, 5, 95)

Δ

Hue offset in degrees for the selected harmony mode.

H, S, L

Base hue, saturation, and lightness from the seed color.

• Complementary: 0°, 180°
• Analogous: −30°, 0°, +30°
• Triadic: 0°, 120°, 240°
• Split: 0°, 150°, 210°
• Tetradic: 0°, 90°, 180°, 270°

Use the Color Palette Generator to derive structured accent sets from a brand seed. Treat the output as a starting system, then verify contrast for any text or UI critical color pairs before you ship.