Color Theme Generator (with Color Wheel)

Base Color

#0D65F2

H 217° · S 90% · L 50%

Lightness

50%

Hue

Saturation (%)

Scheme

Palette

Generated Colors

#0DF2E7

#0DB1F2

#0D65F2

#0D18F2

#4E0DF2

Export as CSS Variables

:root{
  --color-1: #0df2e7;
  --color-2: #0db1f2;
  --color-3: #0d65f2;
  --color-4: #0d18f2;
  --color-5: #4e0df2;
}

Export as JSON

[
  "#0df2e7",
  "#0db1f2",
  "#0d65f2",
  "#0d18f2",
  "#4e0df2"
]

About this Tool

Design color themes interactively with a color wheel. Pick your base hue and saturation on the wheel, set lightness, choose a scheme (monochromatic, analogous, complementary, split-complementary, triad, tetrad), and export CSS variables or JSON.

The wheel maps pointer angle to hue (0–360°) and distance from center to saturation (0–100%). Generated palettes are computed by rotating the hue by fixed offsets for each scheme, with optional lightness variants to provide balance.

Drag on the color wheel to select the hue (angle) and saturation (distance).
Use the Lightness slider to adjust perceived brightness.
Select a scheme from the dropdown to generate related colors.
Copy individual HEX values, or export the full set as CSS variables or JSON.

Build a UI theme quickly by selecting a base color and triad scheme for accent pairs.
Create brand-compliant color sets by starting from the primary brand hue and using analogous variations.
Export CSS variables to wire a theme into a design system.

Interactive color wheel for hue and saturation.
Scheme presets: monochromatic, analogous, complementary, split-complementary, triad, tetrad.
Live swatch preview grid.
One-click export to CSS variables and JSON.
All computations in-browser.

Color harmonies are based on angular relationships on the color wheel. In HSL space, rotating hue while maintaining saturation/lightness approximates classic design relationships. Practical palettes also vary lightness to provide usable contrast.

Can I export more than 5 colors?

This version outputs 5 swatches per scheme; you can regenerate new sets or extend manually.

Does it support alpha?

This tool focuses on opaque HEX outputs; use the Color Code Converter for alpha.

Is the color wheel physically accurate?

It uses a practical HSL-based approach suitable for UI work; not a perceptually uniform space.

All calculations and data processing for this tool are performed locally in your browser. We do not send any of your data to our servers, ensuring your information remains private and secure.