Base color → N rotated colors. Finer than complementary/triadic for color wheel design.
🎡 Cycle result Click to copy HEX
CSS variables

How to use

  1. Pick a base color.
  2. Set steps (2–24) and angle (10°–180°).
  3. Use presets for quick start.
  4. Click any color to copy HEX or export as CSS / JSON.

Key features

  • HSL hue rotation (preserves lightness & saturation)
  • 2–24 steps adjustable
  • 6 presets (complementary · triadic · tetradic · hexad · 12-wheel · 5-star)
  • CSS variables + JSON array export
  • One-click copy

Use cases

  • Design system colors — derive accent / secondary from main
  • Chart colors — 12-color wheel for data viz
  • Logo variations — seasonal color shifts
  • Fashion / interior moods — consistent hue family
  • Illustration — character & icon variants

vs color-harmony?

color-harmony generates standard schemes (complementary, triadic, tetradic) by fixed rules. color-cycler lets you tune steps and angle freely — 5, 7, 12 colors and non-standard combos. Designer's color wheel utility.

FAQ

Why HSL?

Intuitive hue rotation. OKLCH would also work; HSL is simpler here.

Non-standard like 14 steps?

Yes — 2 to 24, freely.

Why max 180°?

Beyond 180° wraps back to complementary, producing repeated colors.

Free?

Yes.