Interactive Color Wheel & Harmony Studio

Color harmonies are calculated using geometric angular offsets along the 360-degree chromatic wheel in polar cylindrical color space (where H represents the Hue angle from 0° to 360°, S represents Saturation, and L represents Lightness):

• Complementary (180° inversion): H_comp = (H + 180°) mod 360°. Positioned directly opposite on the wheel, this pair creates maximum visual contrast and energetic tension.
• Split-Complementary (150° and 210°): H_split1 = (H + 150°) mod 360° and H_split2 = (H + 210°) mod 360°. Uses the two hues flanking the complement to reduce optical vibration while preserving vibrant contrast.
• Triadic (120° equilateral triangle): H_triad = (H ± 120°) mod 360°. Places three equidistant hues on the wheel for dynamic, multi-accent balance.
• Tetradic / Rectangle (90° and 180° dual pairs): H_tetra = (H + 60°, H + 180°, H + 240°) mod 360° or Square (H + 90°, H + 180°, H + 270°) mod 360°. Forms two complementary pairs for rich chromatic palettes.
• Analogous (±30° neighboring chords): H_analog = (H ± 30°) mod 360°. Uses neighboring hues sharing a common base undertone to create calm, cohesive, and low-fatigue interfaces.

The 60-30-10 rule is a timeless visual proportion guideline adapted from classical interior decorating to digital product design to prevent visual clutter and establish intentional visual hierarchy:

• 60% Dominant Base (Canvas & Space): Covers the primary background, body canvas, and generous negative white/dark space. In modern UI, this is typically an ultra-light neutral (e.g. clean white or soft zinc) in light mode or deep dark obsidian in dark mode, providing breathing room.
• 30% Secondary Structure (Cards & Content): Applied to structural components such as navigation bars, sidebars, content cards, modal windows, table headers, and secondary typography. This defines the page layout and readable layout containers.
• 10% Accent Color (Action & Interaction): Reserved strictly for primary focal points—including primary Call-to-Action (CTA) buttons, selected tab indicators, notification badges, progress bars, and active states. Limiting this high-chroma color to 10% ensures instant eye-tracking toward conversion goals without overwhelming the user.

Real Colour Picker includes an interactive 60-30-10 preview bar and live UI mockup directly below the color wheel, letting you test how your selected harmony maps to real-world interface cards and buttons.

To find the complementary color to any HEX code:

1. Input HEX Code into the Wheel: Enter your 6-digit hex code (such as #3B82F6) into the Base Color input field on the Color Wheel.
2. Mathematical Hue Inversion (180°): The engine converts the HEX code into polar HSL coordinates and calculates the exact 180° chromatic opposite: H_complement = (H_base + 180°) mod 360° while preserving the original Saturation and Lightness values.
3. Instant Output: The complementary swatch immediately renders opposite the base marker on the wheel, displaying its exact HEX code, RGB channels, and OKLCH coordinates.
4. Bitwise RGB Alternative: In pure additive RGB color space, a direct mathematical inversion can also be calculated by subtracting each color channel from 255: (255 - R, 255 - G, 255 - B). However, the color wheel's HSL/OKLCH inversion is preferred in design because it maintains balanced perceptual luminance and saturation.

Live WCAG contrast checking is integrated directly into the color wheel because chromatic harmony does not guarantee accessibility. Two colors that look aesthetically pleasing together on a color wheel often fail basic readability requirements:

• Preventing Inaccessible Pairings: For instance, pairing a vibrant yellow (Hue ~60°) with pure white or light grey fails W3C contrast standards with a dangerously low ratio under 1.5:1, making text unreadable for users with low vision.
• Real-Time WCAG 2.2 Compliance: As you spin the wheel or adjust lightness, the built-in contrast matrix instantly computes relative luminance and tests foreground/background combinations against official WCAG 2.2 Level AA (4.5:1 for normal text, 3:1 for large text) and Level AAA (7:1) criteria.
• APCA & Color Vision Deficiency (CVD): The studio simultaneously evaluates Advanced Perceptual Contrast Algorithm (APCA) readability scores and simulates color vision deficiencies (Protanopia, Deuteranopia, and Tritanopia) so you can verify that your complementary or triadic accents remain distinguishable to colorblind users.

The 60-30-10 rule for painting is a foundational interior design and fine art principle used to create balanced, visually comfortable room palettes and canvas compositions:

• 60% Dominant Wall Paint: Represents the primary wall color of the room (or background wash in a canvas painting). This is usually a calming neutral, warm off-white, or muted tone that anchors the room and provides a cohesive backdrop.
• 30% Secondary Paint & Large Furnishings: Applied to accent walls, painted trim, interior doors, drapery, cabinetry, or major upholstery. This color supports the dominant wall color while introducing depth, contrast, and personality.
• 10% Accent Color & Focal Points: Reserved for bold, saturated pops of color—such as a painted front door, decorative throw pillows, artwork, ceramics, and architectural details. It draws the eye and injects energy without visually overwhelming the space.

When using an interactive color wheel for room painting, selecting an analogous harmony creates a serene, spa-like environment, while a complementary or split-complementary harmony provides dynamic, high-energy contrast.

The 70/20/10 color rule is an alternative design proportion ratio favored in modern minimalist web design, brand identity systems, and presentation decks where designers require greater negative space and subtler contrast than the traditional 60-30-10 rule:

• 70% Foundation Base: Comprises 70% of the visual space, utilizing an expansive, neutral base color (such as soft whites, subtle warm greys, or muted charcoal). This creates an airy, uncluttered environment with maximal whitespace.
• 20% Secondary Supporting Hue: Accounts for 20% of the composition, applied to secondary content cards, typography headers, borders, and structured UI elements. It provides clean visual definition without competing for attention.
• 10% Vibrant Action Accent: Devoted entirely to the primary focal point, high-priority Call-to-Action button, or key metric highlight. Because the foundation base is so dominant (70%), the 10% accent color pops with exceptional visual power and clarity.