Interactive Color Wheel
Drag the handle on the wheel to choose a base color and instantly build harmonious palettes you can copy or export.
Two hues directly opposite on the wheel — maximum contrast, strong accents.
Palette — click a swatch to copy its HEX code
All colors are computed locally in your browser — nothing is uploaded.
How it works
- Drag the large handle on the wheel to set your base hue and saturation — the smaller handles follow automatically.
- Pick a harmony rule (complementary, analogous, triadic, tetradic, split-complementary, or monochromatic) and adjust the lightness slider to tune the whole palette.
- Click any swatch to copy its HEX code, or export the full palette as CSS variables, JSON, or a PNG image.
Frequently asked questions
- How does a color wheel generate matching colors?
- The wheel arranges hues in a 360-degree circle, so geometric relationships between angles predict which colors work together. Complementary colors sit 180 degrees apart, triadic colors 120 degrees apart, and analogous colors are close neighbors. This tool applies those angle rules to your base color automatically.
- Which color harmony should I use for a website?
- Analogous and monochromatic schemes are the safest for interfaces because they stay calm and readable. Complementary and split-complementary work well when you need one strong accent color against a dominant hue. Triadic and tetradic palettes suit illustrations and branding where more variety is wanted, ideally with one color kept dominant.
- Are the colors I pick uploaded anywhere?
- No. The wheel is drawn on an HTML canvas and every calculation — harmony angles, lightness shifts, and file exports — runs entirely in your browser. Nothing is sent to a server, so you can use it for unreleased brand work without concern.
- What formats can I export the palette in?
- You can copy the palette as ready-to-paste CSS custom properties, copy it as JSON with the harmony name and HEX values, or download a PNG image of the swatches with their codes. Individual swatches copy their HEX value with a single click or tap.
- Why do the palette colors change when I move the lightness slider?
- Hue and saturation come from the position on the wheel, while lightness is the third HSL dimension and is controlled separately. The slider shifts the lightness of the whole palette at once, which keeps the harmony relationships intact while letting you preview darker or lighter versions of the same scheme.
About this tool
This interactive color wheel turns classic color theory into a practical picking tool. Drag the main handle anywhere on the wheel to set a base color: the angle around the circle controls hue and the distance from the center controls saturation. Choose one of six harmony rules — complementary, analogous, triadic, tetradic, split-complementary, or monochromatic — and companion handles snap to the mathematically related positions, producing a palette of three to five coordinated colors with HEX codes underneath.
Everything happens client-side. The wheel is rendered pixel by pixel on an HTML canvas using HSL-to-RGB conversion, and harmony positions are computed as fixed angle offsets from your base hue: 180 degrees for a complement, plus and minus 30 degrees for split-complementary accents, 120-degree steps for a triad. A separate lightness slider shifts the entire palette lighter or darker without changing the hue relationships, which is useful for checking how a scheme behaves in light and dark interfaces. No color data ever leaves your browser.
Typical uses include picking an accent color that genuinely contrasts with a brand hue, building a chart palette where series need to stay distinguishable, choosing paint or yarn combinations, and teaching color theory with a live visual. The one-line explanation shown for each harmony describes when that rule tends to work, so the tool doubles as a quick reference.
A practical tip: pick your palette at medium saturation first, then fine-tune. Fully saturated complementary pairs can vibrate against each other on screen, while slightly muted versions of the same hues read as intentional and polished. Use the Randomize button to explore starting points, then drag the base handle a few degrees at a time — small hue changes often matter more than large ones.