A color wheel arranges hues in a circle in spectral order — red through yellow, green, blue, and back to red. Colors that harmonize sit in predictable geometric positions on it. On this page, drag anywhere on the wheel (or type a hex code) to set your base color, and all six classic harmonies are computed instantly with copyable hex codes.

Complementary colors sit directly opposite each other — on this wheel red pairs with cyan, green with magenta and blue with yellow. Because they are as different in hue as two colors can be, they create maximum contrast and vibrancy. Designers usually let one color dominate and use its complement sparingly for accents and calls to action.

Triadic uses three colors spaced 120 degrees apart, giving a vivid but balanced trio. Tetradic (rectangle) uses four colors as two complementary pairs spaced 60 degrees apart, offering the most variety but the hardest balance. Square also uses four colors but spaces them evenly at 90 degrees, which splits warm and cool hues more evenly.

Start from a color you already have — type its hex code into the wheel. For a safe, professional look use the analogous scheme; for a bold, high-contrast look use complementary or split-complementary. Each scheme on this page includes a small sample interface so you can judge how the combination feels in a real layout before committing.

Yes. The wheel controls hue (around the circle) and saturation (distance from the center), and a separate slider controls lightness. Harmonies preserve your chosen saturation and lightness while rotating the hue, so a soft pastel base produces soft pastel harmonies and a deep base produces deep ones.

Color Wheel does not take a file. It works from the base colour you pick on the wheel. If nothing is generated, check that the fields on the page are filled in and, where a link is needed, that the whole link was pasted.

Yes — the default look is deliberately obvious so you can see what the tool does, and most photos read better well below it. If the page has a strength or intensity slider, bring it down until the effect looks like a decision rather than a filter; if it has only style choices or an instruction box, pick a milder style or ask for a subtler look and generate again. Compare against your original before you download.

Color Wheel shows its result on the page. Standard use does not require signup; this workflow does not offer a file download. Published processing allowances and file limits still apply.

No — Color Wheel runs in the browser on desktop and phone. There is nothing to install, no trial to start, and no license to buy before you can see whether it does what you need. Try it on the file you are actually stuck with rather than a sample.

The wheel uses the screen hue circle behind CSS and design tools, not the red, yellow and blue wheel used in painting. On it, 180 degrees from pure red is cyan and from pure blue is yellow. Blues that sit between blue and cyan, such as #3B82F6, land on orange.

This wheel separates Tetradic, a rectangle with hues at 60, 180 and 240 degrees, from Square, which uses 90, 180 and 270. The Color Picker tool has one Tetradic set that uses the 90-degree spacing, which matches Square here. Use the scheme name on the page you are working in.

Harmonies turn the hue and keep saturation and lightness. At 0 percent saturation, or at lightness 0 or 100, hue has no visible effect, so every partner comes out as the same gray, black or white. Raise the saturation and move lightness away from the ends to see the scheme.

The wheel stores colors as whole-number hue, saturation and lightness, so a typed HEX code is rounded to the nearest step. #3B82F6 appears as #3C83F6, one step away in two channels. Treat the partners as accurate to that rounding and keep your original code for exact use.

The wheel has no export and does not remember colors, so copy the HEX codes you need before you leave. For PNG, CSS variables or JSON files, use the Color Palette Generator, and for dominant colors from an image, use the Color Picker.