Color Wheel
Find complementary, triadic and other harmonies on a colour wheel.
Colours That Belong Together
Pick a base colour on the wheel or with the colour picker, then choose a harmony — the classic relationships designers and painters use to build a palette. Complementary colours sit opposite each other for maximum contrast; analogous colours sit side by side for calm, cohesive schemes; triadic, split-complementary, tetradic and square harmonies balance three or four hues.
Choose the painter’s red–yellow–blue wheel taught in art school, where red is opposite green, or the screen’s red–green–blue wheel that monitors use, where red is opposite cyan. Every colour shows its hex, RGB and HSL values; click to copy, export CSS variables, JSON or SCSS, or download the palette as an image.
Key features
- Seven harmonies, including monochromatic.
- Painter’s (RYB) or screen (RGB) wheel.
- Drag on the wheel or use the keyboard.
- Hex, RGB and HSL for every swatch.
- CSS, JSON, SCSS and PNG export.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Color Wheel
- Choose a base colour
Drag on the wheel or use the picker. - Pick a harmony
Markers on the wheel show the related colours. - Adjust lightness
The same harmony, lighter or darker. - Copy or export
Click a swatch for its hex, or export the palette.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What are complementary colours?
Colours opposite each other on the colour wheel. Side by side they create the strongest contrast, which is why they are used for calls to action and highlights.
Why are there two kinds of colour wheel?
The traditional painter’s wheel is based on red, yellow and blue pigments; the RGB wheel is based on how screens mix light. They place hues differently, so complements differ: red’s complement is green on the painter’s wheel and cyan on the RGB wheel.
What is a triadic colour scheme?
Three colours evenly spaced around the wheel, 120° apart. It is vibrant but balanced; one colour usually dominates and the other two accent.
How do I make a harmony work in a design?
Use the 60-30-10 rule: one colour for most of the area, a second for a third of it, and the third as a small accent. Check text contrast with the Colour Contrast Checker.
Can I export Tailwind-style shades?
For a full 50–950 scale of one colour, use the Color Shades Generator after picking your harmony here.