#BB9FAB + #D6CDCE + #D8D9D4 + #FBFCBA + #F1F8F0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BB9FAB

Rouge · DarkGray · Rose Pink

HEX

#BB9FAB

RGB

rgb(187, 159, 171)

HSL

hsl(334, 17%, 68%)

HSB

hsb(334, 15%, 73%)

CMYK

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

Oklch

oklch(73.1% 0.037 350.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#D6CDCE

Peach Pink · LightGray · Cherry Blossom

HEX

#D6CDCE

RGB

rgb(214, 205, 206)

HSL

hsl(353, 10%, 82%)

HSB

hsb(353, 4%, 84%)

CMYK

cmyk(0%, 4%, 4%, 16%)

Oklch

oklch(85.6% 0.010 9.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#D8D9D4

Silver Gray · LightGray · Pearl Gray

HEX

#D8D9D4

RGB

rgb(216, 217, 212)

HSL

hsl(72, 6%, 84%)

HSB

hsb(72, 2%, 85%)

CMYK

cmyk(0%, 0%, 2%, 15%)

Oklch

oklch(88.3% 0.007 115.7)

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

#FBFCBA

Fresh Green · Bisque · Lemon Cream

HEX

#FBFCBA

RGB

rgb(251, 252, 186)

HSL

hsl(61, 92%, 86%)

HSB

hsb(61, 26%, 99%)

CMYK

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

Oklch

oklch(97.5% 0.084 108.6)

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

#F1F8F0

Celadon · SeaShell · Mint Green

HEX

#F1F8F0

RGB

rgb(241, 248, 240)

HSL

hsl(113, 36%, 96%)

HSB

hsb(113, 3%, 97%)

CMYK

cmyk(3%, 0%, 3%, 3%)

Oklch

oklch(97.2% 0.013 141.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB9FAB

A0BBAF

Analogous

BBA0B9

BB9FAB

BBA1A0

Triadic

BB9FAB

ACBBA0

A0ACBB

Split-Comp.

BB9FAB

A0BBA1

A0B9BB

Tetradic

BB9FAB

B9BBA0

A0BBAF

A1A0BB

Contrast Matrix WCAG 2.1 Contrast

BB9FAB	D6CDCE	D8D9D4	FBFCBA	F1F8F0
—	1.6 Fail	1.7 Fail	2.3 Fail	2.2 Fail
1.6 Fail	—	1.1 Fail	1.5 Fail	1.4 Fail
1.7 Fail	1.1 Fail	—	1.3 Fail	1.3 Fail
2.3 Fail	1.5 Fail	1.3 Fail	—	1.0 Fail
2.2 Fail	1.4 Fail	1.3 Fail	1.0 Fail	—

White BG

2.4Fail

1.6Fail

1.4Fail

1.1Fail

Black BG

8.7AAA

13.5AAA

14.8AAA

19.7AAA

19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFA8

D2D2CE

D8D8D5

FBFBCA

F4F4F2

Deuteranopia

B1B3A7

D3D3CE

D8D8D5

FBFBCE

F4F3F2

Tritanopia

BAA6A5

D6CECE

D8D6D6

FBD7D9

F1F3F4

Achromatopsia

A9A9A9

D0D0D0

D8D8D8

F4F4F4

F5F5F5

Shades & Tints Shades & Tints

#BB9FAB

Dark

Light

#D6CDCE

Dark

Light

#D8D9D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb9fab;
  --color-2: #d6cdce;
  --color-3: #d8d9d4;
  --color-4: #fbfcba;
  --color-5: #f1f8f0;
}

SCSS

$color-1: #bb9fab;
$color-2: #d6cdce;
$color-3: #d8d9d4;
$color-4: #fbfcba;
$color-5: #f1f8f0;

TAILWIND

colors: {
  'brand-1': '#bb9fab',
  'brand-2': '#d6cdce',
  'brand-3': '#d8d9d4',
  'brand-4': '#fbfcba',
  'brand-5': '#f1f8f0',
}

RGB Array

[187, 159, 171], [214, 205, 206], [216, 217, 212], [251, 252, 186], [241, 248, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB9FAB, #D6CDCE, #D8D9D4, #FBFCBA, #F1F8F0 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: #bb9fab; --color-2: #d6cdce; --color-3: #d8d9d4; --color-4: #fbfcba; --color-5: #f1f8f0. 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