Color Wheel

How to use it

1. Click or drag inside the wheel: the angle sets the hue, the distance from the center sets the saturation.
2. Drag the lightness slider to brighten or darken the wheel and every swatch together.
3. Choose a scheme: complementary, triadic, analogous or split-complementary.
4. Click any swatch to copy its HEX value; the button beside the big tile copies the current color.

Common use cases

• Landing page palettes — build a hero, button and background set that stays in harmony.
• Chart and dashboard colors — pick a triadic set that reads clearly side by side.
• Brand accent checks — see a complementary accent next to a primary brand color.
• Teaching color theory — watch hue offsets move the swatches in real time.

Why it stays private

The wheel is drawn pixel by pixel on a canvas in this page and the palettes are plain arithmetic. Nothing is uploaded, and the tool works offline.

FAQ

Q: What color space is the wheel? A: HSL. The angle is hue, the distance from the center is saturation, and the slider is lightness. The HEX values are sRGB.

Q: Do palette colors share the lightness? A: Yes. A scheme only shifts hue, so the whole palette keeps the lightness you picked and stays balanced.

Q: Can I copy RGB or HSL strings? A: Swatches copy HEX only. If you need RGB or HSL notation, paste the HEX into the color converter tool.

Q: Why does the wheel edge fade out? A: Saturation reaches its maximum at the rim, and pixels past it stay transparent so the wheel keeps a round shape.