Color Palette Generator

A ready-made palette from one color.

Generate a complementary, analogous and tint/shade palette from a single base color.

How it works

Starting from your base color's hue, the complementary color is the hue opposite on the color wheel (180°), analogous colors sit next to it (about ±30°), and tints and shades change its lightness.

When it helps

A quick way to build a harmonious palette for a website, presentation, brand or illustration.

The color harmonies explained

Complementary colors sit opposite each other on the color wheel, like blue and orange. They create strong contrast, which makes them good for a call-to-action button against a background, but too much of both can feel loud. Analogous colors sit side by side, like blue, blue-green and violet-blue, and feel calm and cohesive.

Tints and shades keep the same hue and only change lightness, which gives you a family of related colors for backgrounds, borders, hover states and text.

Putting a palette to work

A common rule of thumb is 60-30-10: about 60% of a design in a neutral or dominant color, 30% in a secondary color, and 10% in an accent. Use the complementary color sparingly as that accent.

Before you commit, check that text stays readable. The Color Contrast Checker shows whether a text and background pair meets WCAG accessibility guidelines.

Frequently asked questions

What's the difference between a tint and a shade?

A tint mixes the color with white (lighter); a shade mixes it with black (darker).

How many colors should a palette have?

Many designs use one main color, one accent and a few neutrals.

Can I start from a color in my logo?

Yes. Use a color picker or the Color Converter to get its HEX value and paste it in as the base color.

Tools In Orbit · About · Contact · Privacy · Terms