#B8889E + #B0CBC2 + #FDEBD3 + #FDFAF5 + #EBC3C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8889E

Rouge · DarkGray · Rose Pink

HEX

#B8889E

RGB

rgb(184, 136, 158)

HSL

hsl(333, 25%, 63%)

HSB

hsb(333, 26%, 72%)

CMYK

cmyk(0%, 26%, 14%, 28%)

Oklch

oklch(68.0% 0.065 349.8)

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

#B0CBC2

Jade · Silver · Lake Green

HEX

#B0CBC2

RGB

rgb(176, 203, 194)

HSL

hsl(160, 21%, 74%)

HSB

hsb(160, 13%, 80%)

CMYK

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

Oklch

oklch(81.9% 0.032 173.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#FDEBD3

Goose Yellow · Beige · Peach Orange

HEX

#FDEBD3

RGB

rgb(253, 235, 211)

HSL

hsl(34, 91%, 91%)

HSB

hsb(34, 17%, 99%)

CMYK

cmyk(0%, 7%, 17%, 1%)

Oklch

oklch(94.8% 0.037 75.2)

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

#FDFAF5

Goose Yellow · Snow · Peach Orange

HEX

#FDFAF5

RGB

rgb(253, 250, 245)

HSL

hsl(37, 67%, 98%)

HSB

hsb(37, 3%, 99%)

CMYK

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

Oklch

oklch(98.6% 0.007 80.7)

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

#EBC3C4

Peach Pink · Pink · Cherry Blossom

HEX

#EBC3C4

RGB

rgb(235, 195, 196)

HSL

hsl(358, 50%, 84%)

HSB

hsb(358, 17%, 92%)

CMYK

cmyk(0%, 17%, 17%, 8%)

Oklch

oklch(85.2% 0.046 16.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8889E

89B8A3

Analogous

B889B6

B8889E

B88B89

Triadic

B8889E

9EB889

899EB8

Split-Comp.

B8889E

89B88B

89B6B8

Tetradic

B8889E

B6B889

89B8A3

8B89B8

Contrast Matrix WCAG 2.1 Contrast

B8889E	B0CBC2	FDEBD3	FDFAF5	EBC3C4
—	1.7 Fail	2.6 Fail	2.9 Fail	1.9 Fail
1.7 Fail	—	1.5 Fail	1.7 Fail	1.1 Fail
2.6 Fail	1.5 Fail	—	1.1 Fail	1.4 Fail
2.9 Fail	1.7 Fail	1.1 Fail	—	1.5 Fail
1.9 Fail	1.1 Fail	1.4 Fail	1.5 Fail	—

White BG

3.0Fail

1.7Fail

1.2Fail

1.0Fail

1.6Fail

Black BG

7.1AAA

12.2AAA

18.0AAA

20.2AAA

13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A399

BCBCC4

F5F5D9

FCFCF6

DAD9C4

Deuteranopia

A6AA97

BAB8C5

F6F8DA

FCFCF7

DCDFC4

Tritanopia

B69494

B1C6C6

FCDDDE

FDF7F7

E9C4C4

Achromatopsia

999999

C2C2C2

EEEEEE

FAFAFA

CFCFCF

Shades & Tints Shades & Tints

#B8889E

Dark

Light

#B0CBC2

Dark

Light

#FDEBD3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8889e;
  --color-2: #b0cbc2;
  --color-3: #fdebd3;
  --color-4: #fdfaf5;
  --color-5: #ebc3c4;
}

SCSS

$color-1: #b8889e;
$color-2: #b0cbc2;
$color-3: #fdebd3;
$color-4: #fdfaf5;
$color-5: #ebc3c4;

TAILWIND

colors: {
  'brand-1': '#b8889e',
  'brand-2': '#b0cbc2',
  'brand-3': '#fdebd3',
  'brand-4': '#fdfaf5',
  'brand-5': '#ebc3c4',
}

RGB Array

[184, 136, 158], [176, 203, 194], [253, 235, 211], [253, 250, 245], [235, 195, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8889E, #B0CBC2, #FDEBD3, #FDFAF5, #EBC3C4 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: #b8889e; --color-2: #b0cbc2; --color-3: #fdebd3; --color-4: #fdfaf5; --color-5: #ebc3c4. 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