Color Wheel
Interactive color wheel with drag-to-pick hue, 6 harmony rules, HEX/RGB/HSB/CMYK/LAB inputs, image palette extraction, and one-tap copy. Works offline.
About this tool
An interactive color wheel inspired by Adobe Color. Drag the marker around the wheel to pick a hue, fine-tune saturation and brightness with the sliders, and see harmony markers appear automatically for the selected rule. Six harmony modes: Complementary, Analogous, Triadic, Tetradic, Split-Complementary, and Monochromatic. Convert the picked color between HEX, RGB, HSB, CMYK, and LAB. Upload an image to extract a 6-color palette via k-means clustering. Save palettes locally, export as CSS, SCSS, JSON, or plain text. Every color value is one tap from the clipboard. Everything runs in your browser — no data leaves your device, and it works fully offline.
Details
- Category
- design
- Version
- 2.0.0
- Size
- 38 KB
- Updated
- Jun 2026
Frequently Asked Questions
How do I pick a color?
Drag the marker on the color wheel to pick a hue. The distance from the center controls saturation. Use the B and S sliders below the wheel to fine-tune brightness and saturation, or type a HEX value in the values card. The harmony markers update in real time as you change the base color.
What is the difference between the harmony rules?
Complementary pairs the base with its opposite hue (180°). Analogous uses neighboring hues (±30°/±60°). Triadic picks three evenly-spaced hues (120°). Tetradic (rectangle) uses four hues at 90° spacing. Split-Complementary uses the two hues adjacent to the complement (150° and 210°) for high contrast with less tension. Monochromatic keeps the same hue and varies only lightness.
What do the small dots on the wheel mean?
They mark the harmony colors for the current rule. Click any dot to jump the base color to that hue. The center of the wheel always shows the current base color as a preview.
How does the image palette extraction work?
Tap "Extract from image", pick any photo, and the tool runs a k-means clustering on the pixels (downscaled for speed). It returns the 6 most dominant colors, sorted by frequency. Tap any extracted swatch to set it as the new base color.
What color models are supported?
HEX, RGB, HSB, CMYK, and LAB. Switch the tabs above the value grid. Changing any numeric value updates the base color live, and you can copy the full formatted string (e.g. rgb(59, 130, 246)) with the copy button next to the input.
How do I save and export my palette?
Tap "Save" to store the current palette locally with a name. Open it again from the saved palettes list. Tap "Export" to copy as CSS variables, SCSS variables, JSON, or plain newline-separated hex. Every swatch in the palette is also one tap from the clipboard.
Is my data private?
Yes. Saved palettes live in localStorage on your device. Image extraction happens entirely in your browser via a canvas — the image is never uploaded. The tool works fully offline.