Color Wheel
Pick a base color and generate complementary, analogous, triadic, and other color harmonies instantly.
Base Hue: 210°
Saturation: 70%
Lightness: 50%
Color Harmony
Color Wheel & Harmony Generator
Pick a base color and instantly see matching combinations using classic color theory rules — complementary, analogous, triadic, split-complementary, tetradic, and monochromatic. Click any swatch to copy its HEX code.
How to Use It
Drag the Hue slider (or the Saturation/Lightness sliders) to set your base color, then pick a harmony rule. The wheel marks each color's position and the strip below shows the resulting palette. Click a swatch to copy its HEX value to your clipboard.
Example
A base hue of 210° (a blue) with the Triadic rule produces three evenly-spaced hues at 210°, 330°, and 90° — giving you a vivid blue, pink, and green combination that reads as balanced rather than clashing.
Common Use Cases
- Choosing a primary/accent color pairing for a brand or UI.
- Building a balanced palette for illustrations or data visualizations.
- Learning color theory rules (complementary, triadic, etc.) interactively.
FAQs
What's the difference between complementary and analogous?
Complementary colors sit opposite each other on the wheel (high contrast, good for accents). Analogous colors sit close together (30° apart), producing a calmer, more harmonious look.
What does the monochromatic option do?
It keeps the same hue but varies the lightness, giving you a set of tints and shades of a single color — useful for shadows, hover states, or subtle UI variation.