#BFBBB6 + #FABBD2 + #FFD3C4 + #E9EAC2 + #D2E3C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BFBBB6

Silver Gray · Silver · Pearl Gray

HEX

#BFBBB6

RGB

rgb(191, 187, 182)

HSL

hsl(33, 7%, 73%)

HSB

hsb(33, 5%, 75%)

CMYK

cmyk(0%, 2%, 5%, 25%)

Oklch

oklch(79.4% 0.008 73.7)

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

#FABBD2

Rouge · Pink · Cherry Blossom

HEX

#FABBD2

RGB

rgb(250, 187, 210)

HSL

hsl(338, 86%, 86%)

HSB

hsb(338, 25%, 98%)

CMYK

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

Oklch

oklch(85.6% 0.078 355.2)

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

#FFD3C4

Apricot · Bisque · Peach Orange

HEX

#FFD3C4

RGB

rgb(255, 211, 196)

HSL

hsl(15, 100%, 88%)

HSB

hsb(15, 23%, 100%)

CMYK

cmyk(0%, 17%, 23%, 0%)

Oklch

oklch(90.1% 0.054 39.7)

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

#E9EAC2

Fresh Green · Wheat · Lemon Cream

HEX

#E9EAC2

RGB

rgb(233, 234, 194)

HSL

hsl(61, 49%, 84%)

HSB

hsb(61, 17%, 92%)

CMYK

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

Oklch

oklch(92.6% 0.052 108.6)

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

#D2E3C1

Celadon · LightGray · Mint Green

HEX

#D2E3C1

RGB

rgb(210, 227, 193)

HSL

hsl(90, 38%, 82%)

HSB

hsb(90, 15%, 89%)

CMYK

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

Oklch

oklch(89.4% 0.049 129.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFBBB6

B5BABF

Analogous

BFB6B5

BFBBB6

BEBFB5

Triadic

BFBBB6

B5BFBB

BBB5BF

Split-Comp.

BFBBB6

B5BEBF

B6B5BF

Tetradic

BFBBB6

B5BFB6

B5BABF

BFB5BE

Contrast Matrix WCAG 2.1 Contrast

BFBBB6	FABBD2	FFD3C4	E9EAC2	D2E3C1
—	1.2 Fail	1.4 Fail	1.5 Fail	1.4 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

1.9Fail

1.6Fail

1.4Fail

1.2Fail

1.4Fail

Black BG

11.0AAA

13.1AAA

15.4AAA

17.0AAA

15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDB7

DFDECC

ECECC8

E9E9CC

D9DAC9

Deuteranopia

BEBEB8

E2E7CB

EFF2C9

E9E9CE

D8D7CB

Tritanopia

BFB8B8

F7C8C7

FDCACB

E9D3D5

D3D0D1

Achromatopsia

BCBCBC

D0D0D0

DEDEDE

E5E5E5

DADADA

Shades & Tints Shades & Tints

#BFBBB6

Dark

Light

#FABBD2

Dark

Light

#FFD3C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfbbb6;
  --color-2: #fabbd2;
  --color-3: #ffd3c4;
  --color-4: #e9eac2;
  --color-5: #d2e3c1;
}

SCSS

$color-1: #bfbbb6;
$color-2: #fabbd2;
$color-3: #ffd3c4;
$color-4: #e9eac2;
$color-5: #d2e3c1;

TAILWIND

colors: {
  'brand-1': '#bfbbb6',
  'brand-2': '#fabbd2',
  'brand-3': '#ffd3c4',
  'brand-4': '#e9eac2',
  'brand-5': '#d2e3c1',
}

RGB Array

[191, 187, 182], [250, 187, 210], [255, 211, 196], [233, 234, 194], [210, 227, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFBBB6, #FABBD2, #FFD3C4, #E9EAC2, #D2E3C1 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: #bfbbb6; --color-2: #fabbd2; --color-3: #ffd3c4; --color-4: #e9eac2; --color-5: #d2e3c1. 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