Interactive HEX Color Wheel & Harmony Generator
Drag harmonic color pins across the 360-degree chromatic spectrum to calculate mathematically balanced color schemes. Switch between triadic, complementary, analogous, and tetradic color systems with instant HEX, RGB, and HSL code exports.
Harmonic Swatch Palette
Click any card to copy HEXExport Harmonic Tokens
// Calculating harmony code...The Science of the Hex Color Wheel & Chromatic Harmonies
1. Polar Coordinates on the Hex Color Wheel
A digital hex color wheel maps the HSL (Hue, Saturation, Lightness) cylindrical color space into a 2D polar coordinate disk:
- Angle (\(\theta\)): Represents the Hue from 0° to 360° (0° = Pure Red, 60° = Yellow, 120° = Green, 180° = Cyan, 240° = Blue, 300° = Magenta).
- Radius (\(r\)): Represents the Saturation from 0% at the center (achromatic white/gray) to 100% at the outer circumference (pure vibrant chroma).
- Lightness Slider: Shifts the luminance plane from dark shades (\(L < 50\%\)) to bright pastel tints (\(L > 50\%\)).
2. The 60-30-10 UI Balance Framework
Creating beautiful digital products doesn't mean spreading your harmonic colors equally. Interior architects and modern UI designers use the 60-30-10 rule:
- 60% Dominant Base: Typically your neutral canvas (clean slate, dark obsidian, or soft eggshell).
- 30% Secondary Brand Hue: Used for cards, navigation sidebars, borders, and secondary buttons.
- 10% Harmonic Accent: Your opposite complement or high-contrast triad hue used exclusively for primary CTA buttons, badges, and notification alerts.
The 6 Core Color Harmony Formulations Explained
Complementary (180°)
Positions two colors directly opposite each other on the 360° circle. Offers maximum simultaneous contrast and energy. Perfect for drawing immediate attention to hero CTAs.
Triadic (120° Spacing)
Forms an equilateral triangle with 3 evenly spaced hues. Triadic schemes feel balanced, dynamic, and playful, even when using pale tints or muted tones.
Analogous (±30° Spacing)
Selects hues sitting adjacent to each other on the wheel. Mimics serene color gradients found in nature (e.g. ocean blues and cyans, or sunset oranges and ambers).
Split Complementary
Uses the base hue plus the two colors flanking its direct complement (150° and 210°). Delivers high contrast like a complementary scheme but with significantly less visual vibration.
Tetradic / Square (90°)
Combines four hues spaced 90° apart on the circle (two complementary pairs). Provides the richest variety of color options for complex dashboards and multi-category data visualizations.
Monochromatic
Maintains a single fixed hue while altering saturation and lightness. Creates cohesive, sophisticated, and guaranteed accessible interfaces with zero color clashing.
Frequently Asked Questions
How does a digital Hex Color Wheel differ from a traditional RYB painter's wheel?
Traditional painters use the historical RYB (Red, Yellow, Blue) subtractive pigment model, where the opposite of red is green. Digital screens use the RGB/HSL (Red, Green, Blue) additive light model, where the exact optical complement of red is cyan (0° vs 180°), and the complement of blue is yellow. Pikka's hex color wheel is calculated mathematically for screens, OLED displays, and web design.
Can I input an existing HEX code to find its harmonies?
Yes! Type or paste any 6-digit HEX color into the Base Anchor Color input field. The wheel pins will immediately re-orient to that color's exact angle and saturation, generating its complementary, triadic, or analogous counterparts instantly.
How do I ensure these harmonic colors pass WCAG contrast guidelines?
When pairing colors from the wheel as foreground text and background surfaces, always verify that the contrast ratio is at least 4.5:1 for normal text and 3:1 for large text or icons. You can test your generated tokens directly inside our built-in Pikka Web Studio WCAG contrast checker.
More Color & Creator Tools
Expand your harmonic colors into balanced 11-step 50–950 Tailwind color scales.
Convert your wheel hex codes into CSS RGBA with opacity slider and checkerboard preview.
Extract palettes and hex values directly from photos and UI screenshots.