Color Wheel
Interactive HSL color wheel with harmony suggestions and palette export.
About this tool
An interactive canvas-based HSL color wheel that lets you click anywhere to select a color. The selected color is immediately shown with its hex, RGB, and HSL values. Four harmony modes — Complementary, Triadic, Tetradic, and Analogous — automatically calculate related colors to form a balanced palette. Swatches for each harmony color are displayed with their hex codes. Export your entire palette as CSS custom properties (variables) with one click. Useful for designers choosing color schemes, developers implementing design tokens, and anyone exploring color relationships.
How to use
- 1 Click anywhere on the color wheel to select a hue and saturation.
- 2 Adjust the lightness slider below the wheel to change brightness.
- 3 View the selected color's hex, RGB, and HSL values.
- 4 Choose a harmony mode: Complementary, Triadic, Tetradic, or Analogous.
- 5 Swatches for the harmony colors appear with their hex codes.
- 6 Click Export CSS to copy the palette as CSS custom properties.
Frequently Asked Questions
Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.
Check WCAG 2.1 contrast ratios for foreground/background color pairs and get pass/fail results instantly.
Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.
Create beautiful multi-stop CSS gradients visually with drag-and-drop stops.
Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.