#B5B8BF + #C7CBCE + #E5ECFF + #F1E4D4 + #E8C9B4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B5B8BF

Silver Gray · Silver · Pearl Gray

HEX

#B5B8BF

RGB

rgb(181, 184, 191)

HSL

hsl(222, 7%, 73%)

HSB

hsb(222, 5%, 75%)

CMYK

cmyk(5%, 4%, 0%, 25%)

Oklch

oklch(78.2% 0.010 267.3)

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

#C7CBCE

Silver Gray · LightGray · Pearl Gray

HEX

#C7CBCE

RGB

rgb(199, 203, 206)

HSL

hsl(206, 7%, 79%)

HSB

hsb(206, 3%, 81%)

CMYK

cmyk(3%, 1%, 0%, 19%)

Oklch

oklch(84.0% 0.006 239.8)

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

#E5ECFF

Azure · Lavender · Sky Blue

HEX

#E5ECFF

RGB

rgb(229, 236, 255)

HSL

hsl(224, 100%, 95%)

HSB

hsb(224, 10%, 100%)

CMYK

cmyk(10%, 7%, 0%, 0%)

Oklch

oklch(94.3% 0.027 269.7)

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

#F1E4D4

Goose Yellow · Beige · Peach Orange

HEX

#F1E4D4

RGB

rgb(241, 228, 212)

HSL

hsl(33, 51%, 89%)

HSB

hsb(33, 12%, 95%)

CMYK

cmyk(0%, 5%, 12%, 5%)

Oklch

oklch(92.5% 0.026 73.2)

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

#E8C9B4

Apricot · Wheat · Peach Orange

HEX

#E8C9B4

RGB

rgb(232, 201, 180)

HSL

hsl(24, 53%, 81%)

HSB

hsb(24, 22%, 91%)

CMYK

cmyk(0%, 13%, 22%, 9%)

Oklch

oklch(85.7% 0.045 56.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5B8BF

BFBCB5

Analogous

B5BDBF

B5B8BF

B7B5BF

Triadic

B5B8BF

BFB5B8

B8BFB5

Split-Comp.

B5B8BF

BFB7B5

BDBFB5

Tetradic

B5B8BF

BFB5BD

BFBCB5

B5BFB7

Contrast Matrix WCAG 2.1 Contrast

B5B8BF	C7CBCE	E5ECFF	F1E4D4	E8C9B4
—	1.2 Fail	1.7 Fail	1.6 Fail	1.3 Fail
1.2 Fail	—	1.4 Fail	1.3 Fail	1.0 Fail
1.7 Fail	1.4 Fail	—	1.1 Fail	1.3 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.3 Fail	1.0 Fail	1.3 Fail	1.2 Fail	—

White BG

2.0Fail

1.6Fail

1.2Fail

1.3Fail

1.6Fail

Black BG

10.6AAA

12.9AAA

17.8AAA

16.8AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6BD

C9C9CD

E8E8FA

EBEBD8

DBDAB9

Deuteranopia

B6B6BD

C9C8CD

E8E7F9

ECEDD9

DCDFBA

Tritanopia

B5BCBC

C7CDCD

E5F7F6

F0DBDC

E6BDBE

Achromatopsia

B8B8B8

CACACA

ECECEC

E6E6E6

D0D0D0

Shades & Tints Shades & Tints

#B5B8BF

Dark

Light

#C7CBCE

Dark

Light

#E5ECFF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5b8bf;
  --color-2: #c7cbce;
  --color-3: #e5ecff;
  --color-4: #f1e4d4;
  --color-5: #e8c9b4;
}

SCSS

$color-1: #b5b8bf;
$color-2: #c7cbce;
$color-3: #e5ecff;
$color-4: #f1e4d4;
$color-5: #e8c9b4;

TAILWIND

colors: {
  'brand-1': '#b5b8bf',
  'brand-2': '#c7cbce',
  'brand-3': '#e5ecff',
  'brand-4': '#f1e4d4',
  'brand-5': '#e8c9b4',
}

RGB Array

[181, 184, 191], [199, 203, 206], [229, 236, 255], [241, 228, 212], [232, 201, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5B8BF, #C7CBCE, #E5ECFF, #F1E4D4, #E8C9B4 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b5b8bf; --color-2: #c7cbce; --color-3: #e5ecff; --color-4: #f1e4d4; --color-5: #e8c9b4. 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. 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. 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