#B1AB9B + #C8CBC2 + #D4E4D7 + #FBF1D8 + #F0D1BF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1AB9B

Ginger · DarkGray · Sunflower

HEX

#B1AB9B

RGB

rgb(177, 171, 155)

HSL

hsl(44, 12%, 65%)

HSB

hsb(44, 12%, 69%)

CMYK

cmyk(0%, 3%, 12%, 31%)

Oklch

oklch(74.2% 0.023 89.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C8CBC2

Willow Green · Silver · Pearl Gray

HEX

#C8CBC2

RGB

rgb(200, 203, 194)

HSL

hsl(80, 8%, 78%)

HSB

hsb(80, 4%, 80%)

CMYK

cmyk(1%, 0%, 4%, 20%)

Oklch

oklch(83.7% 0.013 121.7)

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

#D4E4D7

Celadon · LightGray · Mint Green

HEX

#D4E4D7

RGB

rgb(212, 228, 215)

HSL

hsl(131, 23%, 86%)

HSB

hsb(131, 7%, 89%)

CMYK

cmyk(7%, 0%, 6%, 11%)

Oklch

oklch(90.3% 0.024 151.2)

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

#FBF1D8

Goose Yellow · Beige · Lemon Cream

HEX

#FBF1D8

RGB

rgb(251, 241, 216)

HSL

hsl(43, 81%, 92%)

HSB

hsb(43, 14%, 98%)

CMYK

cmyk(0%, 4%, 14%, 2%)

Oklch

oklch(95.9% 0.035 88.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F0D1BF

Apricot · Wheat · Peach Orange

HEX

#F0D1BF

RGB

rgb(240, 209, 191)

HSL

hsl(22, 62%, 85%)

HSB

hsb(22, 20%, 94%)

CMYK

cmyk(0%, 13%, 20%, 6%)

Oklch

oklch(88.2% 0.043 52.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1AB9B

9BA1B0

Analogous

B0A09B

B1AB9B

ABB09B

Triadic

B1AB9B

9BB0AB

AB9BB0

Split-Comp.

B1AB9B

9BABB0

A09BB0

Tetradic

B1AB9B

9BB0A0

9BA1B0

B09BAB

Contrast Matrix WCAG 2.1 Contrast

B1AB9B	C8CBC2	D4E4D7	FBF1D8	F0D1BF
—	1.4 Fail	1.7 Fail	2.0 Fail	1.6 Fail
1.4 Fail	—	1.2 Fail	1.5 Fail	1.1 Fail
1.7 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
2.0 Fail	1.5 Fail	1.2 Fail	—	1.3 Fail
1.6 Fail	1.1 Fail	1.1 Fail	1.3 Fail	—

White BG

2.3Fail

1.6Fail

1.3Fail

1.1Fail

1.4Fail

Black BG

9.2AAA

12.8AAA

15.9AAA

18.7AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE9F

C9C9C4

DBDBDA

F7F7DE

E3E2C3

Deuteranopia

AFAFA0

C9C9C5

DAD9DB

F7F8E0

E4E7C4

Tritanopia

B1A2A3

C8C6C6

D5DDDD

FBE3E4

EEC7C8

Achromatopsia

ABABAB

C9C9C9

DEDEDE

F1F1F1

D8D8D8

Shades & Tints Shades & Tints

#B1AB9B

Dark

Light

#C8CBC2

Dark

Light

#D4E4D7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1ab9b;
  --color-2: #c8cbc2;
  --color-3: #d4e4d7;
  --color-4: #fbf1d8;
  --color-5: #f0d1bf;
}

SCSS

$color-1: #b1ab9b;
$color-2: #c8cbc2;
$color-3: #d4e4d7;
$color-4: #fbf1d8;
$color-5: #f0d1bf;

TAILWIND

colors: {
  'brand-1': '#b1ab9b',
  'brand-2': '#c8cbc2',
  'brand-3': '#d4e4d7',
  'brand-4': '#fbf1d8',
  'brand-5': '#f0d1bf',
}

RGB Array

[177, 171, 155], [200, 203, 194], [212, 228, 215], [251, 241, 216], [240, 209, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1AB9B, #C8CBC2, #D4E4D7, #FBF1D8, #F0D1BF 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: #b1ab9b; --color-2: #c8cbc2; --color-3: #d4e4d7; --color-4: #fbf1d8; --color-5: #f0d1bf. 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