#BFDDD2 + #DCE9DF + #FBF9ED + #AD9D7C + #E4E6CF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BFDDD2

Jade · LightGray · Mint Green

HEX

#BFDDD2

RGB

rgb(191, 221, 210)

HSL

hsl(158, 31%, 81%)

HSB

hsb(158, 14%, 87%)

CMYK

cmyk(14%, 0%, 5%, 13%)

Oklch

oklch(87.2% 0.035 171.4)

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

#DCE9DF

Celadon · LightGray · Mint Green

HEX

#DCE9DF

RGB

rgb(220, 233, 223)

HSL

hsl(134, 23%, 89%)

HSB

hsb(134, 6%, 91%)

CMYK

cmyk(6%, 0%, 4%, 9%)

Oklch

oklch(92.1% 0.019 152.8)

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

#FBF9ED

Fresh Green · SeaShell · Lemon Cream

HEX

#FBF9ED

RGB

rgb(251, 249, 237)

HSL

hsl(51, 64%, 96%)

HSB

hsb(51, 6%, 98%)

CMYK

cmyk(0%, 1%, 6%, 2%)

Oklch

oklch(98.0% 0.016 99.0)

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

#AD9D7C

Ginger · Tan · Sunflower

HEX

#AD9D7C

RGB

rgb(173, 157, 124)

HSL

hsl(40, 23%, 58%)

HSB

hsb(40, 28%, 68%)

CMYK

cmyk(0%, 9%, 28%, 32%)

Oklch

oklch(70.1% 0.049 85.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E4E6CF

Fresh Green · LightGray · Lemon Cream

HEX

#E4E6CF

RGB

rgb(228, 230, 207)

HSL

hsl(65, 32%, 86%)

HSB

hsb(65, 10%, 90%)

CMYK

cmyk(1%, 0%, 10%, 10%)

Oklch

oklch(91.7% 0.031 111.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFDDD2

DEC0CB

Analogous

C0DEC4

BFDDD2

C0DADE

Triadic

BFDDD2

D3C0DE

DED3C0

Split-Comp.

BFDDD2

DEC0DA

DEC4C0

Tetradic

BFDDD2

C4C0DE

DEC0CB

DADEC0

Contrast Matrix WCAG 2.1 Contrast

BFDDD2	DCE9DF	FBF9ED	AD9D7C	E4E6CF
—	1.2 Fail	1.4 Fail	1.8 Fail	1.1 Fail
1.2 Fail	—	1.2 Fail	2.1 Fail	1.0 Fail
1.4 Fail	1.2 Fail	—	2.5 Fail	1.2 Fail
1.8 Fail	2.1 Fail	2.5 Fail	—	2.1 Fail
1.1 Fail	1.0 Fail	1.2 Fail	2.1 Fail	—

White BG

1.4Fail

1.3Fail

1.1Fail

2.7Fail

1.3Fail

Black BG

14.5AAA

16.8AAA

19.9AAA

7.9AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCD5

E2E2E1

FAFAF0

A6A684

E5E5D5

Deuteranopia

CAC8D5

E1E0E2

FAFAF1

A7A886

E5E5D6

Tritanopia

C1D7D7

DDE3E4

FBF2F3

AC8A8C

E4D9DA

Achromatopsia

D3D3D3

E4E4E4

F8F8F8

9E9E9E

E3E3E3

Shades & Tints Shades & Tints

#BFDDD2

Dark

Light

#DCE9DF

Dark

Light

#FBF9ED

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfddd2;
  --color-2: #dce9df;
  --color-3: #fbf9ed;
  --color-4: #ad9d7c;
  --color-5: #e4e6cf;
}

SCSS

$color-1: #bfddd2;
$color-2: #dce9df;
$color-3: #fbf9ed;
$color-4: #ad9d7c;
$color-5: #e4e6cf;

TAILWIND

colors: {
  'brand-1': '#bfddd2',
  'brand-2': '#dce9df',
  'brand-3': '#fbf9ed',
  'brand-4': '#ad9d7c',
  'brand-5': '#e4e6cf',
}

RGB Array

[191, 221, 210], [220, 233, 223], [251, 249, 237], [173, 157, 124], [228, 230, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFDDD2, #DCE9DF, #FBF9ED, #AD9D7C, #E4E6CF 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: #bfddd2; --color-2: #dce9df; --color-3: #fbf9ed; --color-4: #ad9d7c; --color-5: #e4e6cf. 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