Color Palette Generator

1. 01Pick a base colorUse the color picker or type a hex code directly.
2. 02Choose a harmony typeComplementary, analogous, triadic, tetradic, split-complementary, or monochromatic.
3. 03Copy the hex codes you needEach swatch shows its hex code and HSL value, with a one-click copy button.

• Choosing an accent color for a designGenerate a complementary or triadic palette from your brand color to find a well-paired accent.
• Building a tonal scale for UI statesUse the monochromatic palette to get a consistent range of lighter and darker shades of one color, useful for hover/active/disabled states.
• Exploring color scheme options quicklySwitch between harmony types on the same base color to compare different color-scheme directions before committing to one.

• Complementary of redPure red (#FF0000) has a complementary color of cyan (#00FFFF), 180° opposite on the color wheel.
• Triadic of redThe triadic harmony of red (#FF0000) is green (#00FF00) and blue (#0000FF) — the three colors evenly spaced 120° apart, which happen to be the RGB primaries in this specific case.
• Monochromatic scaleA monochromatic palette keeps the same hue and saturation as the base color and varies only the lightness, producing a clean tonal ramp from darker to lighter.

Complementary uses the hue directly opposite the base (+180°). Analogous uses hues 30° on either side of the base. Triadic uses three hues 120° apart. Tetradic (square) uses four hues 90° apart. Split-complementary uses the base plus the two hues adjacent to its complement (+150° and +210°). Monochromatic keeps hue and saturation fixed and varies only lightness. These are standard, well-established color-theory relationships, not something invented for this tool.

This tool generates palettes mathematically from one base color using color-wheel relationships, rather than extracting colors from an uploaded image. That keeps the results fully deterministic and reproducible: the same base color and harmony type always produce the exact same palette.

Each generated color shows both its hex code (for direct use in CSS, design tools, or code) and its HSL value (which makes the underlying hue relationship to the base color visible at a glance).

What is a complementary color?

The color directly opposite the base color on the HSL color wheel, 180° away — a high-contrast pairing commonly used for accents.

What is the difference between triadic and tetradic?

Triadic uses three colors evenly spaced 120° apart on the color wheel; tetradic (also called square) uses four colors evenly spaced 90° apart.

Does this extract colors from an image?

No — every palette here is generated mathematically from one base color you choose, using standard color-theory hue relationships, not extracted from an uploaded image.

Is my data saved?

No. Everything is calculated in your browser; nothing is sent to a server.