Color

Color Palette Generator

Details

How to use Color Palette Generator

What the tool does, how to run it, and what to expect from the result.

How to build a color palette from one base color

The generator converts your base hex into HSL and then derives five palettes from it by rotating the hue or moving the lightness. Everything recomputes as you type, so you can scrub the color box and watch all five rows change together.

Copying is per swatch or per row, and all of it happens locally in your browser.

  • Set a base color with the color box, or type a hex value such as #2563EB into the HEX field.
  • Read the five rows: complementary, analogous, triadic, monochromatic, and shades and tints.
  • Click any single swatch to copy that one hex code.
  • Use Copy row to put a whole palette on the clipboard as comma-separated hex values.
  • Adjust the base until the rows you actually care about look right, since the harmony rows are derived, not editable.
Tips

Getting a better result out of Color Palette Generator

Specific settings and thresholds, not general advice.

  • The five palettes are pure hue math on your base color: complementary rotates the hue 180 degrees, analogous takes -30 and +30, and triadic takes 120 and 240. Saturation and lightness are held constant, so the harmony is geometric, not perceptual.
  • The monochromatic row is fixed at lightness 20, 35, 50, 65, and 80 percent. It ignores your base lightness entirely, which is why a very dark or very light base still yields the same evenly spread five-step ramp.
  • The shades and tints row does keep your base: it uses lightness 10, 25, 40, your own L, 60, 75, and 90, sorted ascending and de-duplicated. If your base lightness happens to equal one of those numbers you get six swatches instead of seven.
  • Because rotation happens in HSL, a hue rotation on a near-grey base (saturation close to 0) changes almost nothing. Start from a saturated base if you want the complementary and triadic rows to look different from each other.
  • HSL hue rotation is not perceptually uniform. Rotating 120 degrees from a yellow gives a cyan that reads far lighter than the base to the human eye, so check the swatches against real text before you commit a triadic scheme to a design system.
Limits

What Color Palette Generator does not do

The honest boundary, so you do not lose time finding it yourself.

  • No alpha, and no export to CSS variables, Tailwind config, or ASE.
  • No contrast or WCAG check between the generated colors.
  • No extraction of a palette from an uploaded image.
  • Palettes are HSL-based only, with no OKLCH or perceptual spacing.
At a glance

Who Color Palette Generator is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Designers building color schemes.

Ideal for

Using the color palette generator without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Why do the monochromatic swatches ignore my base color's lightness?

The monochromatic row is deliberately a fixed ramp at 20, 35, 50, 65, and 80 percent lightness, holding your hue and saturation. This gives a predictable, evenly spaced scale that works as a UI colour ladder no matter how dark or light your input was. If you want a ramp anchored to your exact base, look at the shades and tints row, which inserts your own lightness value into the scale.

The triadic colors look wrong next to each other. Is that expected?

It is a known limitation of HSL. Rotating the hue by 120 degrees keeps the numeric saturation and lightness identical but not the perceived brightness, so a yellow and its triadic partners can look badly mismatched. Treat the output as a starting point and hand-tune lightness, or use a perceptual space such as OKLCH for production palettes.

How do I get all the hex codes out at once?

Each palette row has a Copy row button that puts the whole set on your clipboard as comma-separated hex values, and clicking any individual swatch copies that one hex on its own. There is no CSS or JSON export, so you paste the values into your own variables.

What does the label text color on each swatch tell me?

Nothing about accessibility. The tool picks white or near-black label text using a YIQ brightness estimate with a threshold of 140, purely so the hex code stays readable on the swatch. It is not a WCAG contrast check and should not be read as one.

Can I feed it a grey or a near-black base?

You can, but hue rotation is meaningless when saturation is near zero, so complementary, analogous, and triadic will all come back looking like the same grey. Only the monochromatic and shades and tints rows produce a useful result from a desaturated base.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon