#EDFFD1 + #DDF2C1 + #C3DEBB + #DEEAD5 + #F1F6E2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EDFFD1

Willow Green · Beige · Mint Green

HEX

#EDFFD1

RGB

rgb(237, 255, 209)

HSL

hsl(83, 100%, 91%)

HSB

hsb(83, 18%, 100%)

CMYK

cmyk(7%, 0%, 18%, 0%)

Oklch

oklch(97.5% 0.063 124.9)

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

#DDF2C1

Willow Green · Wheat · Mint Green

HEX

#DDF2C1

RGB

rgb(221, 242, 193)

HSL

hsl(86, 65%, 85%)

HSB

hsb(86, 20%, 95%)

CMYK

cmyk(9%, 0%, 20%, 5%)

Oklch

oklch(93.3% 0.068 126.6)

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

#C3DEBB

Celadon · Silver · Apple Green

HEX

#C3DEBB

RGB

rgb(195, 222, 187)

HSL

hsl(106, 35%, 80%)

HSB

hsb(106, 16%, 87%)

CMYK

cmyk(12%, 0%, 16%, 13%)

Oklch

oklch(87.1% 0.055 138.6)

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

#DEEAD5

Celadon · LightGray · Mint Green

HEX

#DEEAD5

RGB

rgb(222, 234, 213)

HSL

hsl(94, 33%, 88%)

HSB

hsb(94, 9%, 92%)

CMYK

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

Oklch

oklch(92.2% 0.031 131.6)

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

#F1F6E2

Willow Green · Beige · Mint Green

HEX

#F1F6E2

RGB

rgb(241, 246, 226)

HSL

hsl(75, 53%, 93%)

HSB

hsb(75, 8%, 96%)

CMYK

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

Oklch

oklch(96.4% 0.027 118.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDFFD1

E3D1FF

Analogous

FFFAD1

EDFFD1

D6FFD1

Triadic

EDFFD1

D1EDFF

FFD1ED

Split-Comp.

EDFFD1

D1D6FF

FAD1FF

Tetradic

EDFFD1

D1FFFA

E3D1FF

FFD1D6

Contrast Matrix WCAG 2.1 Contrast

EDFFD1	DDF2C1	C3DEBB	DEEAD5	F1F6E2
—	1.1 Fail	1.4 Fail	1.2 Fail	1.0 Fail
1.1 Fail	—	1.2 Fail	1.0 Fail	1.1 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.2 Fail	1.0 Fail	1.2 Fail	—	1.1 Fail
1.0 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.2Fail

1.1Fail

Black BG

19.8AAA

17.5AAA

14.5AAA

16.8AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5DC

E6E6CD

CFCFC3

E3E3DA

F3F3E7

Deuteranopia

F4F2DF

E5E3D0

CDCBC6

E3E2DB

F3F3E8

Tritanopia

EEE5E7

DED6D8

C4CACC

DFDEDF

F1EBEC

Achromatopsia

F4F4F4

E6E6E6

D2D2D2

E4E4E4

F2F2F2

Shades & Tints Shades & Tints

#EDFFD1

Dark

Light

#DDF2C1

Dark

Light

#C3DEBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #edffd1;
  --color-2: #ddf2c1;
  --color-3: #c3debb;
  --color-4: #deead5;
  --color-5: #f1f6e2;
}

SCSS

$color-1: #edffd1;
$color-2: #ddf2c1;
$color-3: #c3debb;
$color-4: #deead5;
$color-5: #f1f6e2;

TAILWIND

colors: {
  'brand-1': '#edffd1',
  'brand-2': '#ddf2c1',
  'brand-3': '#c3debb',
  'brand-4': '#deead5',
  'brand-5': '#f1f6e2',
}

RGB Array

[237, 255, 209], [221, 242, 193], [195, 222, 187], [222, 234, 213], [241, 246, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EDFFD1, #DDF2C1, #C3DEBB, #DEEAD5, #F1F6E2 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: #edffd1; --color-2: #ddf2c1; --color-3: #c3debb; --color-4: #deead5; --color-5: #f1f6e2. 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