← Back to Editor

#ECF2E0 · #D0F0BF · #C0CB92 · #8F9A55 · #778740

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

WorkspaceReadingData Visualization

Color Details Color Details

#ECF2E0

Willow Green · Beige · Mint Green

HEX
#ECF2E0
RGB
rgb(236, 242, 224)
HSL
hsl(80, 41%, 91%)
HSB
hsb(80, 7%, 95%)
CMYK
cmyk(2%, 0%, 7%, 5%)
Oklch
oklch(95.2% 0.025 121.9)

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

#D0F0BF

Emerald · LightGray · Mint Green

HEX
#D0F0BF
RGB
rgb(208, 240, 191)
HSL
hsl(99, 62%, 85%)
HSB
hsb(99, 20%, 94%)
CMYK
cmyk(13%, 0%, 20%, 6%)
Oklch
oklch(91.9% 0.073 134.8)

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

#C0CB92

Willow Green · Tan · Apple Green

HEX
#C0CB92
RGB
rgb(192, 203, 146)
HSL
hsl(72, 35%, 68%)
HSB
hsb(72, 28%, 80%)
CMYK
cmyk(5%, 0%, 28%, 20%)
Oklch
oklch(82.0% 0.077 117.0)

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

#8F9A55

Grass Green · Gray · Olive Green

HEX
#8F9A55
RGB
rgb(143, 154, 85)
HSL
hsl(70, 29%, 47%)
HSB
hsb(70, 45%, 60%)
CMYK
cmyk(7%, 0%, 45%, 40%)
Oklch
oklch(66.1% 0.094 116.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#778740

Grass Green · DarkOliveGreen · Forest Green

HEX
#778740
RGB
rgb(119, 135, 64)
HSL
hsl(74, 36%, 39%)
HSB
hsb(74, 53%, 53%)
CMYK
cmyk(12%, 0%, 53%, 47%)
Oklch
oklch(59.4% 0.098 120.0)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF2E0
E5DFF1

Analogous

F1EEDF
ECF2E0
E2F1DF

Triadic

ECF2E0
DFEBF1
F1DFEB

Split-Comp.

ECF2E0
DFE2F1
EEDFF1

Tetradic

ECF2E0
DFF1EE
E5DFF1
F1DFE2

Contrast Matrix WCAG 2.1 Contrast

ECF2E0
D0F0BF
C0CB92
8F9A55
778740
—
1.1
Fail
1.5
Fail
2.7
Fail
3.4
AA Large
1.1
Fail
—
1.4
Fail
2.4
Fail
3.2
AA Large
1.5
Fail
1.4
Fail
—
1.8
Fail
2.3
Fail
2.7
Fail
2.4
Fail
1.8
Fail
—
1.3
Fail
3.4
AA Large
3.2
AA Large
2.3
Fail
1.3
Fail
—
White BG
1.1Fail
1.2Fail
1.7Fail
3.0AA Large
3.9AA Large
Black BG
18.3AAA
16.9AAA
12.2AAA
6.9AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE4
DEDECB
C5C5A0
949466
7E7E51

Deuteranopia

EEEEE5
DCDACE
C4C3A3
93926A
7D7C55

Tritanopia

ECE8E9
D2D4D6
C1ABAD
907376
785F62

Achromatopsia

EEEEEE
E1E1E1
C1C1C1
8F8F8F
7A7A7A

Shades & Tints Shades & Tints

#ECF2E0

Dark
Light

#D0F0BF

Dark
Light

#C0CB92

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf2e0;
  --color-2: #d0f0bf;
  --color-3: #c0cb92;
  --color-4: #8f9a55;
  --color-5: #778740;
}

SCSS

$color-1: #ecf2e0;
$color-2: #d0f0bf;
$color-3: #c0cb92;
$color-4: #8f9a55;
$color-5: #778740;

TAILWIND

colors: {
  'brand-1': '#ecf2e0',
  'brand-2': '#d0f0bf',
  'brand-3': '#c0cb92',
  'brand-4': '#8f9a55',
  'brand-5': '#778740',
}

RGB Array

[236, 242, 224], [208, 240, 191], [192, 203, 146], [143, 154, 85], [119, 135, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF2E0, #D0F0BF, #C0CB92, #8F9A55, #778740 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: #ecf2e0; --color-2: #d0f0bf; --color-3: #c0cb92; --color-4: #8f9a55; --color-5: #778740. 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