#D2E8BA + #EFF0CC + #C5E17E + #E3BDAA + #F2A0C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2E8BA

Willow Green · LightGray · Mint Green

HEX

#D2E8BA

RGB

rgb(210, 232, 186)

HSL

hsl(89, 50%, 82%)

HSB

hsb(89, 20%, 91%)

CMYK

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

Oklch

oklch(90.3% 0.065 128.5)

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

#EFF0CC

Fresh Green · Beige · Lemon Cream

HEX

#EFF0CC

RGB

rgb(239, 240, 204)

HSL

hsl(62, 55%, 87%)

HSB

hsb(62, 15%, 94%)

CMYK

cmyk(0%, 0%, 15%, 6%)

Oklch

oklch(94.5% 0.047 108.6)

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

#C5E17E

Willow Green · Khaki · Apple Green

HEX

#C5E17E

RGB

rgb(197, 225, 126)

HSL

hsl(77, 62%, 69%)

HSB

hsb(77, 44%, 88%)

CMYK

cmyk(12%, 0%, 44%, 12%)

Oklch

oklch(86.7% 0.129 122.1)

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

#E3BDAA

Apricot · Tan · Peach Orange

HEX

#E3BDAA

RGB

rgb(227, 189, 170)

HSL

hsl(20, 50%, 78%)

HSB

hsb(20, 25%, 89%)

CMYK

cmyk(0%, 17%, 25%, 11%)

Oklch

oklch(82.7% 0.051 48.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F2A0C1

Rouge · LightPink · Cherry Blossom

HEX

#F2A0C1

RGB

rgb(242, 160, 193)

HSL

hsl(336, 76%, 79%)

HSB

hsb(336, 34%, 95%)

CMYK

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

Oklch

oklch(79.6% 0.105 354.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2E8BA

D0BAE8

Analogous

E8E7BA

D2E8BA

BBE8BA

Triadic

D2E8BA

BAD2E8

E8BAD2

Split-Comp.

D2E8BA

BABBE8

E7BAE8

Tetradic

D2E8BA

BAE8E7

D0BAE8

E8BABB

Contrast Matrix WCAG 2.1 Contrast

D2E8BA	EFF0CC	C5E17E	E3BDAA	F2A0C1
—	1.1 Fail	1.1 Fail	1.3 Fail	1.5 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.3 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
1.5 Fail	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

1.3Fail

1.2Fail

1.5Fail

1.7Fail

2.0Fail

Black BG

16.0AAA

18.0AAA

14.4AAA

12.1AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC5

EFEFD5

D1D196

D3D2AF

CECEB9

Deuteranopia

DAD9C8

EFEFD7

D0CD9C

D5D8B0

D3D9B7

Tritanopia

D3CED0

EFDCDD

C6A9AD

E1B2B3

EEB3B1

Achromatopsia

DCDCDC

ECECEC

CDCDCD

C6C6C6

BCBCBC

Shades & Tints Shades & Tints

#D2E8BA

Dark

Light

#EFF0CC

Dark

Light

#C5E17E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2e8ba;
  --color-2: #eff0cc;
  --color-3: #c5e17e;
  --color-4: #e3bdaa;
  --color-5: #f2a0c1;
}

SCSS

$color-1: #d2e8ba;
$color-2: #eff0cc;
$color-3: #c5e17e;
$color-4: #e3bdaa;
$color-5: #f2a0c1;

TAILWIND

colors: {
  'brand-1': '#d2e8ba',
  'brand-2': '#eff0cc',
  'brand-3': '#c5e17e',
  'brand-4': '#e3bdaa',
  'brand-5': '#f2a0c1',
}

RGB Array

[210, 232, 186], [239, 240, 204], [197, 225, 126], [227, 189, 170], [242, 160, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2E8BA, #EFF0CC, #C5E17E, #E3BDAA, #F2A0C1 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: #d2e8ba; --color-2: #eff0cc; --color-3: #c5e17e; --color-4: #e3bdaa; --color-5: #f2a0c1. 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