uiwheel
Open Wheel
Base Hex: #8B5CF6

Lavender Color Wheel & UI Harmonies

#895AF6Hue 258°triadic

Drag the handle around the wheel or use sliders below

RGB(137, 90, 246)
Hue Angle258°
Saturation90%
Lightness66%

Generated Harmonies (3 Colors)

Primary Base

#895AF6

oklch(0.601 0.221 292.3)

Secondary

#F6895A

oklch(0.740 0.147 43.3)

Accent

#5AF689

oklch(0.866 0.199 150.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 (#5AF689)
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
Primary Base
#895AF6
4.32:1(AA (large text))
4.43:1(AA (large text))
Best on Dark UI / Buttons
Secondary
#F6895A
2.43:1(Fail)
7.88:1(AAA)
Best on Dark UI / Buttons
Accent
#5AF689
1.40:1(Fail)
13.66:1(AAA)
Best on Dark UI / Buttons
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: '#F6F5FA',
          100: '#EBE7F4',
          200: '#C8B1FB',
          300: '#A581F8',
          400: '#7B47F5',
          500: '#895AF6',
          600: '#450BCB',
          700: '#3709A5',
          800: '#290679',
          900: '#1A0057',
          950: '#0F0033',
        },
        secondary: '#F6895A',
        accent: '#5AF689',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Lavender in Digital Product Design

Lavender sits at the junction of calming blue and passionate red on the color wheel (258° hue). In digital product design, modern lavender shades have emerged as a premier choice for developer tools, AI copilot interfaces, and sleek creative suites. It communicates intelligence, calm focus, and modern elegance without the clinical coldness of enterprise blues.

✓Recommended UI Applications

Use Lavender as a hero accent, interactive active-state focus rings, or gradient stops. Light lavender tints (#EDE9FE) provide exceptionally smooth background surfaces for cards and modals, while deeper tones (#6D28D9) deliver crisp typography and icons.

⚠Accessibility & Contrast Guidelines

Pure pastel lavender (#E6E6FA) has low contrast against white surfaces (approx 1.2:1). Always pair with dark slate (#0F172A) or deep plum (#4C1D95) text when used as a button background. For text on white backgrounds, use Lavender 700 (#6D28D9) or deeper.

Curated UI Pairings for Lavender

Expertly tested color coordinates that harmonize with Lavender without visual clashes.

Complementary Contrast

#EAB308

Warm amber gold for notification badges and key highlights.

Surface Tint

#F5F3FF

Ultra-subtle violet surface for cards, tabs, and backdrop panels.

Deep Slate Base

#0F172A

Crisp near-black base ensuring AAA WCAG compliance across typography.

Lavender Design System Token Specifications

Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.

HEX CODE

#8B5CF6

RGB VALUE

rgb(139, 92, 246)

HSL VALUE

hsl(258°, 90%, 66%)

OKLCH VALUE

oklch(0.606 0.219 292.7)

Target Industries:AI ToolsCreative SaaSWeb3 / CryptoWellness Apps

Frequently Asked Questions About Lavender

What primary role should Lavender take in a digital interface?

Lavender sits at the junction of calming blue and passionate red on the color wheel (258° hue). In digital product design, modern lavender shades have emerged as a premier choice for developer tools, AI copilot interfaces, and sleek creative suites. It communicates intelligence, calm focus, and modern elegance without the clinical coldness of enterprise blues. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.

How do I maintain WCAG AA accessibility when using Lavender?

Pure pastel lavender (#E6E6FA) has low contrast against white surfaces (approx 1.2:1). Always pair with dark slate (#0F172A) or deep plum (#4C1D95) text when used as a button background. For text on white backgrounds, use Lavender 700 (#6D28D9) or deeper. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Lavender into Tailwind CSS?

Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.

Explore More

Related Design Color Wheels

View all wheels →

Aesthetic

#9D8DF1

Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.

Soft Autumn

#B86B53

Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.

Deep Winter

#1E3A8A

High-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.

Soft Summer

#9B8EB9

Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.