Color Wheel Generator
Drag anywhere on the wheel to pick a hue, fine-tune saturation and lightness with the sliders, and read off HEX, RGB, and HSL along with the complementary, analogous, triadic, and split-complementary colors for your pick.
Complementary
Analogous
Triadic
Split Complementary
How to use the color wheel
- Click or drag anywhere on the wheel to pick a hue — or focus it and use the left/right arrow keys.
- Adjust saturation and lightness with the sliders below the wheel.
- Read the HEX, RGB, and HSL values, and copy any of them with the copy icon.
- Scroll down to see the complementary, analogous, triadic, and split-complementary colors generated from your pick.
What the output means
The wheel encodes hue — the angle around the color circle, 0 to 360 degrees. Saturation and lightness are set with the sliders. Complementary is the color directly opposite on the wheel. Analogous colors sit 30 degrees to either side. Triadic colors are spaced 120 degrees apart. Split complementary uses the two colors adjacent to the true complement, for contrast that's a little softer.
Common use cases
Pick a starting hue for a design system, find a complementary accent color for a UI element, or explore how a color's relationships shift as you drag around the wheel.
Frequently asked questions
How do I select a hue?
Click or drag anywhere on the wheel, or focus it and use the left/right arrow keys. The angle around the wheel maps directly to the hue, 0 to 360 degrees.
What's the difference between this and the Color Harmony Generator?
This tool is built around picking a hue directly on the wheel and reading off HEX/RGB/HSL plus the four classic wheel relationships. The Color Harmony Generator focuses on building a full multi-color palette with suggested UI roles across seven harmony types.
Is my color choice saved anywhere?
No. Everything runs locally in your browser and nothing you pick is stored or transmitted.