Color Wheel

Why this wheel is built on HSL

The color wheel here isn't a decorative graphic — it's a live map of the HSL color model, drawn pixel by pixel. Hue is the angle around the circle (0–360°), so red, green, and blue sit a third of the way apart. Saturation is the distance from the center: dead center is gray, the rim is fully saturated. Lightness is the separate slider below, from near-black to near-white. The reason designers reach for HSL over raw RGB is that it matches how we think about color — "the same blue but lighter" is one slider in HSL, but a tangle of three changing numbers in RGB.

Click anywhere on the wheel and the tool reads back the angle and radius of that point, converts them to a hue and saturation, and shows the resulting color in three notations at once: hex, RGB, and HSL. Because saturation falls off toward the middle, you can dial in muted, pastel tones by clicking nearer the center and bold, vivid ones by clicking near the edge.

What color harmony means, with the exact math

Harmonies are sets of colors whose hues sit at fixed angles around the wheel, which is why they look deliberately balanced rather than accidental. This tool keeps your chosen saturation and lightness constant and only rotates the hue, so every harmony color shares the same "weight" as your base. The four modes compute as follows:

Each offset is taken modulo 360°, so a hue that would exceed the circle simply wraps around. The swatches update the instant you switch modes or pick a new base color.

A worked example

Say you click the wheel and land on hue 210° (a sky blue) at 80% saturation and 50% lightness. In complementary mode the tool adds 180° to give 390° → 30° (mod 360), a warm orange — the textbook blue/orange pairing. Switch to triadic and you get 210°, 330° (a magenta-pink), and 90° (a yellow-green): three hues evenly spaced for a lively, balanced palette. Switch to analogous and the set becomes 180°, 210°, 240°, and 270° — neighboring cyans, blues, and violets that blend smoothly, ideal for a gentle gradient or a single-mood interface.

Exporting and using the palette

The Export CSS button copies your active harmony as CSS custom properties, like --color-1: #33aaee; through --color-4, wrapped in a :root { } block. Paste that into your stylesheet and reference any color elsewhere with var(--color-2). This is the modern way to centralize a design token system: change the value in one place and every element using the variable updates. You can also click any individual swatch to copy just that hex code to your clipboard.

Practical tips

• Use the 60-30-10 rule. Pick a harmony, then apply the dominant color to roughly 60% of the surface, a secondary to 30%, and an accent to the remaining 10%. Harmonies give you the hues; this rule gives you the proportions.
• Adjust lightness, not just hue. A complementary pair at the same lightness can vibrate uncomfortably. Drop one color's lightness to make text legible against the other.
• Analogous for backgrounds, complementary for calls to action. Cohesive analogous tones set a mood; a complementary accent makes a button leap out.
• Everything runs locally. The wheel is drawn and the palette computed entirely in your browser — no color data is sent anywhere.

Common mistakes

• Treating harmony as a guarantee of contrast. Two harmonious hues can still fail accessibility if their lightness is too close. Always verify text/background pairs against a contrast checker.
• Expecting paint-mixing results. This wheel uses HSL (light-based) geometry, so complements differ from the red-green-blue opposites you learned with pigments. That's correct for screens, not for mixing paint.
• Ignoring lightness extremes. At very high or very low lightness, different hues collapse toward white or black and stop looking distinct — keep mid-range lightness when you need the colors to read as separate.