Color Wheel Explorer

Drag a color around the wheel, pick a harmony rule, and see which colors go with it.

Drag the large marker to change hue and saturation, and the outer ring to change lightness. The lines show the harmony rule.

Base color

Color Harmony

Generate harmonious color combinations.

Complementary colors

Format:

The base and the hue directly opposite, 180° away. The strongest hue contrast; use one as an accent.

Deep Indigo#40429D
Indigo· Base#6366F1
Periwinkle#B1B3F8
Lemon#F1EE63
Cream#F8F7B1

Open in Palette GeneratorEdit, lock, save or export these colors.

About the Color Wheel Explorer

How to use an interactive color wheel to find colors that go together, and what each color harmony rule does.Read the guide

The ColorOverflow Color Wheel Explorer is a free interactive color wheel. Drag a base color around the wheel, choose a harmony rule such as complementary, analogous or triadic, and the wheel draws the rule's shape while the matching colors update as you move.

Copy any color as HEX, RGB or HSL, copy them all at once, or open them in the Palette Generator to edit, save and export. It runs in your browser with no sign-up.

How to use the color wheel

Set your base color. Drag the large marker on the wheel, or type or paste a HEX, RGB or HSL code in the Base color field.
Change lightness with the outer ring. Drag its small marker toward the top for darker and toward the bottom for lighter.
Choose a harmony rule. The lines on the wheel show which hues the rule uses, and the colors below update right away.
Copy the colors, or select Open in Palette Generator to lock, adjust, save or export them.

How the color wheel works

Around the wheel is hue, the color family, measured as an angle from 0° to 360° with red at the top. From the center outward is saturation: gray in the middle and the most vivid color at the edge. Lightness is set separately on the outer ring, so you can move a color around the wheel without making it darker or lighter.

A harmony rule is a fixed pattern of angles from your base color. Because the pattern turns with your color, every base color gets its own complementary, triadic or other set of colors.

Color harmony rules on the wheel

Whichever rule you choose, let one color lead and use the others in smaller amounts, then check text and background pairs for contrast.

Monochromatic: one hue in lighter and darker steps. Calm and safe.
Analogous: neighboring hues up to 30° either side of the base. Natural and low in tension.
Complementary: the hue directly opposite, 180° away. The strongest contrast, good for accents and calls to action.
Split complementary: the two hues beside the opposite, 150° and 210° away. Strong contrast that's easier to balance.
Triadic: three hues 120° apart, forming a triangle. Lively and colorful.
Tetradic: four hues 90° apart, forming a square. The most variety and the hardest to balance.

Frequently asked questions

What is the complementary color of my color?: Set your color as the base and choose Complementary. The color directly opposite on the wheel, 180° away, is its complement, and the explorer lists it with lighter and darker steps of both hues.
Is this an RYB or an RGB color wheel?: It's an RGB-based wheel built on HSL hue, the model screens and CSS use. Painters' RYB wheels place some hues differently, so a complement here can differ from one on a paint wheel.
Why do some colors in a rule look lighter or darker than the base?: Most rules add a lighter or darker step of some hues, so the palette has the light and dark colors you need for backgrounds and text, not only accent colors.
How do I use these colors in a project?: Select Open in Palette Generator. The colors open there, where you can lock and adjust them, save them to your wishlist and export CSS, Tailwind, JSON and more.
Is the color wheel tool free?: Yes. It's free with no sign-up, and you can use the colors in personal and commercial projects.