Interactive color wheel with a lightness ring, locked harmony chords, and copy-ready palettes — complementary, analogous, triadic, tetradic, square, and more.
💡 Drag the inner disc for Hue & Saturation · Drag the outer ring for Lightness.
#e21daa
Contrast 4.2:1
#e21d48
Contrast 4.7:1
#e2551d
Contrast 3.8:1
Tints
Lightness scale with white
Shades
Depth scale with black
Tones
Desaturated with grey
Rotate through the 360° spectrum. Combine high-contrast complementary opposites, balanced triadic triads, or comforting analogous chords.
Maximum contrast pair. Perfect for eye-catching hero CTA buttons, notification badges, and high-impact accents.
Adjacent hues sharing undertones. Creates tranquil, serene, and naturally cohesive user interfaces.
Equilateral chromatic triangle. Balances high energy with geometric harmony when one hue leads.
Base hue plus two neighbors of its complement. High vibrancy with less eye strain and visual tension.
Four-color geometric schemas. Provides rich palette variety for complex infographics and design systems.
Lightness and saturation scales. The secret to building full accessible UI surfaces, borders, and typography.
12 Canonical Wheel Hues (Click to Seed)
How to use this tool
The wheel is for relationships, not for picking a random pretty hex. Harmony modes lock a chord so you can rotate a whole palette without breaking the structure.
Wheel tools that only show a rainbow teach hue but not product roles. Ours keeps the chord together so dashboards stay coherent.
Read next: Color theory basics for product designers
A LITTLE MORE CLARITY
Need a reference? Browse the HEX and RGB color code chart. Looking for more? Browse Our Tools.