Color Wheel

Create color themes on an interactive wheel with Adobe-style harmony rules.

The Color Wheel builds five-color themes on an interactive hue wheel. Choose a harmony rule, drag the handles to rotate the theme, adjust global brightness, and edit each color in HEX, RGB or HSV.

Mode

Brightness80%

Active color1

RGB

HSV

Output

{
  "mode": "analogous",
  "brightness": 80,
  "colors": [
    "#cc1f3c",
    "#cc581f",
    "#cc1f92",
    "#ccaf1f",
    "#af1fcc"
  ]
}

Output

--theme-1: #cc1f3c;
--theme-2: #cc581f;
--theme-3: #cc1f92;
--theme-4: #ccaf1f;
--theme-5: #af1fcc;

How to use

Choose a harmony rule such as analogous, triad or custom.
Drag a wheel handle to rotate the theme or move one color in custom mode.
Adjust brightness, lock colors you want to keep, and copy the JSON or CSS variables.

Frequently asked questions

How do the harmony rules work?

Each rule keeps the five handles at fixed hue angles; dragging a handle rotates the whole group around that color. Custom mode lets every handle move independently.

How does the brightness slider behave?

It updates the value of all unlocked colors at once. Editing one swatch changes only that color until you move the brightness slider again.