Color palette generator

Pick a base color and a color scheme, and get a palette built from color theory rules used by designers: complementary, analogous, triadic and more. Copy the hex codes or the CSS variables.

  • Free
  • No sign-up
  • Runs in your browser
color-palette-generator

Fill in the values above to see the result.

100% private — the calculation is done in your browser and nothing is sent to any server.

Next step

Keep going with your result in another tool. Nothing is uploaded.

How it works

Pick a base color

Type a hex code or use the color picker.

Choose a scheme

Complementary, analogous, triadic, split, tetradic or monochromatic.

Copy the palette

As hex codes or as CSS custom properties.

Palettes built on color theory, not guesswork

Picking colors that work well together is a real skill, but it also follows patterns that have been described for centuries using the color wheel: colors placed a certain number of degrees apart tend to look balanced together. This generator applies those classic relationships to whatever base color you choose, so you get a working palette in one click instead of trial and error.

The schemes

  • Complementary: your color and its opposite on the wheel, 180 degrees apart. High contrast, good for one color to lead and the other to accent.
  • Analogous: three colors sitting next to each other on the wheel. Calm and harmonious, common in nature.
  • Triadic: three colors spaced evenly, 120 degrees apart. Vibrant and balanced, a favorite for playful brands.
  • Split complementary: your color plus the two neighbors of its complement. Similar contrast to complementary but softer.
  • Tetradic: four colors in two complementary pairs. Rich, but needs one color to dominate so it does not feel busy.
  • Monochromatic: five tints and shades of the same hue. The safest choice, and a good base for a design system.

Contrast at a glance

Each swatch shows its contrast ratio against pure white and pure black, so you can see at a glance which colors could carry text on a light or dark background without checking each one separately. For a full accessibility check against a specific background, use the accessible palette generator or the contrast checker.

What it does not do

Color theory schemes are a starting point, not a guarantee: the right palette for a brand also depends on meaning, audience and existing material. Adjust the base color and try a few schemes until one feels right. Everything is calculated in your browser.

Frequently asked questions

How do I create a color palette from one color?
Pick your base color and choose a scheme. The palette appears immediately, with hex codes ready to copy.
What is a complementary color?
The color directly opposite yours on the color wheel, 180 degrees away. The two together give strong contrast.
Which scheme should I use for a logo?
Triadic and complementary give the most contrast and energy. Monochromatic and analogous feel calmer and more cohesive.
Can I get CSS variables directly?
Yes. Copy the CSS variables block and paste it into your stylesheet.
How is contrast shown for each color?
Each swatch shows its contrast ratio against white and against black, useful to judge whether it works for text.
Is anything sent to a server?
No. The palette is generated in your browser.

Related tools

More utilities that also run without leaving your browser.

Color picker from an imageClick any point of a photo to get its exact hex, RGB and HSL color. Color shades generatorGenerate a full 50–950 tint and shade scale from one color. Grayscale palette checkerCheck if your color palette still works when converted to grayscale. Color contrast checkerCheck text and background colors against WCAG, and get a fix that passes. Accessible color adjusterAdjust a color to pass WCAG contrast against a background, keeping its hue. Brand color extractorGet the dominant colors of a logo or photo as ready-to-use hex codes.