#D2DCB6 + #E2E8CF + #C3D09D + #A6B185 + #F0F3E6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2DCB6

Willow Green · LightGray · Apple Green

HEX

#D2DCB6

RGB

rgb(210, 220, 182)

HSL

hsl(76, 35%, 79%)

HSB

hsb(76, 17%, 86%)

CMYK

cmyk(5%, 0%, 17%, 14%)

Oklch

oklch(87.7% 0.052 119.5)

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

#E2E8CF

Willow Green · LightGray · Mint Green

HEX

#E2E8CF

RGB

rgb(226, 232, 207)

HSL

hsl(74, 35%, 86%)

HSB

hsb(74, 11%, 91%)

CMYK

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

Oklch

oklch(92.0% 0.034 118.0)

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

#C3D09D

Willow Green · Tan · Apple Green

HEX

#C3D09D

RGB

rgb(195, 208, 157)

HSL

hsl(75, 35%, 72%)

HSB

hsb(75, 25%, 82%)

CMYK

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

Oklch

oklch(83.5% 0.070 119.5)

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

#A6B185

Willow Green · DarkSeaGreen · Apple Green

HEX

#A6B185

RGB

rgb(166, 177, 133)

HSL

hsl(75, 22%, 61%)

HSB

hsb(75, 25%, 69%)

CMYK

cmyk(6%, 0%, 25%, 31%)

Oklch

oklch(74.0% 0.062 119.3)

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

#F0F3E6

Willow Green · Linen · Mint Green

HEX

#F0F3E6

RGB

rgb(240, 243, 230)

HSL

hsl(74, 35%, 93%)

HSB

hsb(74, 5%, 95%)

CMYK

cmyk(1%, 0%, 5%, 5%)

Oklch

oklch(95.8% 0.017 117.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2DCB6

C1B7DC

Analogous

DCD3B7

D2DCB6

BFDCB7

Triadic

D2DCB6

B7D2DC

DCB7D2

Split-Comp.

D2DCB6

B7BFDC

D3B7DC

Tetradic

D2DCB6

B7DCD3

C1B7DC

DCB7BF

Contrast Matrix WCAG 2.1 Contrast

D2DCB6	E2E8CF	C3D09D	A6B185	F0F3E6
—	1.1 Fail	1.1 Fail	1.6 Fail	1.3 Fail
1.1 Fail	—	1.3 Fail	1.8 Fail	1.1 Fail
1.1 Fail	1.3 Fail	—	1.4 Fail	1.5 Fail
1.6 Fail	1.8 Fail	1.4 Fail	—	2.0 Fail
1.3 Fail	1.1 Fail	1.5 Fail	2.0 Fail	—

White BG

1.4Fail

1.3Fail

1.6Fail

2.3Fail

1.1Fail

Black BG

14.7AAA

16.7AAA

12.8AAA

9.2AAA

18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6BF

E5E5D5

C9C9A9

ABAB90

F1F1E9

Deuteranopia

D6D5C1

E4E4D6

C8C7AC

AAA992

F1F1EA

Tritanopia

D3C6C8

E2DADB

C4B3B5

A7989A

F0ECEC

Achromatopsia

D5D5D5

E3E3E3

C6C6C6

A9A9A9

F1F1F1

Shades & Tints Shades & Tints

#D2DCB6

Dark

Light

#E2E8CF

Dark

Light

#C3D09D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2dcb6;
  --color-2: #e2e8cf;
  --color-3: #c3d09d;
  --color-4: #a6b185;
  --color-5: #f0f3e6;
}

SCSS

$color-1: #d2dcb6;
$color-2: #e2e8cf;
$color-3: #c3d09d;
$color-4: #a6b185;
$color-5: #f0f3e6;

TAILWIND

colors: {
  'brand-1': '#d2dcb6',
  'brand-2': '#e2e8cf',
  'brand-3': '#c3d09d',
  'brand-4': '#a6b185',
  'brand-5': '#f0f3e6',
}

RGB Array

[210, 220, 182], [226, 232, 207], [195, 208, 157], [166, 177, 133], [240, 243, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2DCB6, #E2E8CF, #C3D09D, #A6B185, #F0F3E6 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: #d2dcb6; --color-2: #e2e8cf; --color-3: #c3d09d; --color-4: #a6b185; --color-5: #f0f3e6. 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