Color Palette Generator

Base color + harmony. Lock colors you like. Space = random, C = copy palette, 1–5 = copy color.

Base Color

HEX, RGB, or HSL — auto-detected

Harmony

Bias (optional)

Shift saturation and lightness of generated colors. Locked colors are unchanged.

Saturation0
Lightness0

Output Format

Copy Palette

Palette

#3398db
Text:Aa
#db3398
Text:Aa
#98db33
Text:Aa

Contrast (WCAG)

Ratio vs white and black. Recommended text color shown on each swatch.

Colorvs Whitevs Black
#3398db
3.2:1AAAAA6.7:1AAAAA
#db3398
4.3:1AAAAA4.9:1AAAAA
#98db33
1.7:1AAAAA12.5:1AAAAA

Privacy & how it works

Runs entirely in your browser. No server receives your colors or preferences.

No data leaves your device. No signup, no tracking, no cookies for the tool itself.

Built for designers and developers who want a fast, private way to generate palettes and copy code-ready output.

Explore these related free tools to enhance your productivity and workflow.

Frequently Asked Questions

How do I use the Color Palette Generator?

Enter a base color as HEX, RGB, or HSL. Choose a harmony (e.g. Triadic, Complementary). Lock colors you want to keep. Use Space to randomize, C to copy the palette. Export as CSS, Tailwind, SCSS, or design tokens.

What are color harmonies?

Color harmonies pick colors that work well together: Monochromatic (one hue), Analogous (neighboring hues), Complementary (opposite), Triadic (three evenly spaced), Tetradic, and Square.

What do the WCAG labels mean?

They show contrast against white and black. AA (4.5:1) and AAA (7:1) are accessibility standards. Each swatch shows the recommended text color (white or black) for readability.