Base Hex: #8E9AAF

Soft Color Wheel & UI Harmonies

Drag the handle around the wheel or use sliders below

Harmony Formula

RGB(142, 154, 175)

Hue Angle218°

Saturation17%

Lightness62%

Generated Harmonies (3 Colors)

Adjacent Left

#8EAAAF

oklch(0.718 0.032 209.6)

Primary Base

#8E9AAF

oklch(0.684 0.034 261.7)

Adjacent Right

#928EAF

oklch(0.662 0.049 290.6)

Design System Validation

Live UI Component Preview

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 (#928EAF)

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 Role	Hex	On Pure White (#FFF)	On Dark Obsidian (#0B0F19)	Recommended Usage
Adjacent Left	#8EAAAF	2.47:1(Fail)	7.77:1(AAA)	Best on Dark UI / Buttons
Primary Base	#8E9AAF	2.84:1(Fail)	6.74:1(AA)	Best on Dark UI / Buttons
Adjacent Right	#928EAF	3.13:1(AA (large text))	6.12:1(AA)	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: '#F6F8F8',
          100: '#EAEFF0',
          200: '#CFDBDD',
          300: '#B1C5C8',
          400: '#8EAAAF',
          500: '#8EAAAF',
          600: '#59787D',
          700: '#486165',
          800: '#35474B',
          900: '#233134',
          950: '#141D1F',
        },
        secondary: '#8E9AAF',
        accent: '#928EAF',
      }
    }
  }
};

Color Architecture & Design Systems

How to Use Soft in Digital Product Design

✓Recommended UI Applications

Ideal for mindful productivity workspaces, digital journals, wellness platforms, and calming lifestyle blogs. Use muted periwinkle and dusty sage for surface cards, pairing with deep slate typography for effortless readability.

⚠Accessibility & Contrast Guidelines

Soft mid-tones require dark charcoal text (#1E293B) to maintain WCAG 2.1 AA compliance (ratio 5.4:1). Avoid white text on soft neutral surfaces.

Curated UI Pairings for Soft

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

Dusty Blush

#CBC0D3

Soft romantic accent for tags, badges, and active state highlights.

Oat Linen Surface

#F8F7F4

Warm, glare-free paper canvas replacing sterile stark white.

Deep Slate Charcoal

#2B2D42

High-contrast anchor providing 8.6:1 AAA legibility across typography.

Soft Design System Token Specifications

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

HEX CODE

#8E9AAF

RGB VALUE

rgb(142, 154, 175)

HSL VALUE

hsl(219°, 17%, 62%)

OKLCH VALUE

oklch(0.684 0.034 261.7)

Target Industries:Mindfulness AppsDigital Planners & NotionWellness & Mental HealthEditorial Design

Frequently Asked Questions About Soft

What primary role should Soft take in a digital interface?

A soft color wheel features colors with subdued saturation and balanced lightness, deliberately removing high-contrast visual glare. Unlike harsh primaries, soft color palettes create calm, breathable digital interfaces that prevent cognitive fatigue during extended workflows. 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 Soft?

Soft mid-tones require dark charcoal text (#1E293B) to maintain WCAG 2.1 AA compliance (ratio 5.4:1). Avoid white text on soft neutral surfaces. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Soft 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.