What this tool does
How the wheel works
How palette types are calculated
Features explained
Draggable wheel picker
Drag the marker around the wheel to change hue and saturation live. The palette recalculates on every move, so you can see how a combination shifts before settling on a color.
Hex input with validation
Type or paste a hex code directly (3 or 6 digits, with or without the #). An invalid value is flagged immediately instead of silently failing.
Hue / Saturation / Luminance sliders
For fine adjustments that are hard to do with a mouse on a small wheel, the edit panel exposes the same color as three separate sliders you can nudge one at a time.
Five palette types
Switch between complementary, monochromatic, analogous, triadic and tetradic without re-picking your base color — the tool reuses the same hue and just changes how it rotates around the wheel.
One-click copy
Click any swatch to copy its hex code, or use the buttons below the palette to copy every color at once as a plain hex list or as ready-to-paste CSS custom properties (--color-1, --color-2, and so on).
Every swatch is independently editable
The generated colors aren't locked to the formula. Drag any marker on the wheel, or hover a swatch and click the small adjust icon to open its own Hue/Saturation/Luminance sliders. Once you move a color, it stays where you put it instead of snapping back to the calculated position — only switching the palette type resets it.
Background that follows your color
The area behind the picker takes on a soft, muted tint of whatever base color is selected, so you get a rough sense of how the color reads on a larger surface, not just as a small swatch.
Download as an image
Beyond copying hex codes, the palette can be downloaded as a ready-made image card in PNG, JPG or SVG format — useful for sharing a palette outside a code editor, in a document or a design brief.
What can you use it for?
Choosing a website or app color scheme
Pick your primary brand color first, then generate a complementary or triadic set to use for buttons, links and accents.
Building a design system palette
Copy the palette as CSS variables and drop it straight into a stylesheet as a starting point for a theme.
Checking if two colors clash
Set one color as the base and see where the other one falls on the wheel relative to it — colors close together (small angle) are harder to tell apart, colors near-opposite create the most contrast.
Exploring shades and tints of one color
Switch to the monochromatic type to get a darker shade and a lighter tint of your exact hue, useful for hover states, borders or disabled variants of a single UI color.
Tool information
| Input | Hex color code (typed) or a click/drag on the wheel |
|---|---|
| Output | HEX codes and CSS custom properties (copied to clipboard), or a palette card downloaded as PNG, JPG or SVG |
| Palette types | Complementary, Monochromatic, Analogous, Triadic, Tetradic |
| Processing | Entirely in the browser — no upload, no account, no server round-trip |
| Color model | HSL (hue, saturation, lightness), converted to and from hex |
Benefits
- No account or sign-up needed — the wheel works the moment the page loads.
- Palette updates instantly as you drag, so you can compare options quickly.
- Copying as CSS variables saves you from manually renaming and reformatting hex codes.
- The math behind each palette type is fixed and consistent, so results are predictable once you understand the rule behind them.
Limitations
- The wheel itself only shows hue and saturation — lightness has to be adjusted separately with the slider.
- This tool generates palettes from color theory rules; it doesn't check contrast ratios or accessibility (WCAG) compliance.
- Copying to clipboard requires a browser that supports the Clipboard API; on very old browsers the copy buttons may not work.
- The downloaded PNG/JPG/SVG is a simple palette card (color blocks with hex labels) rather than a picture of the interactive wheel itself.
- Dragging a swatch marker only changes hue and saturation directly; its lightness carries over from the calculated value until adjusted with the Luminance slider.
Privacy
No color, hex code or palette you create is sent anywhere. All of the math runs locally in your browser tab, and closing or refreshing the page clears everything.
Data handling
This tool does not use cookies, does not store your palettes, and does not require login.
Tips
- If two colors in your palette feel too similar, try a wider palette type (triadic or tetradic instead of analogous).
- For UI work, keep saturation lower (40-60%) if you want a calmer palette instead of a bold one.
- Use the monochromatic type to build hover/active/disabled variants of a single brand color.
Frequently asked questions
Does this tool save my palettes?
No. Nothing is stored — if you refresh the page or close the tab, the palette is gone unless you've already copied it somewhere.
What's the difference between the wheel and the sliders?
The wheel controls hue and saturation together, based on where you click or drag. The sliders in the edit panel let you set hue, saturation and luminance individually, which is easier for precise values.
Can I use 3-digit hex codes like #1ec?
Yes, the hex field accepts both 3-digit and 6-digit hex codes, with or without the leading #.
Why does the wheel look full color, but my chosen color is muted?
The wheel background always shows full saturation at the edge as a visual reference. Your actual color's saturation is shown by how far its marker sits from the center, and its lightness is a separate value adjusted with the Luminance slider.
If I move one swatch, does it affect the others?
No. Moving or editing one swatch only changes that color. The other swatches stay on their calculated positions until you move them too, or until you change the palette type, which resets every manual adjustment.
What's the difference between the PNG/JPG and SVG downloads?
They show the same palette card. PNG and JPG are fixed-resolution images, while SVG stays sharp at any size and can be edited in a vector tool afterward.