← Back to Editor

#D1E1D4 · #EEF2DB · #AF8B41 · #CD7C11 · #9EBBA9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#D1E1D4

Celadon · LightGray · Mint Green

HEX
#D1E1D4
RGB
rgb(209, 225, 212)
HSL
hsl(131, 21%, 85%)
HSB
hsb(131, 7%, 88%)
CMYK
cmyk(7%, 0%, 6%, 12%)
Oklch
oklch(89.4% 0.025 151.2)

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

#EEF2DB

Willow Green · Beige · Mint Green

HEX
#EEF2DB
RGB
rgb(238, 242, 219)
HSL
hsl(70, 47%, 90%)
HSB
hsb(70, 10%, 95%)
CMYK
cmyk(2%, 0%, 10%, 5%)
Oklch
oklch(95.2% 0.031 115.0)

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

#AF8B41

Ochre · DarkGoldenRod · Honey Gold

HEX
#AF8B41
RGB
rgb(175, 139, 65)
HSL
hsl(40, 46%, 47%)
HSB
hsb(40, 63%, 69%)
CMYK
cmyk(0%, 21%, 63%, 31%)
Oklch
oklch(65.6% 0.102 83.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CD7C11

Ochre · Chocolate · Amber Brown

HEX
#CD7C11
RGB
rgb(205, 124, 17)
HSL
hsl(34, 85%, 44%)
HSB
hsb(34, 92%, 80%)
CMYK
cmyk(0%, 40%, 92%, 20%)
Oklch
oklch(65.9% 0.144 64.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#9EBBA9

Celadon · DarkGray · Apple Green

HEX
#9EBBA9
RGB
rgb(158, 187, 169)
HSL
hsl(143, 18%, 68%)
HSB
hsb(143, 16%, 73%)
CMYK
cmyk(16%, 0%, 10%, 27%)
Oklch
oklch(76.5% 0.041 158.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1E1D4
E1D1DE

Analogous

D6E1D1
D1E1D4
D1E1DC

Triadic

D1E1D4
D4D1E1
E1D4D1

Split-Comp.

D1E1D4
DCD1E1
E1D1D6

Tetradic

D1E1D4
D1D6E1
E1D1DE
E1DCD1

Contrast Matrix WCAG 2.1 Contrast

D1E1D4
EEF2DB
AF8B41
CD7C11
9EBBA9
—
1.2
Fail
2.3
Fail
2.4
Fail
1.5
Fail
1.2
Fail
—
2.8
Fail
2.8
Fail
1.8
Fail
2.3
Fail
2.8
Fail
—
1.0
Fail
1.5
Fail
2.4
Fail
2.8
Fail
1.0
Fail
—
1.6
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.6
Fail
—
White BG
1.4Fail
1.1Fail
3.2AA Large
3.2AA Large
2.1Fail
Black BG
15.4AAA
18.4AAA
6.6AA
6.5AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8D7
F0F0E1
9F9F53
AAA92B
ABABAD

Deuteranopia

D7D6D8
F0EFE2
A2A457
AFB531
A9A7AE

Tritanopia

D2DADA
EEE5E6
AD6164
C93F44
9FB1B2

Achromatopsia

DBDBDB
EEEEEE
8D8D8D
888888
B0B0B0

Shades & Tints Shades & Tints

#D1E1D4

Dark
Light

#EEF2DB

Dark
Light

#AF8B41

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1e1d4;
  --color-2: #eef2db;
  --color-3: #af8b41;
  --color-4: #cd7c11;
  --color-5: #9ebba9;
}

SCSS

$color-1: #d1e1d4;
$color-2: #eef2db;
$color-3: #af8b41;
$color-4: #cd7c11;
$color-5: #9ebba9;

TAILWIND

colors: {
  'brand-1': '#d1e1d4',
  'brand-2': '#eef2db',
  'brand-3': '#af8b41',
  'brand-4': '#cd7c11',
  'brand-5': '#9ebba9',
}

RGB Array

[209, 225, 212], [238, 242, 219], [175, 139, 65], [205, 124, 17], [158, 187, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1E1D4, #EEF2DB, #AF8B41, #CD7C11, #9EBBA9 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #d1e1d4; --color-2: #eef2db; --color-3: #af8b41; --color-4: #cd7c11; --color-5: #9ebba9. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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