Find colors that belong together.
Click the wheel to choose a color and see which colors match it. Perfect for choosing website colors, room colors, outfits and school projects.
Color wheel
Click or drag on the wheel to choose your main color. The other dots show colors that look great with it.
Your colors
Pick a style of match, then tap any color to copy it.
Choose a color match
Your palette
How to use this tool (step by step)
Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.
Choose your main color
- Click anywhere on the wheel, or drag your finger around it.
- The angle around the circle is the color family (red, orange, yellow, green, blue, purple).
- The distance from the center is how strong the color is. The middle is gray, the edge is the strongest.
Why we do this: Every other color in your palette is calculated from this first one, so it is the foundation of your design.
Make it lighter or darker
- Move the Lightness slider.
- Slide left for deep, dark colors and right for soft, pastel colors.
- Watch the wheel change as you move.
Why we do this: The same color can feel calm (light) or serious (dark). This slider lets you choose the mood.
Pick a color match
- Press one of the buttons: Complementary, Analogous, Triadic and so on.
- Read the short sentence under the buttons to see what the match is good for.
- Look at the dots: they show where the matching colors sit on the wheel.
Why we do this: Designers use these classic matches because colors in these positions are known to look good together.
Copy your colors
- Tap any swatch to copy its HEX code.
- Or press Copy all HEX codes to copy the whole palette.
- Press Copy as CSS if you are a web developer and want ready-made variables.
Why we do this: Once copied, you can paste the colors straight into your website, document or design tool.
Questions people ask
Quick answers.
What is a complementary color?
It is the color directly opposite on the wheel, such as blue and orange. Together they create the strongest contrast.
Which match is the safest for beginners?
Analogous (neighbors) always looks calm and harmonious. Add one complementary color as a small accent for energy.
Why does the wheel change when I move the lightness slider?
The wheel shows every color at one chosen lightness. Changing lightness shows the lighter or darker version of the whole wheel.
Can I start from my own color code?
Yes. Type a HEX, RGB or HSL code (or even a name like coral) in the main color box and the wheel will move to it.