Drag anywhere on the wheel to pick a color.
Enter a valid HEX code - 3 or 6 digits.
Everything runs in your browser - no colors are ever uploaded
Drag anywhere on the wheel - hue and saturation update live, not a static reference image.
Complementary, analogous, triadic, split-complementary, tetradic and monochromatic - all drawn directly on the wheel.
Every base color comes with a 9-step tint-to-shade ramp, ready to copy alongside the harmony.
Click any HEX, RGB or HSL value - on the wheel, the harmony row or the shade ramp - copied instantly.
Copy CSS variables, SCSS, Tailwind config or JSON, or grab a shareable link that reproduces the exact wheel.
Type a HEX code, use the native color picker, or the eyedropper to sample any pixel on screen.
Focus the wheel and use arrow keys to move around it - no mouse required.
No sign-up, no watermark, use it as many times as you like.
Drag on the wheel, type a HEX code, use the native picker, or the eyedropper.
Switch between complementary, analogous, triadic and more - matching dots appear instantly on the wheel.
Click any swatch to copy it, or export the whole set to CSS, Tailwind, JSON or a shareable link.
A color wheel maps every hue around a circle so you can see at a glance which colors sit near, opposite or evenly spaced from each other - the basis for choosing colors that work well together.
The classic RYB wheel is a painting convention. Browsers, screens and CSS all work in RGB/HSL, so this wheel mirrors what a screen actually displays and the codes you copy match exactly what you see.
Each mode picks colors at a fixed angle from your base hue - complementary sits 180° away, triadic splits the wheel into three equal thirds, and so on. Switching modes moves the dots on the wheel instantly.
No. Every calculation happens locally in your browser. Nothing you pick or type is sent to a server.
Yes. Open the Export menu to copy CSS custom properties, SCSS variables, a Tailwind color config or raw JSON for the current base and harmony colors.
Yes. The base color, lightness and harmony mode are all encoded in the page URL, so copying the shareable link reproduces the exact same wheel for whoever opens it.