Complementary
Colors directly opposite on the wheel. High contrast — ideal for accents on neutral UI.
Harmony · visual picker
Color Wheel
Professional color studio with interactive harmonies, HSL precision, variations, conversion, contrast checks, and vision simulation — all in one place.
- Live harmony diagrams
- Copy-ready HEX
- WCAG contrast
- Vision simulation
Inner · saturation
Ring · lightness
Learn color theory
Interactive diagrams below mirror the studio wheel — click any marker to try harmonies in real time.
Intro to color theory
Color theory explains how hues relate on the wheel. Our studio turns those relationships into copy-ready palettes you can use immediately.
The wheel arranges hues in a circle so you can see primary, secondary, and tertiary relationships at a glance.
When a design needs colors that feel cohesive, harmonies give you balanced starting points.
Using the studio
- Pick a scheme with the harmony pills under the wheel.
- Drag the inner disk for hue and saturation; use the outer ring for lightness.
- Fine-tune with HSL sliders or paste a HEX code in the hero bar.
- Copy swatches from the Harmonies tab or export formats in Convert.
Color harmonies
Each harmony places markers on the wheel. Select any marker or diagram to update the studio.
Split-complementary
A base color plus the two neighbors of its complement. Softer than pure complementary pairs.
Analogous
Adjacent hues on the wheel. Calm, cohesive palettes common in product UI.
Triadic
Three hues 120° apart. Energetic — let one color dominate.
Tetradic
Two complementary pairs. Rich starting point; refine with shades and tints.
Square
Four hues 90° apart. Strong foundation for brand and marketing palettes.
Shades, tints & tones
Variations add black (shade), white (tint), or gray (tone) to your base color — open the Variations tab for live grids.
Shades
Darker variants for hovers and headers.
Tints
Lighter fills for cards and modals.
Tones
Muted variants for secondary text blocks.
Primary, secondary & tertiary
Twelve wheel segments group into 3 primaries, 3 secondaries, and 6 tertiaries on screen (RGB primaries).
- Primary — red, green, blue (light).
- Secondary — cyan, magenta, yellow mixes.
- Tertiary — blends between adjacent primaries and secondaries.
Build your palette
Export harmonies to the palette generator, refine in the color picker, and validate contrast in our contrast checker.
Frequently asked questions
Quick answers about the wheel, harmonies, and accessibility.
How do I change lightness?
Drag on the outer ring around the color disk. The inner area sets hue and saturation; the ring adjusts lightness.
Can I enter HEX without clicking the wheel?
Yes — type or paste into the HEX field. The wheel and palette update to match.
Why does the wheel look soft on a retina display?
The canvas is 440×440 logical pixels with retina scaling and scales with CSS for sharp rendering on most screens.
Are these harmonies perceptually uniform?
They use HSL geometry for speed, not OKLCH. For even lightness steps, export to the CSS variables tool.
Does this replace Adobe Color?
No — it is a lightweight, privacy-friendly snapshot for quick HEX handoff inside ChromaXP.
Which harmony works best for SaaS dashboards?
Analogous or split-complementary usually calmer than triadic. Save triadic for marketing heroes.