Pick a color, understand its relationships.
Drag inside the wheel, or use the arrow keys, to choose a hue and saturation. Adjust lightness with the slider. Switch between harmony types below to see which other colors pair with your pick — and why.
Color Wheel
Type a hex or RGB value, or use the eyedropper to sample any pixel on your screen (desktop Chrome or Edge only).
Screen picking needs desktop Chrome or Edge — not available on mobile, or in this browser
Each rule is a fixed pattern on the wheel — pick a base color and these are the others it recommends.
Checked against WCAG AA text-contrast guidelines.
How to use this tool in under a minute.
No account, no download — everything runs in your browser and nothing you pick is saved anywhere.
- 01
1. Pick a hue and saturation
Click or drag anywhere inside the wheel — or focus it and use the arrow keys (hold Shift for bigger steps). The angle sets the hue, the distance from center sets the saturation.
- 02
2. Adjust lightness
Use the slider under the wheel to move your color toward black or white without changing its hue or saturation.
- 03
3. Choose a harmony
Click through complementary, analogous, triadic, split-complementary, tetradic, or monochromatic to see which other colors the tool recommends alongside your pick — read what each one means on the Combinations page.
- 04
4. Check contrast
The contrast panel shows how your color reads against pure white and pure black, with a pass/fail against accessibility guidelines (WCAG AA) — useful if you're picking text or UI colors, not just art.
- 05
5. Copy a hex code
Click any swatch in the results to copy its hex code to your clipboard, ready to paste into design software, CSS, or anywhere else.
- 06
6. Go fullscreen
The expand icon opens the wheel in a larger, distraction-free view — useful on a big screen or when you want to focus.