Color wheel for finding colors that go together
Drag around the wheel to choose a base color, pick a harmony rule and get the matching colors with HEX, RGB and HSL codes. Every value copies with one click.
Harmony rule
How to read this color wheel
Angle is hue. Red sits at 0° at the top, green at 120° and blue at 240°, with every other hue in between. Distance from the center is saturation: the rim is the purest version of a hue and the center is grey. The slider sets lightness for the whole wheel, from near-black to near-white.
This is an HSL wheel built on the red, green and blue primaries of a screen, so it is the right wheel for websites, apps, slides and social graphics. The painter's wheel taught in art class uses red, yellow and blue, so a few complements land differently: blue pairs with yellow here and with orange on a paint wheel. If you work in paint, see our guide to the color wheel for both systems side by side.
From a harmony to a finished design
A harmony tells you which hues belong together, not how much of each to use. Give one color most of the space, a second color a supporting role, and keep the rest for highlights. If you would rather describe the feeling and let the roles be assigned for you, the color palette generator does exactly that, with contrast checks included.
To see what happens between two of the colors you found here, put them into the color mixer for a nine-step blend you can use as a gradient.
Frequently asked questions
What is the complementary color of a color?
It is the hue directly opposite on the color wheel, 180° away. Select Complementary, then click the wheel or type a hex code to see the complement with its HEX, RGB and HSL values.
Is this an RGB or RYB color wheel?
It is an HSL wheel based on screen primaries (red, green and blue), which is what browsers, phones and design software use. Painters use the traditional red, yellow and blue wheel; our color wheel guide explains the difference.
Which harmony should I use for a website?
Monochrome or analogous schemes are the easiest to keep readable. Use a complementary or split-complementary color only for the elements you want people to click.
Can I start from my brand color?
Yes. Type the hex code in Start from a hex code and the wheel jumps to that hue, saturation and lightness.
Can I use the wheel with a keyboard?
Yes. Focus the wheel and use the left and right arrow keys to change hue and the up and down arrow keys to change saturation.
Is it free?
Yes. It runs in your browser with no sign-up.
