← Back to Editor

#E2E6DA · #9EB389 · #468C67 · #34453E · #34252F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E2E6DA

Willow Green · Beige · Mint Green

HEX
#E2E6DA
RGB
rgb(226, 230, 218)
HSL
hsl(80, 19%, 88%)
HSB
hsb(80, 5%, 90%)
CMYK
cmyk(2%, 0%, 5%, 10%)
Oklch
oklch(91.9% 0.017 121.8)

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

#9EB389

Celadon · DarkSeaGreen · Apple Green

HEX
#9EB389
RGB
rgb(158, 179, 137)
HSL
hsl(90, 22%, 62%)
HSB
hsb(90, 23%, 70%)
CMYK
cmyk(12%, 0%, 23%, 30%)
Oklch
oklch(73.9% 0.063 129.5)

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

#468C67

Celadon · SeaGreen · Olive Green

HEX
#468C67
RGB
rgb(70, 140, 103)
HSL
hsl(148, 33%, 41%)
HSB
hsb(148, 50%, 55%)
CMYK
cmyk(50%, 0%, 26%, 45%)
Oklch
oklch(58.4% 0.092 158.6)

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

#34453E

Mineral Blue · DarkSlateGray · Forest Green

HEX
#34453E
RGB
rgb(52, 69, 62)
HSL
hsl(155, 14%, 24%)
HSB
hsb(155, 25%, 27%)
CMYK
cmyk(25%, 0%, 10%, 73%)
Oklch
oklch(37.3% 0.025 167.9)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#34252F

Rose Purple · DarkSlateGray · Raspberry

HEX
#34252F
RGB
rgb(52, 37, 47)
HSL
hsl(320, 17%, 17%)
HSB
hsb(320, 29%, 20%)
CMYK
cmyk(0%, 29%, 10%, 80%)
Oklch
oklch(28.6% 0.028 339.1)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2E6DA
DEDBE6

Analogous

E6E4DB
E2E6DA
DDE6DB

Triadic

E2E6DA
DBE2E6
E6DBE2

Split-Comp.

E2E6DA
DBDDE6
E4DBE6

Tetradic

E2E6DA
DBE6E4
DEDBE6
E6DBDD

Contrast Matrix WCAG 2.1 Contrast

E2E6DA
9EB389
468C67
34453E
34252F
—
1.8
Fail
3.2
AA Large
8.0
AAA
11.4
AAA
1.8
Fail
—
1.8
Fail
4.5
AA Large
6.4
AA
3.2
AA Large
1.8
Fail
—
2.5
Fail
3.6
AA Large
8.0
AAA
4.5
AA Large
2.5
Fail
—
1.4
Fail
11.4
AAA
6.4
AA
3.6
AA Large
1.4
Fail
—
White BG
1.3Fail
2.3Fail
4.0AA Large
10.2AAA
14.5AAA
Black BG
16.6AAA
9.3AAA
5.2AA
2.1Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4DD
A7A793
646570
3B3C40
2E2D2D

Deuteranopia

E4E3DE
A6A496
605B72
3A3940
2E302C

Tritanopia

E2DFE0
9F9B9D
4A7779
354141
332B2A

Achromatopsia

E3E3E3
A8A8A8
737373
3F3F3F
2B2B2B

Shades & Tints Shades & Tints

#E2E6DA

Dark
Light

#9EB389

Dark
Light

#468C67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2e6da;
  --color-2: #9eb389;
  --color-3: #468c67;
  --color-4: #34453e;
  --color-5: #34252f;
}

SCSS

$color-1: #e2e6da;
$color-2: #9eb389;
$color-3: #468c67;
$color-4: #34453e;
$color-5: #34252f;

TAILWIND

colors: {
  'brand-1': '#e2e6da',
  'brand-2': '#9eb389',
  'brand-3': '#468c67',
  'brand-4': '#34453e',
  'brand-5': '#34252f',
}

RGB Array

[226, 230, 218], [158, 179, 137], [70, 140, 103], [52, 69, 62], [52, 37, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2E6DA, #9EB389, #468C67, #34453E, #34252F is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #e2e6da; --color-2: #9eb389; --color-3: #468c67; --color-4: #34453e; --color-5: #34252f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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