← Back to Editor

#B8B5B0 · #E2D3BC · #362D30 · #CED7F6 · #A7ACCA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#B8B5B0

Silver Gray · DarkGray · Pearl Gray

HEX
#B8B5B0
RGB
rgb(184, 181, 176)
HSL
hsl(38, 5%, 71%)
HSB
hsb(38, 4%, 72%)
CMYK
cmyk(0%, 2%, 4%, 28%)
Oklch
oklch(77.4% 0.008 80.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#E2D3BC

Goose Yellow · Wheat · Peach Orange

HEX
#E2D3BC
RGB
rgb(226, 211, 188)
HSL
hsl(36, 40%, 81%)
HSB
hsb(36, 17%, 89%)
CMYK
cmyk(0%, 7%, 17%, 11%)
Oklch
oklch(87.3% 0.035 78.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#362D30

Dark Violet · DarkSlateGray · Dark Stone

HEX
#362D30
RGB
rgb(54, 45, 48)
HSL
hsl(340, 9%, 19%)
HSB
hsb(340, 17%, 21%)
CMYK
cmyk(0%, 17%, 11%, 79%)
Oklch
oklch(30.8% 0.014 355.9)

Traditional「Dark Violet」· Paint「Dark Stone」· Creative Midnight Shadow

#CED7F6

Azure · Lavender · Sky Blue

HEX
#CED7F6
RGB
rgb(206, 215, 246)
HSL
hsl(227, 69%, 89%)
HSB
hsb(227, 16%, 96%)
CMYK
cmyk(16%, 13%, 0%, 4%)
Oklch
oklch(88.2% 0.044 272.7)

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

#A7ACCA

Azure · LightSteelBlue · Cobalt Blue

HEX
#A7ACCA
RGB
rgb(167, 172, 202)
HSL
hsl(231, 25%, 72%)
HSB
hsb(231, 17%, 79%)
CMYK
cmyk(17%, 15%, 0%, 21%)
Oklch
oklch(75.0% 0.043 277.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B5B0
B1B4B9

Analogous

B9B2B1
B8B5B0
B8B9B1

Triadic

B8B5B0
B1B9B6
B6B1B9

Split-Comp.

B8B5B0
B1B8B9
B2B1B9

Tetradic

B8B5B0
B1B9B2
B1B4B9
B9B1B8

Contrast Matrix WCAG 2.1 Contrast

B8B5B0
E2D3BC
362D30
CED7F6
A7ACCA
—
1.4
Fail
6.5
AA
1.4
Fail
1.1
Fail
1.4
Fail
—
9.1
AAA
1.0
Fail
1.5
Fail
6.5
AA
9.1
AAA
—
9.3
AAA
6.0
AA
1.4
Fail
1.0
Fail
9.3
AAA
—
1.6
Fail
1.1
Fail
1.5
Fail
6.0
AA
1.6
Fail
—
White BG
2.0Fail
1.5Fail
13.3AAA
1.4Fail
2.2Fail
Black BG
10.3AAA
14.3AAA
1.6Fail
14.7AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7B1
DCDBC2
32322F
D2D2EE
A9A9C3

Deuteranopia

B7B7B2
DCDEC3
33332F
D1D1ED
A9A9C1

Tritanopia

B8B2B2
E1C6C7
362F2F
CEE9E7
A7BDBC

Achromatopsia

B5B5B5
D5D5D5
303030
D8D8D8
AEAEAE

Shades & Tints Shades & Tints

#B8B5B0

Dark
Light

#E2D3BC

Dark
Light

#362D30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b5b0;
  --color-2: #e2d3bc;
  --color-3: #362d30;
  --color-4: #ced7f6;
  --color-5: #a7acca;
}

SCSS

$color-1: #b8b5b0;
$color-2: #e2d3bc;
$color-3: #362d30;
$color-4: #ced7f6;
$color-5: #a7acca;

TAILWIND

colors: {
  'brand-1': '#b8b5b0',
  'brand-2': '#e2d3bc',
  'brand-3': '#362d30',
  'brand-4': '#ced7f6',
  'brand-5': '#a7acca',
}

RGB Array

[184, 181, 176], [226, 211, 188], [54, 45, 48], [206, 215, 246], [167, 172, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8B5B0, #E2D3BC, #362D30, #CED7F6, #A7ACCA is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #b8b5b0; --color-2: #e2d3bc; --color-3: #362d30; --color-4: #ced7f6; --color-5: #a7acca. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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