#F5FBDF + #DDE5CE + #BDB99E + #E6C856 + #DE84A8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5FBDF

Willow Green · Beige · Mint Green

HEX

#F5FBDF

RGB

rgb(245, 251, 223)

HSL

hsl(73, 78%, 93%)

HSB

hsb(73, 11%, 98%)

CMYK

cmyk(2%, 0%, 11%, 2%)

Oklch

oklch(97.6% 0.037 116.9)

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

#DDE5CE

Willow Green · LightGray · Mint Green

HEX

#DDE5CE

RGB

rgb(221, 229, 206)

HSL

hsl(81, 31%, 85%)

HSB

hsb(81, 10%, 90%)

CMYK

cmyk(3%, 0%, 10%, 10%)

Oklch

oklch(91.0% 0.032 122.7)

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

#BDB99E

Fresh Green · DarkGray · Sunflower

HEX

#BDB99E

RGB

rgb(189, 185, 158)

HSL

hsl(52, 19%, 68%)

HSB

hsb(52, 16%, 74%)

CMYK

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

Oklch

oklch(78.2% 0.037 100.3)

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

#E6C856

Ginger · SandyBrown · Sunflower

HEX

#E6C856

RGB

rgb(230, 200, 86)

HSL

hsl(48, 74%, 62%)

HSB

hsb(48, 63%, 90%)

CMYK

cmyk(0%, 13%, 63%, 10%)

Oklch

oklch(83.7% 0.136 94.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DE84A8

Rouge · LightCoral · Rose Pink

HEX

#DE84A8

RGB

rgb(222, 132, 168)

HSL

hsl(336, 58%, 69%)

HSB

hsb(336, 41%, 87%)

CMYK

cmyk(0%, 41%, 24%, 13%)

Oklch

oklch(71.9% 0.118 355.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5FBDF

E5DFFB

Analogous

FBF3DF

F5FBDF

E7FBDF

Triadic

F5FBDF

DFF5FB

FBDFF5

Split-Comp.

F5FBDF

DFE7FB

F3DFFB

Tetradic

F5FBDF

DFFBF3

E5DFFB

FBDFE7

Contrast Matrix WCAG 2.1 Contrast

F5FBDF	DDE5CE	BDB99E	E6C856	DE84A8
—	1.2 Fail	1.9 Fail	1.5 Fail	2.5 Fail
1.2 Fail	—	1.5 Fail	1.3 Fail	2.0 Fail
1.9 Fail	1.5 Fail	—	1.2 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.6 Fail
2.5 Fail	2.0 Fail	1.3 Fail	1.6 Fail	—

White BG

1.1Fail

1.3Fail

2.0Fail

1.6Fail

2.6Fail

Black BG

19.7AAA

16.2AAA

10.6AAA

12.8AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8E6

E0E1D4

BBBBA5

D9D972

B7B69F

Deuteranopia

F7F7E7

E0DFD5

BCBCA6

DBDD78

BCC39D

Tritanopia

F5EBEC

DDD8D9

BDAAAB

E5878C

D99897

Achromatopsia

F6F6F6

E0E0E0

B7B7B7

C4C4C4

A3A3A3

Shades & Tints Shades & Tints

#F5FBDF

Dark

Light

#DDE5CE

Dark

Light

#BDB99E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5fbdf;
  --color-2: #dde5ce;
  --color-3: #bdb99e;
  --color-4: #e6c856;
  --color-5: #de84a8;
}

SCSS

$color-1: #f5fbdf;
$color-2: #dde5ce;
$color-3: #bdb99e;
$color-4: #e6c856;
$color-5: #de84a8;

TAILWIND

colors: {
  'brand-1': '#f5fbdf',
  'brand-2': '#dde5ce',
  'brand-3': '#bdb99e',
  'brand-4': '#e6c856',
  'brand-5': '#de84a8',
}

RGB Array

[245, 251, 223], [221, 229, 206], [189, 185, 158], [230, 200, 86], [222, 132, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5FBDF, #DDE5CE, #BDB99E, #E6C856, #DE84A8 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: #f5fbdf; --color-2: #dde5ce; --color-3: #bdb99e; --color-4: #e6c856; --color-5: #de84a8. 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