#D9E6BC + #FFFDF0 + #E1F4F0 + #A7DFD3 + #F5F3E3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D9E6BC

Willow Green · LightGray · Mint Green

HEX

#D9E6BC

RGB

rgb(217, 230, 188)

HSL

hsl(79, 46%, 82%)

HSB

hsb(79, 18%, 90%)

CMYK

cmyk(6%, 0%, 18%, 10%)

Oklch

oklch(90.4% 0.057 121.5)

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

#FFFDF0

Fresh Green · SeaShell · Lemon Cream

HEX

#FFFDF0

RGB

rgb(255, 253, 240)

HSL

hsl(52, 100%, 97%)

HSB

hsb(52, 6%, 100%)

CMYK

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

Oklch

oklch(99.2% 0.017 99.6)

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

#E1F4F0

Jade · Lavender · Glacier Blue

HEX

#E1F4F0

RGB

rgb(225, 244, 240)

HSL

hsl(167, 46%, 92%)

HSB

hsb(167, 8%, 96%)

CMYK

cmyk(8%, 0%, 2%, 4%)

Oklch

oklch(95.2% 0.021 181.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#A7DFD3

Jade · LightBlue · Glacier Blue

HEX

#A7DFD3

RGB

rgb(167, 223, 211)

HSL

hsl(167, 47%, 76%)

HSB

hsb(167, 25%, 87%)

CMYK

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

Oklch

oklch(86.2% 0.060 180.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F5F3E3

Fresh Green · Linen · Lemon Cream

HEX

#F5F3E3

RGB

rgb(245, 243, 227)

HSL

hsl(53, 47%, 93%)

HSB

hsb(53, 7%, 96%)

CMYK

cmyk(0%, 1%, 7%, 4%)

Oklch

oklch(96.1% 0.021 101.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9E6BC

C9BCE6

Analogous

E6DEBC

D9E6BC

C4E6BC

Triadic

D9E6BC

BCD9E6

E6BCD9

Split-Comp.

D9E6BC

BCC4E6

DEBCE6

Tetradic

D9E6BC

BCE6DE

C9BCE6

E6BCC4

Contrast Matrix WCAG 2.1 Contrast

D9E6BC	FFFDF0	E1F4F0	A7DFD3	F5F3E3
—	1.3 Fail	1.2 Fail	1.1 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.5 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.3 Fail	1.0 Fail
1.1 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
1.2 Fail	1.1 Fail	1.0 Fail	1.3 Fail	—

White BG

1.3Fail

1.0Fail

1.1Fail

1.5Fail

1.1Fail

Black BG

16.0AAA

20.6AAA

18.4AAA

14.1AAA

18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFC6

FEFEF3

E9E9F1

BFC0D6

F4F4E7

Deuteranopia

DEDDC9

FEFEF4

E8E7F1

BCB8D7

F4F4E8

Tritanopia

DACED0

FFF6F6

E2F2F2

AAD8D9

F5EAEB

Achromatopsia

DDDDDD

FCFCFC

EEEEEE

CDCDCD

F2F2F2

Shades & Tints Shades & Tints

#D9E6BC

Dark

Light

#FFFDF0

Dark

Light

#E1F4F0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9e6bc;
  --color-2: #fffdf0;
  --color-3: #e1f4f0;
  --color-4: #a7dfd3;
  --color-5: #f5f3e3;
}

SCSS

$color-1: #d9e6bc;
$color-2: #fffdf0;
$color-3: #e1f4f0;
$color-4: #a7dfd3;
$color-5: #f5f3e3;

TAILWIND

colors: {
  'brand-1': '#d9e6bc',
  'brand-2': '#fffdf0',
  'brand-3': '#e1f4f0',
  'brand-4': '#a7dfd3',
  'brand-5': '#f5f3e3',
}

RGB Array

[217, 230, 188], [255, 253, 240], [225, 244, 240], [167, 223, 211], [245, 243, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9E6BC, #FFFDF0, #E1F4F0, #A7DFD3, #F5F3E3 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: #d9e6bc; --color-2: #fffdf0; --color-3: #e1f4f0; --color-4: #a7dfd3; --color-5: #f5f3e3. 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