#BCBBB9 + #CBD8C4 + #F1F2CA + #FCDCC3 + #FEE9CE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BCBBB9

Silver Gray · Silver · Pearl Gray

HEX

#BCBBB9

RGB

rgb(188, 187, 185)

HSL

hsl(40, 2%, 73%)

HSB

hsb(40, 2%, 74%)

CMYK

cmyk(0%, 1%, 2%, 26%)

Oklch

oklch(79.2% 0.003 84.6)

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

#CBD8C4

Celadon · LightGray · Mint Green

HEX

#CBD8C4

RGB

rgb(203, 216, 196)

HSL

hsl(99, 20%, 81%)

HSB

hsb(99, 9%, 85%)

CMYK

cmyk(6%, 0%, 9%, 15%)

Oklch

oklch(86.7% 0.031 134.4)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F1F2CA

Fresh Green · Beige · Lemon Cream

HEX

#F1F2CA

RGB

rgb(241, 242, 202)

HSL

hsl(61, 61%, 87%)

HSB

hsb(61, 17%, 95%)

CMYK

cmyk(0%, 0%, 17%, 5%)

Oklch

oklch(95.0% 0.052 108.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FCDCC3

Apricot · Bisque · Peach Orange

HEX

#FCDCC3

RGB

rgb(252, 220, 195)

HSL

hsl(26, 90%, 88%)

HSB

hsb(26, 23%, 99%)

CMYK

cmyk(0%, 13%, 23%, 1%)

Oklch

oklch(91.5% 0.049 60.1)

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

#FEE9CE

Goose Yellow · Bisque · Peach Orange

HEX

#FEE9CE

RGB

rgb(254, 233, 206)

HSL

hsl(34, 96%, 90%)

HSB

hsb(34, 19%, 100%)

CMYK

cmyk(0%, 8%, 19%, 0%)

Oklch

oklch(94.4% 0.042 74.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCBBB9

B9BABC

Analogous

BCB9B9

BCBBB9

BBBCB9

Triadic

BCBBB9

B9BCBB

BBB9BC

Split-Comp.

BCBBB9

B9BBBC

B9B9BC

Tetradic

BCBBB9

B9BCB9

B9BABC

BCB9BB

Contrast Matrix WCAG 2.1 Contrast

BCBBB9	CBD8C4	F1F2CA	FCDCC3	FEE9CE
—	1.3 Fail	1.7 Fail	1.5 Fail	1.6 Fail
1.3 Fail	—	1.3 Fail	1.1 Fail	1.3 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	1.0 Fail
1.5 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.6 Fail	1.3 Fail	1.0 Fail	1.1 Fail	—

White BG

1.9Fail

1.5Fail

1.1Fail

1.3Fail

1.2Fail

Black BG

10.9AAA

14.2AAA

18.3AAA

16.2AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCB9

D1D1C9

F1F1D4

EEEEC9

F5F5D5

Deuteranopia

BCBCBA

D0CFCA

F1F1D6

F0F2CB

F6F8D6

Tritanopia

BCBABA

CCCDCE

F1DBDD

FACECF

FDDADB

Achromatopsia

BBBBBB

D2D2D2

EDEDED

E3E3E3

ECECEC

Shades & Tints Shades & Tints

#BCBBB9

Dark

Light

#CBD8C4

Dark

Light

#F1F2CA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcbbb9;
  --color-2: #cbd8c4;
  --color-3: #f1f2ca;
  --color-4: #fcdcc3;
  --color-5: #fee9ce;
}

SCSS

$color-1: #bcbbb9;
$color-2: #cbd8c4;
$color-3: #f1f2ca;
$color-4: #fcdcc3;
$color-5: #fee9ce;

TAILWIND

colors: {
  'brand-1': '#bcbbb9',
  'brand-2': '#cbd8c4',
  'brand-3': '#f1f2ca',
  'brand-4': '#fcdcc3',
  'brand-5': '#fee9ce',
}

RGB Array

[188, 187, 185], [203, 216, 196], [241, 242, 202], [252, 220, 195], [254, 233, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BCBBB9, #CBD8C4, #F1F2CA, #FCDCC3, #FEE9CE 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: #bcbbb9; --color-2: #cbd8c4; --color-3: #f1f2ca; --color-4: #fcdcc3; --color-5: #fee9ce. 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