← Back to Editor

#B3BEBF · #CBD0D3 · #EDEDED · #E8E8E9 · #D7D8D7

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

WorkspaceReading

Color Details Color Details

#B3BEBF

Sky Blue · Silver · Pearl Gray

HEX
#B3BEBF
RGB
rgb(179, 190, 191)
HSL
hsl(185, 9%, 73%)
HSB
hsb(185, 6%, 75%)
CMYK
cmyk(6%, 1%, 0%, 25%)
Oklch
oklch(79.3% 0.012 203.4)

TraditionalSky Blue」· PaintPearl Gray」· Creative Silver Lining

#CBD0D3

Sky Blue · LightGray · Pearl Gray

HEX
#CBD0D3
RGB
rgb(203, 208, 211)
HSL
hsl(202, 8%, 81%)
HSB
hsb(202, 4%, 83%)
CMYK
cmyk(4%, 1%, 0%, 17%)
Oklch
oklch(85.5% 0.007 233.7)

TraditionalSky Blue」· PaintPearl Gray」· Creative Silver Lining

#EDEDED

Plain White · Linen · Cloud White

HEX
#EDEDED
RGB
rgb(237, 237, 237)
HSL
hsl(0, 0%, 93%)
HSB
hsb(0, 0%, 93%)
CMYK
cmyk(0%, 0%, 0%, 7%)
Oklch
oklch(94.6% 0.000 89.9)

TraditionalPlain White」· PaintCloud White」· Creative Morning Mist

#E8E8E9

Plain White · Lavender · Cloud White

HEX
#E8E8E9
RGB
rgb(232, 232, 233)
HSL
hsl(240, 2%, 91%)
HSB
hsb(240, 0%, 91%)
CMYK
cmyk(0%, 0%, 0%, 9%)
Oklch
oklch(93.1% 0.001 286.4)

TraditionalPlain White」· PaintCloud White」· Creative Morning Mist

#D7D8D7

Silver Gray · LightGray · Pearl Gray

HEX
#D7D8D7
RGB
rgb(215, 216, 215)
HSL
hsl(120, 1%, 85%)
HSB
hsb(120, 0%, 85%)
CMYK
cmyk(0%, 0%, 0%, 15%)
Oklch
oklch(88.1% 0.002 145.6)

TraditionalSilver Gray」· PaintPearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3BEBF
C0B5B4

Analogous

B4C0BB
B3BEBF
B4B9C0

Triadic

B3BEBF
C0B4BF
BFC0B4

Split-Comp.

B3BEBF
C0B4B9
C0BBB4

Tetradic

B3BEBF
BBB4C0
C0B5B4
B9C0B4

Contrast Matrix WCAG 2.1 Contrast

B3BEBF
CBD0D3
EDEDED
E8E8E9
D7D8D7
1.2
Fail
1.6
Fail
1.6
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
1.6
Fail
1.3
Fail
1.0
Fail
1.2
Fail
1.6
Fail
1.3
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.2
Fail
1.2
Fail
White BG
1.9Fail
1.6Fail
1.2Fail
1.2Fail
1.4Fail
Black BG
11.0AAA
13.5AAA
17.9AAA
17.2AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8BF
CDCDD2
EDEDED
E8E8E9
D7D7D7

Deuteranopia

B7B6BF
CDCDD2
EDEDED
E8E8E9
D7D7D7

Tritanopia

B4BFBF
CBD2D2
EDEDED
E8E9E9
D7D7D7

Achromatopsia

BBBBBB
CFCFCF
EDEDED
E8E8E8
D8D8D8

Shades & Tints Shades & Tints

#B3BEBF

Dark
Light

#CBD0D3

Dark
Light

#EDEDED

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3bebf;
  --color-2: #cbd0d3;
  --color-3: #ededed;
  --color-4: #e8e8e9;
  --color-5: #d7d8d7;
}

SCSS

$color-1: #b3bebf;
$color-2: #cbd0d3;
$color-3: #ededed;
$color-4: #e8e8e9;
$color-5: #d7d8d7;

TAILWIND

colors: {
  'brand-1': '#b3bebf',
  'brand-2': '#cbd0d3',
  'brand-3': '#ededed',
  'brand-4': '#e8e8e9',
  'brand-5': '#d7d8d7',
}

RGB Array

[179, 190, 191], [203, 208, 211], [237, 237, 237], [232, 232, 233], [215, 216, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3BEBF, #CBD0D3, #EDEDED, #E8E8E9, #D7D8D7 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #b3bebf; --color-2: #cbd0d3; --color-3: #ededed; --color-4: #e8e8e9; --color-5: #d7d8d7. 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 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