Color Wheel
Click the wheel to pick a hue, adjust saturation and lightness, and explore color harmonies.
Selected Color
HEX#ff0000
RGBrgb(255, 0, 0)
HSLhsl(0, 100%, 50%)
Color Harmonies
Complementary
#00ffff
hsl(180, 100%, 50%)
Triadic
#00ff00
hsl(120, 100%, 50%)
#0000ff
hsl(240, 100%, 50%)
Analogous
#ff0080
hsl(330, 100%, 50%)
#ff8000
hsl(30, 100%, 50%)
Split-Complementary
#00ff80
hsl(150, 100%, 50%)
#0080ff
hsl(210, 100%, 50%)
Interactive Color Wheel
The color wheel uses a CSS conic-gradient to render the full hue spectrum. Clicking anywhere on the wheel calculates the hue angle using Math.atan2. Saturation and lightness are controlled independently with sliders. Color harmonies are calculated by rotating the selected hue by fixed angles: complementary (+180°), triadic (+120°, +240°), analogous (±30°), and split-complementary (+150°, +210°). All computations run entirely in your browser.
Private & free — this tool runs entirely in your browser.
Recommended: Kinsta — Fast managed hosting — up to $500 + 10% recurring.affiliate
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.