Color Wheel & Color Theory Guide
A short, practical primer on how the color wheel works and how to turn it into palettes you can actually ship. When you're ready, jump into the generator.
What the color wheel actually is
The color wheel is a circular arrangement of hues. Reds sit near 0°, yellows near 60°, greens near 120°, cyans near 180°, blues near 240°, and magentas near 300°. Because every hue has a precise angle, you can describe palettes as mathematical relationships rather than guesses — and that's exactly what palette generators do under the hood.
The six harmonies worth knowing
Each harmony is a rule for rotating around the wheel. Pick the rule that matches the mood you want.
| Harmony | Rotation | Best for |
|---|---|---|
| Complementary | 180° | High-contrast accents, CTAs |
| Analogous | ±30° | Calm backgrounds, editorial |
| Triadic | 120° | Balanced, vivid systems |
| Split-complementary | 180° ± 30° | Softer contrast |
| Tetradic | 90° | Rich, multi-category UIs |
| Monochromatic | 0° | Minimal, refined brands |
Want to see these applied to a real palette? Generate one in PalettePreview and tweak the base hue to watch each harmony shift.
HSL is the designer's color model
RGB and HEX describe colors in terms a screen understands. HSL — hue, saturation, lightness — describes them the way a designer thinks. Rotating the hue picks a new color. Dropping the lightness creates a shade. Lowering saturation creates a tone. Most modern palette tools, including PalettePreview, build harmonies by rotating hue in HSL space, then convert to HEX at the end.
Building accessible palettes
A beautiful palette that fails contrast is a broken palette. Aim for WCAG AA: 4.5:1 contrast for body text, 3:1 for large text and UI elements. If a pairing fails, change the lightness rather than the hue — you'll keep the brand feel while making the text legible.
Frequently asked questions
What is a color wheel?
A color wheel arranges hues around a circle so you can see relationships between them. Designers use it to build harmonies — complementary, analogous, triadic, and more — by picking colors at specific angles around the wheel.
What are complementary colors?
Complementary colors sit opposite each other on the wheel (e.g. blue and orange). They produce maximum contrast and a vibrant look, which is useful for calls-to-action and accent elements.
What is an analogous palette?
Analogous palettes use three colors next to each other on the wheel. They feel calm and cohesive, making them great for backgrounds, brand systems, and editorial layouts.
When should I use a triadic palette?
Triadic palettes pick three hues evenly spaced around the wheel. They stay vivid and balanced — good for playful brands, illustrations, and dashboards where each color represents a category.
What's the difference between HSL and RGB?
RGB describes a color by mixing red, green, and blue light. HSL describes it by hue (position on the wheel), saturation (intensity), and lightness. HSL is easier to reason about when building palettes because rotating the hue gives you harmonies directly.
How do I pick accessible color combinations?
Check contrast between text and background against WCAG ratios — 4.5:1 for body text, 3:1 for large text. Adjust lightness rather than hue when a pairing fails, and verify the final palette with a contrast checker before shipping.
Try the harmonies on a real palette
Pick a base color in PalettePreview and switch between complementary, analogous, and triadic in one click.
Open the generator