#BBBD9E + #EED0BA + #F3E3B2 + #E7E7B3 + #F5E8C9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBBD9E

Fresh Green · DarkGray · Sunflower

HEX

#BBBD9E

RGB

rgb(187, 189, 158)

HSL

hsl(64, 19%, 68%)

HSB

hsb(64, 16%, 74%)

CMYK

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

Oklch

oklch(78.9% 0.042 110.4)

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

#EED0BA

Apricot · Wheat · Peach Orange

HEX

#EED0BA

RGB

rgb(238, 208, 186)

HSL

hsl(25, 60%, 83%)

HSB

hsb(25, 22%, 93%)

CMYK

cmyk(0%, 13%, 22%, 7%)

Oklch

oklch(87.7% 0.045 58.4)

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

#F3E3B2

Goose Yellow · Wheat · Lemon Cream

HEX

#F3E3B2

RGB

rgb(243, 227, 178)

HSL

hsl(45, 73%, 83%)

HSB

hsb(45, 27%, 95%)

CMYK

cmyk(0%, 7%, 27%, 5%)

Oklch

oklch(91.7% 0.066 92.1)

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

#E7E7B3

Fresh Green · Wheat · Lemon Cream

HEX

#E7E7B3

RGB

rgb(231, 231, 179)

HSL

hsl(60, 52%, 80%)

HSB

hsb(60, 23%, 91%)

CMYK

cmyk(0%, 0%, 23%, 9%)

Oklch

oklch(91.5% 0.068 107.7)

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

#F5E8C9

Goose Yellow · Bisque · Lemon Cream

HEX

#F5E8C9

RGB

rgb(245, 232, 201)

HSL

hsl(42, 69%, 87%)

HSB

hsb(42, 18%, 96%)

CMYK

cmyk(0%, 5%, 18%, 4%)

Oklch

oklch(93.3% 0.043 88.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBBD9E

A09EBD

Analogous

BDAF9E

BBBD9E

ABBD9E

Triadic

BBBD9E

9EBBBD

BD9EBB

Split-Comp.

BBBD9E

9EABBD

AF9EBD

Tetradic

BBBD9E

9EBDAF

A09EBD

BD9EAB

Contrast Matrix WCAG 2.1 Contrast

BBBD9E	EED0BA	F3E3B2	E7E7B3	F5E8C9
—	1.3 Fail	1.5 Fail	1.5 Fail	1.6 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.5 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.5 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.6 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

10.9AAA

14.4AAA

16.4AAA

16.5AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCA6

E1E1BF

ECECBE

E7E7C0

EFEFD1

Deuteranopia

BCBCA7

E3E5C1

EDEEC1

E7E7C3

F0F1D2

Tritanopia

BBABAD

EDC4C4

F2C7C9

E7CACC

F4D6D8

Achromatopsia

B9B9B9

D6D6D6

E2E2E2

E1E1E1

E8E8E8

Shades & Tints Shades & Tints

#BBBD9E

Dark

Light

#EED0BA

Dark

Light

#F3E3B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbbd9e;
  --color-2: #eed0ba;
  --color-3: #f3e3b2;
  --color-4: #e7e7b3;
  --color-5: #f5e8c9;
}

SCSS

$color-1: #bbbd9e;
$color-2: #eed0ba;
$color-3: #f3e3b2;
$color-4: #e7e7b3;
$color-5: #f5e8c9;

TAILWIND

colors: {
  'brand-1': '#bbbd9e',
  'brand-2': '#eed0ba',
  'brand-3': '#f3e3b2',
  'brand-4': '#e7e7b3',
  'brand-5': '#f5e8c9',
}

RGB Array

[187, 189, 158], [238, 208, 186], [243, 227, 178], [231, 231, 179], [245, 232, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBBD9E, #EED0BA, #F3E3B2, #E7E7B3, #F5E8C9 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: #bbbd9e; --color-2: #eed0ba; --color-3: #f3e3b2; --color-4: #e7e7b3; --color-5: #f5e8c9. 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