← Back to Editor

#D6F4A2 · #E3E7D9 · #D8D9D4 · #C3C8C3 · #CCDAD1

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D6F4A2

Willow Green · Khaki · Apple Green

HEX
#D6F4A2
RGB
rgb(214, 244, 162)
HSL
hsl(82, 79%, 80%)
HSB
hsb(82, 34%, 96%)
CMYK
cmyk(12%, 0%, 34%, 4%)
Oklch
oklch(92.6% 0.110 124.8)

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

#E3E7D9

Willow Green · Beige · Mint Green

HEX
#E3E7D9
RGB
rgb(227, 231, 217)
HSL
hsl(77, 23%, 88%)
HSB
hsb(77, 6%, 91%)
CMYK
cmyk(2%, 0%, 6%, 9%)
Oklch
oklch(92.1% 0.019 119.8)

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

#D8D9D4

Silver Gray · LightGray · Pearl Gray

HEX
#D8D9D4
RGB
rgb(216, 217, 212)
HSL
hsl(72, 6%, 84%)
HSB
hsb(72, 2%, 85%)
CMYK
cmyk(0%, 0%, 2%, 15%)
Oklch
oklch(88.3% 0.007 115.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#C3C8C3

Silver Gray · Silver · Pearl Gray

HEX
#C3C8C3
RGB
rgb(195, 200, 195)
HSL
hsl(120, 4%, 77%)
HSB
hsb(120, 3%, 78%)
CMYK
cmyk(3%, 0%, 3%, 22%)
Oklch
oklch(82.7% 0.009 145.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#CCDAD1

Celadon · LightGray · Mint Green

HEX
#CCDAD1
RGB
rgb(204, 218, 209)
HSL
hsl(141, 16%, 83%)
HSB
hsb(141, 6%, 85%)
CMYK
cmyk(6%, 0%, 4%, 15%)
Oklch
oklch(87.5% 0.019 157.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6F4A2
C1A4F4

Analogous

F4EAA4
D6F4A2
AEF4A4

Triadic

D6F4A2
A4D7F4
F4A4D7

Split-Comp.

D6F4A2
A4AEF4
EAA4F4

Tetradic

D6F4A2
A4F4EA
C1A4F4
F4A4AE

Contrast Matrix WCAG 2.1 Contrast

D6F4A2
E3E7D9
D8D9D4
C3C8C3
CCDAD1
—
1.0
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.2
Fail
—
White BG
1.2Fail
1.3Fail
1.4Fail
1.7Fail
1.4Fail
Black BG
17.3AAA
16.7AAA
14.8AAA
12.4AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3B6
E5E5DC
D8D8D5
C5C5C4
D2D2D3

Deuteranopia

E1DFBB
E5E4DD
D8D8D5
C5C5C5
D1D0D4

Tritanopia

D7C6C9
E3DFE0
D8D6D6
C3C5C5
CDD5D5

Achromatopsia

E2E2E2
E4E4E4
D8D8D8
C6C6C6
D5D5D5

Shades & Tints Shades & Tints

#D6F4A2

Dark
Light

#E3E7D9

Dark
Light

#D8D9D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6f4a2;
  --color-2: #e3e7d9;
  --color-3: #d8d9d4;
  --color-4: #c3c8c3;
  --color-5: #ccdad1;
}

SCSS

$color-1: #d6f4a2;
$color-2: #e3e7d9;
$color-3: #d8d9d4;
$color-4: #c3c8c3;
$color-5: #ccdad1;

TAILWIND

colors: {
  'brand-1': '#d6f4a2',
  'brand-2': '#e3e7d9',
  'brand-3': '#d8d9d4',
  'brand-4': '#c3c8c3',
  'brand-5': '#ccdad1',
}

RGB Array

[214, 244, 162], [227, 231, 217], [216, 217, 212], [195, 200, 195], [204, 218, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6F4A2, #E3E7D9, #D8D9D4, #C3C8C3, #CCDAD1 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d6f4a2; --color-2: #e3e7d9; --color-3: #d8d9d4; --color-4: #c3c8c3; --color-5: #ccdad1. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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