Pikka Logo Pikka
Chrome App
Charming Dusty Lavender Blue Category: Blue

Periwinkle Blue (#8C92AC) — Color Codes, Meaning & UI Palettes

Periwinkle Blue (#8C92AC) is a subtle, cool periwinkle with slate-gray and lavender undertones. It strikes a balance between floral gentleness and technical clarity, evoking dreamlike calm and thoughtful poise.

Quick Answer (Periwinkle Blue Color Code): The exact HEX code for Periwinkle Blue is #8C92AC. In RGB, it is rgb(140, 146, 172). In HSL, it is hsl(229deg, 16%, 61%), and its print CMYK formulation is cmyk(19%, 15%, 0%, 33%). It has a relative luminance of 0.291 and pairs best in UI design with Midnight Navy (#020617) and Soft Cloud White (#F8F9FD).
Click to Copy HEX
Periwinkle Blue
#8C92AC
HEX
#8C92AC
RGB
rgb(140, 146, 172)
HSL
hsl(229deg, 16%, 61%)
CMYK (Print)
cmyk(19%, 15%, 0%, 33%)
Apple Display P3
color(display-p3 0.549 0.573 0.675)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 3.08:1 (AA Large)
Black Text (#000000) 6.82:1 (AA)

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
#F3F4F6
100
#E7E9EE
200
#D0D2DD
300
#B2B6C7
400
#8F94AE
500
#8C92AC
600
#6B7394
700
#555B75
800
#3F4357
900
#2A2D3A
950
#181920

Color Harmonies & Palette Schemes

Complementary

#ABA68C
Opposite 180° Contrast

Analogous -30°

#8CA1AB
Natural Harmony

Analogous +30°

#968CAB
Natural Harmony

Triadic +120°

#AB8C91
120° Balanced Triad

Triadic +240°

#91AB8C
120° Balanced Triad

Curated UI Design Pairings for Periwinkle Blue

Great secondary badge, illustration accent, and avatar tone in social apps, mental health tools, and modern SaaS dashboards.

Midnight Navy
#020617
Strong Contrast Text
Soft Cloud White
#F8F9FD
Airy Dashboard Base
Pastel Rose
#F43F5E
Playful Notification Tint
Cool Slate
#475569
Muted Caption Color

Export Periwinkle Blue Code Snippets

CSS Variable --color-periwinkle-blue: #8C92AC;
Tailwind Config 'periwinkle-blue': '#8C92AC'
Swift / SwiftUI Color(hex: "#8C92AC")
JSON Design Token {"name": "Periwinkle Blue", "hex": "#8C92AC"}

Frequently Asked Questions About Periwinkle Blue (#8C92AC)

What is the exact HEX code for Periwinkle Blue?

The exact HEX code for Periwinkle Blue is #8C92AC. In 8-digit hexadecimal (with 100% opacity), it is #8C92ACFF. Its RGB decimal equivalent is rgb(140, 146, 172) and its HSL value is hsl(229deg, 16%, 61%).

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

Periwinkle Blue pairs exceptionally well with Midnight Navy (#020617), Soft Cloud White (#F8F9FD), Pastel Rose (#F43F5E), and Cool Slate (#475569).

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

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

Is Periwinkle Blue WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Periwinkle Blue achieves a contrast ratio of 3.08:1 (AA Large). Against a pure black background (#000000), it achieves 6.82:1 (AA). 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