uiwheel
Open Wheel
Three colors sitting side-by-side on the wheel (typically 30° apart).

Analogous Harmony Calculator

#07B6D5Hue 189°analogous

Drag the handle around the wheel or use sliders below

RGB(7, 182, 213)
Hue Angle189°
Saturation94%
Lightness43%

Generated Harmonies (3 Colors)

Adjacent Left

#07D58D

oklch(0.771 0.174 160.0)

Primary Base

#07B6D5

oklch(0.715 0.126 215.9)

Adjacent Right

#074FD5

oklch(0.483 0.215 262.0)

Design System Validation

Live UI Component Preview

UI

Apex Analytics

Team Dashboard

Harmonized Active
Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#074FD5)
Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color RoleHexOn Pure White (#FFF)On Dark Obsidian (#0B0F19)Recommended Usage
Adjacent Left
#07D58D
1.92:1(Fail)
9.95:1(AAA)
Best on Dark UI / Buttons
Primary Base
#07B6D5
2.42:1(Fail)
7.90:1(AAA)
Best on Dark UI / Buttons
Adjacent Right
#074FD5
6.80:1(AA)
2.82:1(Fail)
Best on Light UI / Backgrounds
Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F4FAF8',
          100: '#E6F4EF',
          200: '#B0FDE2',
          300: '#7EFBCF',
          400: '#43F9B9',
          500: '#07D58D',
          600: '#06D089',
          700: '#05A86F',
          800: '#047C52',
          900: '#005738',
          950: '#003321',
        },
        secondary: '#07B6D5',
        accent: '#074FD5',
      }
    }
  }
};
Theoretical Foundation

Understanding Analogous Harmony

Analogous color schemes use colors that share a common dominant root hue, creating natural harmony seen throughout nature (such as ocean water transitioning from deep navy to turquoise). In digital products, analogous palettes create soothing, low-stress environments that allow users to focus on content without sensory overload.

✓Ideal Use Cases in Web & App UI

  • •Lush, modern CSS gradients for hero banners and background ambient glows.
  • •Healthcare, meditation, and productivity apps where visual calm improves focus.
  • •Dark-mode dashboards using subtle hue shifts to denote container hierarchy.

✗Common Design Mistakes to Avoid

  • •Failing to introduce enough lightness contrast, causing UI elements to bleed together.
  • •Using analogous colors for critical error states, where high optical contrast is mandatory.
UI Implementation Architecture

How to Structure Analogous Harmony in Production Code

Follow this token role hierarchy when integrating analogous harmony spokes into your design system tokens:

60% Primary Tone

Base Surface & Canvas

Use shade 50 (or 950 in dark mode) as your primary canvas background tint to establish emotional mood without compromising readability.

30% Secondary Spokes

Borders & Secondary Pills

Apply secondary harmony spokes to component card borders, tag badges, sidebar active indicators, and chart telemetry tracks.

10% Accent Spoke

High-Impact Action & CTA

Reserve your sharpest harmony spoke for conversion buttons, primary checkout buttons, and interactive focus rings.

Other Color Harmony Calculators

Complementary Harmony

Two colors positioned directly opposite on the wheel (180° apart).

Triadic Harmony

Three colors evenly spaced around the color wheel (120° apart).

Split-Complementary Harmony

A base color paired with the two colors adjacent to its complement (150° and 210°).

Tetradic (Square) Harmony

Four colors arranged into two complementary pairs or spaced at 90° intervals.

Monochromatic Harmony

A single hue explored across varying saturation, tint, and shade levels.