uiwheel
Open Wheel
Base Hex: #6366F1

Slate Blue Color Wheel & UI Harmonies

#6467F2Hue 239°analogous

Drag the handle around the wheel or use sliders below

RGB(100, 103, 242)
Hue Angle239°
Saturation84%
Lightness67%

Generated Harmonies (3 Colors)

Adjacent Left

#64ADF2

oklch(0.729 0.125 248.6)

Primary Base

#6467F2

oklch(0.589 0.204 277.2)

Adjacent Right

#A864F2

oklch(0.643 0.207 303.1)

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 (#A864F2)
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
#64ADF2
2.39:1(Fail)
8.03:1(AAA)
Best on Dark UI / Buttons
Primary Base
#6467F2
4.41:1(AA (large text))
4.34:1(AA (large text))
Best on Light UI / Backgrounds
Adjacent Right
#A864F2
3.64:1(AA (large text))
5.26: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: '#F5F7FA',
          100: '#E7EDF3',
          200: '#B4D7F9',
          300: '#84BFF5',
          400: '#4CA1F0',
          500: '#64ADF2',
          600: '#106EC6',
          700: '#0D59A0',
          800: '#0A4276',
          900: '#012D56',
          950: '#011A32',
        },
        secondary: '#6467F2',
        accent: '#A864F2',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Slate Blue in Digital Product Design

Slate Blue / Indigo (239° hue) is the defining hue of modern indie hacking and modern Silicon Valley web apps. It feels faster, smarter, and more futuristic than legacy corporate blue, while maintaining high accessibility.

✓Recommended UI Applications

Interactive focus outlines, AI prompt generation bars, hero gradients, and primary buttons. Blends seamlessly into both clean light-mode cards and glassy dark-mode cockpits.

⚠Accessibility & Contrast Guidelines

Slate Blue 500 (#6366F1) on white text achieves 4.5:1 AA contrast. For buttons with white text, Indigo 600 (#4F46E5) provides guaranteed 6.2:1 readability.

Curated UI Pairings for Slate Blue

Expertly tested color coordinates that harmonize with Slate Blue without visual clashes.

Electric Cyan

#06B6D4

Analogous partner for multi-stop glowing gradients.

Vibrant Violet

#A855F7

Deep creative shade for tag pills and secondary iconography.

Slate Canvas

#090D16

Clean deep-space theme making indigo glow with refined precision.

Slate Blue Design System Token Specifications

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

HEX CODE

#6366F1

RGB VALUE

rgb(99, 102, 241)

HSL VALUE

hsl(239°, 84%, 67%)

OKLCH VALUE

oklch(0.585 0.204 277.1)

Target Industries:AI SaaSDeveloper AnalyticsWorkflow AutomationModern Startups

Frequently Asked Questions About Slate Blue

What primary role should Slate Blue take in a digital interface?

Slate Blue / Indigo (239° hue) is the defining hue of modern indie hacking and modern Silicon Valley web apps. It feels faster, smarter, and more futuristic than legacy corporate blue, while maintaining high accessibility. 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 Slate Blue?

Slate Blue 500 (#6366F1) on white text achieves 4.5:1 AA contrast. For buttons with white text, Indigo 600 (#4F46E5) provides guaranteed 6.2:1 readability. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

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