Color Wheel

Interactive color wheel with harmony visualization and accessible color suggestions.

Free & unlimitedWorks offline

Color harmony

Hue210°

Saturation70%

Lightness50%

Color values

HEX#2680d9

RGBrgb(38, 128, 217)

HSLhsl(210, 70%, 50%)

Harmony colors

All processing happens in your browser. No data is sent to any server.

About this tool

1
Select a base color
Click on the color wheel or enter a specific hex/RGB value to set your starting color.
2
Choose a harmony rule
Select a color harmony type - complementary, analogous, triadic, split-complementary, or tetradic.
3
Explore generated palettes
View the harmony colors displayed on the wheel with their hex codes, RGB, and HSL values.
4
Export your palette
Copy individual color values or export the entire palette as CSS variables, JSON, or a shareable link.

Start with analogous harmonies (neighboring colors) for a calm, cohesive feel, and complementary pairs for high-contrast, energetic designs.
Use the 60-30-10 rule: 60% dominant color, 30% secondary, and 10% accent for balanced compositions.
Adjust saturation and lightness after selecting a harmony to create tints and shades for a more versatile palette.
Test your palette on actual UI elements - colors that look great on a wheel may not work well for text and backgrounds.

Interactive HSL color wheel with click-to-select and drag support
Six harmony modes: complementary, analogous, triadic, split-complementary, tetradic, and monochromatic
Real-time palette preview with all color formats (hex, RGB, HSL)
Saturation and lightness sliders for fine-tuning each color
Export as CSS custom properties, Tailwind config, or JSON array

Build a cohesive color palette for a new brand identity or website design
Find accent colors that harmonize with an existing brand color
Create accessible color combinations by pairing harmony colors with contrast checking
Generate seasonal or themed palettes for marketing campaigns

There is no single best harmony. Analogous is great for subtle, professional designs. Complementary provides strong contrast for CTAs. Triadic offers variety while maintaining balance.

Most design systems use 3-5 core colors: a primary, secondary, accent, and 1-2 neutrals. Generate tints and shades of each for a complete system.

RGB defines colors by red, green, and blue light values. HSL uses hue (color), saturation (intensity), and lightness (brightness), making it more intuitive for picking and adjusting colors.