#D1EBD7 + #D1E2CD + #E2E7CC + #ECEDCB + #F1ECD9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1EBD7

Celadon · LightGray · Mint Green

HEX

#D1EBD7

RGB

rgb(209, 235, 215)

HSL

hsl(134, 39%, 87%)

HSB

hsb(134, 11%, 92%)

CMYK

cmyk(11%, 0%, 9%, 8%)

Oklch

oklch(91.6% 0.038 152.4)

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

#D1E2CD

Celadon · LightGray · Mint Green

HEX

#D1E2CD

RGB

rgb(209, 226, 205)

HSL

hsl(109, 27%, 85%)

HSB

hsb(109, 9%, 89%)

CMYK

cmyk(8%, 0%, 9%, 11%)

Oklch

oklch(89.4% 0.034 139.7)

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

#E2E7CC

Willow Green · LightGray · Mint Green

HEX

#E2E7CC

RGB

rgb(226, 231, 204)

HSL

hsl(71, 36%, 85%)

HSB

hsb(71, 12%, 91%)

CMYK

cmyk(2%, 0%, 12%, 9%)

Oklch

oklch(91.7% 0.036 115.6)

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

#ECEDCB

Fresh Green · Beige · Lemon Cream

HEX

#ECEDCB

RGB

rgb(236, 237, 203)

HSL

hsl(62, 49%, 86%)

HSB

hsb(62, 14%, 93%)

CMYK

cmyk(0%, 0%, 14%, 7%)

Oklch

oklch(93.7% 0.045 108.6)

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

#F1ECD9

Goose Yellow · Beige · Lemon Cream

HEX

#F1ECD9

RGB

rgb(241, 236, 217)

HSL

hsl(48, 46%, 90%)

HSB

hsb(48, 10%, 95%)

CMYK

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

Oklch

oklch(94.2% 0.026 94.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1EBD7

EBD1E5

Analogous

D8EBD1

D1EBD7

D1EBE4

Triadic

D1EBD7

D7D1EB

EBD7D1

Split-Comp.

D1EBD7

E4D1EB

EBD1D8

Tetradic

D1EBD7

D1D8EB

EBD1E5

EBE4D1

Contrast Matrix WCAG 2.1 Contrast

D1EBD7	D1E2CD	E2E7CC	ECEDCB	F1ECD9
—	1.1 Fail	1.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.3Fail

1.4Fail

1.3Fail

1.2Fail

Black BG

16.6AAA

15.5AAA

16.5AAA

17.5AAA

17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCDC

D8D9D2

E4E4D3

ECECD3

EFEFDE

Deuteranopia

DBD9DD

D7D6D3

E4E4D4

ECECD5

EFF0DF

Tritanopia

D2E0E1

D2D6D7

E2D8D9

ECDADB

F1E1E2

Achromatopsia

E1E1E1

DBDBDB

E2E2E2

E9E9E9

EBEBEB

Shades & Tints Shades & Tints

#D1EBD7

Dark

Light

#D1E2CD

Dark

Light

#E2E7CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1ebd7;
  --color-2: #d1e2cd;
  --color-3: #e2e7cc;
  --color-4: #ecedcb;
  --color-5: #f1ecd9;
}

SCSS

$color-1: #d1ebd7;
$color-2: #d1e2cd;
$color-3: #e2e7cc;
$color-4: #ecedcb;
$color-5: #f1ecd9;

TAILWIND

colors: {
  'brand-1': '#d1ebd7',
  'brand-2': '#d1e2cd',
  'brand-3': '#e2e7cc',
  'brand-4': '#ecedcb',
  'brand-5': '#f1ecd9',
}

RGB Array

[209, 235, 215], [209, 226, 205], [226, 231, 204], [236, 237, 203], [241, 236, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1EBD7, #D1E2CD, #E2E7CC, #ECEDCB, #F1ECD9 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: #d1ebd7; --color-2: #d1e2cd; --color-3: #e2e7cc; --color-4: #ecedcb; --color-5: #f1ecd9. 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