#B8BFA1 + #BBBABA + #F89DBF + #CFC471 + #C3CFB4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8BFA1

Willow Green · DarkGray · Apple Green

HEX

#B8BFA1

RGB

rgb(184, 191, 161)

HSL

hsl(74, 19%, 69%)

HSB

hsb(74, 16%, 75%)

CMYK

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

Oklch

oklch(79.1% 0.042 118.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#BBBABA

Silver Gray · Silver · Pearl Gray

HEX

#BBBABA

RGB

rgb(187, 186, 186)

HSL

hsl(0, 1%, 73%)

HSB

hsb(0, 1%, 73%)

CMYK

cmyk(0%, 1%, 1%, 27%)

Oklch

oklch(79.0% 0.001 17.2)

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

#F89DBF

Rouge · LightPink · Cherry Blossom

HEX

#F89DBF

RGB

rgb(248, 157, 191)

HSL

hsl(338, 87%, 79%)

HSB

hsb(338, 37%, 97%)

CMYK

cmyk(0%, 37%, 23%, 3%)

Oklch

oklch(79.7% 0.115 356.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#CFC471

Fresh Green · BurlyWood · Sunflower

HEX

#CFC471

RGB

rgb(207, 196, 113)

HSL

hsl(53, 49%, 63%)

HSB

hsb(53, 45%, 81%)

CMYK

cmyk(0%, 5%, 45%, 19%)

Oklch

oklch(81.1% 0.105 101.8)

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

#C3CFB4

Willow Green · Silver · Apple Green

HEX

#C3CFB4

RGB

rgb(195, 207, 180)

HSL

hsl(87, 22%, 76%)

HSB

hsb(87, 13%, 81%)

CMYK

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

Oklch

oklch(83.8% 0.039 126.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8BFA1

A8A1BF

Analogous

BFB7A1

B8BFA1

A9BFA1

Triadic

B8BFA1

A1B8BF

BFA1B8

Split-Comp.

B8BFA1

A1A9BF

B7A1BF

Tetradic

B8BFA1

A1BFB7

A8A1BF

BFA1A9

Contrast Matrix WCAG 2.1 Contrast

B8BFA1	BBBABA	F89DBF	CFC471	C3CFB4
—	1.0 Fail	1.0 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.0 Fail	1.0 Fail	—	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

1.9Fail

2.0Fail

1.8Fail

1.6Fail

Black BG

11.0AAA

10.8AAA

10.6AAA

11.8AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBA8

BBBBBA

D1D0B7

CACA85

C8C8BB

Deuteranopia

BBBAAA

BBBBBA

D6DDB5

CBCC8A

C8C7BC

Tritanopia

B8AEAF

BBBABA

F3B0AF

CE9598

C4C0C1

Achromatopsia

B9B9B9

BABABA

BCBCBC

BEBEBE

C8C8C8

Shades & Tints Shades & Tints

#B8BFA1

Dark

Light

#BBBABA

Dark

Light

#F89DBF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8bfa1;
  --color-2: #bbbaba;
  --color-3: #f89dbf;
  --color-4: #cfc471;
  --color-5: #c3cfb4;
}

SCSS

$color-1: #b8bfa1;
$color-2: #bbbaba;
$color-3: #f89dbf;
$color-4: #cfc471;
$color-5: #c3cfb4;

TAILWIND

colors: {
  'brand-1': '#b8bfa1',
  'brand-2': '#bbbaba',
  'brand-3': '#f89dbf',
  'brand-4': '#cfc471',
  'brand-5': '#c3cfb4',
}

RGB Array

[184, 191, 161], [187, 186, 186], [248, 157, 191], [207, 196, 113], [195, 207, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8BFA1, #BBBABA, #F89DBF, #CFC471, #C3CFB4 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: #b8bfa1; --color-2: #bbbaba; --color-3: #f89dbf; --color-4: #cfc471; --color-5: #c3cfb4. 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