← Back to Editor

#422B3E · #8B86A3 · #A2A7BA · #C5D1DB · #DEDEDE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#422B3E

Rose Purple · DarkSlateGray · Eggplant

HEX
#422B3E
RGB
rgb(66, 43, 62)
HSL
hsl(310, 21%, 21%)
HSB
hsb(310, 35%, 26%)
CMYK
cmyk(0%, 35%, 6%, 74%)
Oklch
oklch(32.4% 0.046 332.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#8B86A3

Deep Indigo · LightSlateGray · Navy Blue

HEX
#8B86A3
RGB
rgb(139, 134, 163)
HSL
hsl(250, 14%, 58%)
HSB
hsb(250, 18%, 64%)
CMYK
cmyk(15%, 18%, 0%, 36%)
Oklch
oklch(63.4% 0.043 293.0)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#A2A7BA

Azure · DarkGray · Cobalt Blue

HEX
#A2A7BA
RGB
rgb(162, 167, 186)
HSL
hsl(227, 15%, 68%)
HSB
hsb(227, 13%, 73%)
CMYK
cmyk(13%, 10%, 0%, 27%)
Oklch
oklch(73.0% 0.028 274.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C5D1DB

Sky Blue · LightGray · Sky Blue

HEX
#C5D1DB
RGB
rgb(197, 209, 219)
HSL
hsl(207, 23%, 82%)
HSB
hsb(207, 10%, 86%)
CMYK
cmyk(10%, 5%, 0%, 14%)
Oklch
oklch(85.5% 0.019 243.0)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#DEDEDE

Plain White · LightGray · Cloud White

HEX
#DEDEDE
RGB
rgb(222, 222, 222)
HSL
hsl(0, 0%, 87%)
HSB
hsb(0, 0%, 87%)
CMYK
cmyk(0%, 0%, 0%, 13%)
Oklch
oklch(90.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

422B3E
2A412E

Analogous

392A41
422B3E
412A32

Triadic

422B3E
3D412A
2A3D41

Split-Comp.

422B3E
32412A
2A4139

Tetradic

422B3E
41392A
2A412E
2A3241

Contrast Matrix WCAG 2.1 Contrast

422B3E
8B86A3
A2A7BA
C5D1DB
DEDEDE
—
3.7
AA Large
5.3
AA
8.2
AAA
9.5
AAA
3.7
AA Large
—
1.5
Fail
2.2
Fail
2.6
Fail
5.3
AA
1.5
Fail
—
1.5
Fail
1.8
Fail
8.2
AAA
2.2
Fail
1.5
Fail
—
1.2
Fail
9.5
AAA
2.6
Fail
1.8
Fail
1.2
Fail
—
White BG
12.8AAA
3.5AA Large
2.4Fail
1.6Fail
1.3Fail
Black BG
1.6Fail
6.0AA
8.8AAA
13.5AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

383839
89899C
A4A4B5
CACAD9
DEDEDE

Deuteranopia

393B38
898A9A
A4A4B4
CAC9D8
DEDEDE

Tritanopia

413635
8B9695
A2B2B1
C6D7D6
DEDEDE

Achromatopsia

343434
8B8B8B
A8A8A8
CFCFCF
DEDEDE

Shades & Tints Shades & Tints

#422B3E

Dark
Light

#8B86A3

Dark
Light

#A2A7BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #422b3e;
  --color-2: #8b86a3;
  --color-3: #a2a7ba;
  --color-4: #c5d1db;
  --color-5: #dedede;
}

SCSS

$color-1: #422b3e;
$color-2: #8b86a3;
$color-3: #a2a7ba;
$color-4: #c5d1db;
$color-5: #dedede;

TAILWIND

colors: {
  'brand-1': '#422b3e',
  'brand-2': '#8b86a3',
  'brand-3': '#a2a7ba',
  'brand-4': '#c5d1db',
  'brand-5': '#dedede',
}

RGB Array

[66, 43, 62], [139, 134, 163], [162, 167, 186], [197, 209, 219], [222, 222, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #422B3E, #8B86A3, #A2A7BA, #C5D1DB, #DEDEDE is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #422b3e; --color-2: #8b86a3; --color-3: #a2a7ba; --color-4: #c5d1db; --color-5: #dedede. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color