Color Wheel
An interactive color wheel built on real color theory. Drag the base marker and watch complementary, triadic or any of 8 harmony rules rotate live around it. Lock colors, fine-tune each one by hand, and export straight to CSS, SCSS, Tailwind or JSON.
:root {
--base: #2D64D2;
--harmony-1: #D22D64;
--harmony-2: #64D22D;
}How to Use the Color Wheel
Features
A Wheel You Can Actually Feel, Not Just Read About
Colour theory terms like "split-complementary" or "triadic" are easy to define and hard to actually picture — a static diagram in an article doesn't show you what happens as the base colour shifts. This tool is built so you learn by dragging: pick a harmony rule, grab the base marker, and move it anywhere on the wheel. The other markers rotate with it instantly, so the relationship stops being an abstract rule and becomes something you can see change in real time.
Underneath, the wheel itself is a genuine Hue × Saturation disc rendered pixel by pixel — angle maps to hue, distance from the centre maps to saturation — the same model professional colour tools like Adobe Color use, not a CSS gradient standing in for one. That accuracy matters once you start relying on exact positions to judge how close two hues really are.
Eight Harmony Rules, One Wheel
Complementary places a single marker exactly opposite the base for maximum contrast — bold, high-energy pairings. Split-Complementary softens that same contrast by using two hues near the opposite point instead of one, keeping the punch without the harshness. Analogous stays close to the base hue for a calm, cohesive feel, while Triadic, Tetradic and Square space three or four hues evenly around the wheel for balanced variety without any single colour dominating.
Compound blends an analogous pair with a complementary accent — a practical middle ground when pure complementary feels too aggressive but analogous feels too flat. Monochromatic drops hue variation entirely and instead hands you a full lightness ladder of one colour, which is exactly what the wheel switches to showing once you select it — a single marker plus the shade range below.
Drag the Base, Lock the Rest, Fine-Tune What's Left
Every non-base marker is calculated as a fixed angular offset from the base — drag the base anywhere and the whole shape moves as one unit, rotating and rescaling around it. That's the fastest way to audition dozens of variations of the same harmony rule in seconds. Once one variation looks right, lock the colours you want to keep — a locked marker ignores both the base drag and the Randomize shortcut, so you can keep adjusting everything else around it without losing what's already working.
You're not limited to moving the whole shape together, either — click and drag any individual marker and it moves on its own, breaking from the rule intentionally. That single action also locks it automatically, the same way clicking a marker to open its Hue/Saturation/Lightness editor does. If you already have an exact brand colour to start from, type its HEX code into the base field, or grab it directly from a logo with the Color Picker or Color Extractor first.
Who Actually Uses a Color Wheel
Design students learning colour theory for the first time — seeing "triadic" rotate live around a dragged base teaches the relationship faster than any textbook diagram.
UI and brand designers exploring accent colour options against a fixed primary — lock the primary, then drag through harmony rules to audition supporting colours quickly.
Illustrators and hobbyist artists picking a palette for a piece and wanting to understand why a combination works, not just accept a pre-made palette without knowing the logic behind it.
Front-end developers who want a colour system with an actual theoretical basis before it goes into a CSS or Tailwind config, rather than picking hex codes by eye.
From Learning a Rule to Shipping a Palette
Exploring color theory: switch between all 8 harmony rules on the same base colour to see how differently each one distributes hue — a fast, hands-on way to internalise what each term actually means.
Picking an accent for an existing brand color: type your brand's HEX into the base field, lock it, then cycle through Complementary, Split-Complementary and Triadic to compare accent options side by side before committing.
Building a UI state system: use the Tints & Shades ladder on your primary colour to generate consistent hover, active and disabled states that stay recognisably the same hue.
Handing off to a developer: once a harmony feels right, switch the export tab to CSS or Tailwind and copy the exact values — no manual re-entry or eyeballing hex codes off a screenshot.
Nothing Leaves Your Browser
The wheel itself, every harmony calculation, the contrast checks, the PNG export, and any wheel you save all run locally using plain JavaScript, Canvas, and your browser's own storage. There's no upload and no server round-trip between dragging a marker and seeing the result — every colour updates instantly, which matters when you're comparing several harmony rules back to back on the same base colour.
Getting the Most Out of the Wheel
- Start with your fixed color, not a random one. If you already have a brand or primary colour, type it into the base field first — every harmony rule builds around it instead of replacing it.
- Compare rules on the same base before picking one. Switch between Triadic, Split-Complementary and Compound without touching the base colour to see which distribution actually fits your project.
- Lock before you fine-tune. Locking a marker before opening its editor prevents an accidental Randomize or base-drag from undoing an adjustment mid-edit.
- Use Monochromatic for interface states, not for a whole brand palette. A single-hue ladder is ideal for hover/active/disabled states; it usually reads as flat for anything meant to stand out.
- Check contrast before choosing text colors. The ratio next to each colour is measured against your base — useful before placing one harmony colour as text on the other.
- Need a finished palette fast instead of exploring? The Color Palette Generator applies the same harmony logic in one click, with presets and favourites built in.
When the Wheel Isn't Doing What You Expect
Dragging the base doesn't seem to move a colour I wanted to keep. Check whether that marker is locked — locked markers deliberately ignore base drags. Unlock it first if you want it to follow again.
All my markers landed in almost the same spot. This happens with Analogous or Split-Complementary on a base with very low saturation, where hue differences are harder to see visually near the centre of the wheel — try increasing saturation on the base first.
The wheel looks slightly soft at its outer edge. That's intentional one-pixel anti-aliasing on the disc's edge, not a rendering error — it prevents a harsh jagged circle boundary.
My saved wheel loaded with a different lightness than I remember. Saved wheels store the harmony rule and each colour's hue/saturation/lightness at save time — if you fine-tuned a marker's lightness after the last save, save again to capture the update.
Where This Tool Stops
Don't treat the contrast figures as a full accessibility sign-off — they check each colour only against your base, not every real pairing in your finished layout. Cross-check final choices with the Color Converter and a proper accessibility pass.
Don't expect exact print or Pantone matching — everything here works in screen colour space (HSL/RGB); ink and paper reproduction depends on factors this tool has no way to account for.
Don't use it to pull colours out of an existing photo or logo — that's the Color Extractor's job; this tool generates new colours from theory, not from pixels you already have.