Pikka Logo Pikka
Chrome App
Refined Medium Violet-Blue Slate Category: Blue

Slate Blue (#6A5ACD) — Color Codes, Meaning & UI Palettes

Slate Blue (#6A5ACD) is a medium slate-tinted purple-blue that balances cool rock-like stability with vibrant indigo luminosity. It conveys technical authority, quiet confidence, and modern design precision.

Quick Answer (Slate Blue Color Code): The exact HEX code for Slate Blue is #6A5ACD. In RGB, it is rgb(106, 90, 205). In HSL, it is hsl(248deg, 53%, 58%), and its print CMYK formulation is cmyk(48%, 56%, 0%, 20%). It has a relative luminance of 0.148 and pairs best in UI design with Pure White (#FFFFFF) and Deep Obsidian (#0B0F19).
Click to Copy HEX
Slate Blue
#6A5ACD
HEX
#6A5ACD
RGB
rgb(106, 90, 205)
HSL
hsl(248deg, 53%, 58%)
CMYK (Print)
cmyk(48%, 56%, 0%, 20%)
Apple Display P3
color(display-p3 0.416 0.353 0.804)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 5.3:1 (AA)
Black Text (#000000) 3.96:1 (AA Large)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#F1EFFA
100
#E3E0F5
200
#C6C1EC
300
#A39AE0
400
#786BD1
500
#6A5ACD
600
#4A39BA
700
#3B2D93
800
#2B216D
900
#1D1648
950
#100D29

Color Harmonies & Palette Schemes

Complementary

#BECD5B
Opposite 180° Contrast

Analogous -30°

#5B85CD
Natural Harmony

Analogous +30°

#A35BCD
Natural Harmony

Triadic +120°

#CD6A5B
120° Balanced Triad

Triadic +240°

#5BCD6A
120° Balanced Triad

Curated UI Design Pairings for Slate Blue

Exceptional primary button and active tab color in developer tools, AI platforms, and dark-mode web applications. Passes WCAG AA on white and deep dark surfaces.

Pure White
#FFFFFF
High-Contrast Primary Text
Deep Obsidian
#0B0F19
Pro Dark-Mode Canvas
Soft Cyan
#38BDF8
Electric Secondary Pill
Cool Lavender
#C7D2FE
Subtle Icon Tint

Export Slate Blue Code Snippets

CSS Variable --color-slate-blue: #6A5ACD;
Tailwind Config 'slate-blue': '#6A5ACD'
Swift / SwiftUI Color(hex: "#6A5ACD")
JSON Design Token {"name": "Slate Blue", "hex": "#6A5ACD"}

Frequently Asked Questions About Slate Blue (#6A5ACD)

What is the exact HEX code for Slate Blue?

The exact HEX code for Slate Blue is #6A5ACD. In 8-digit hexadecimal (with 100% opacity), it is #6A5ACDFF. Its RGB decimal equivalent is rgb(106, 90, 205) and its HSL value is hsl(248deg, 53%, 58%).

What colors go best with Slate Blue in UI and web design?

Slate Blue pairs exceptionally well with Pure White (#FFFFFF), Deep Obsidian (#0B0F19), Soft Cyan (#38BDF8), and Cool Lavender (#C7D2FE).

How do I use Slate Blue in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #6A5ACD; or background-color: #6A5ACD;. In Tailwind CSS, use arbitrary value syntax like bg-[#6a5acd] or text-[#6a5acd], or define it in your Tailwind v4 @theme block as --color-slate-blue: #6A5ACD;.

Is Slate Blue WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Slate Blue achieves a contrast ratio of 5.3:1 (AA). Against a pure black background (#000000), it achieves 3.96:1 (AA Large). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator