← Back to Editor

#E3EEB6 · #A3BA86 · #677D38 · #A2BE72 · #B7D28D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E3EEB6

Willow Green · Wheat · Mint Green

HEX
#E3EEB6
RGB
rgb(227, 238, 182)
HSL
hsl(72, 62%, 82%)
HSB
hsb(72, 24%, 93%)
CMYK
cmyk(5%, 0%, 24%, 7%)
Oklch
oklch(92.7% 0.074 116.9)

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

#A3BA86

Willow Green · DarkSeaGreen · Apple Green

HEX
#A3BA86
RGB
rgb(163, 186, 134)
HSL
hsl(87, 27%, 63%)
HSB
hsb(87, 28%, 73%)
CMYK
cmyk(12%, 0%, 28%, 27%)
Oklch
oklch(75.8% 0.076 127.5)

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

#677D38

Grass Green · DarkOliveGreen · Forest Green

HEX
#677D38
RGB
rgb(103, 125, 56)
HSL
hsl(79, 38%, 35%)
HSB
hsb(79, 55%, 49%)
CMYK
cmyk(18%, 0%, 55%, 51%)
Oklch
oklch(55.6% 0.099 124.2)

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

#A2BE72

Grass Green · DarkSeaGreen · Olive Green

HEX
#A2BE72
RGB
rgb(162, 190, 114)
HSL
hsl(82, 37%, 60%)
HSB
hsb(82, 40%, 75%)
CMYK
cmyk(15%, 0%, 40%, 25%)
Oklch
oklch(76.3% 0.106 125.3)

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

#B7D28D

Willow Green · Tan · Apple Green

HEX
#B7D28D
RGB
rgb(183, 210, 141)
HSL
hsl(83, 43%, 69%)
HSB
hsb(83, 33%, 82%)
CMYK
cmyk(13%, 0%, 33%, 18%)
Oklch
oklch(82.7% 0.096 125.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3EEB6
C0B5EE

Analogous

EEDCB5
E3EEB6
C6EEB5

Triadic

E3EEB6
B5E2EE
EEB5E2

Split-Comp.

E3EEB6
B5C6EE
DCB5EE

Tetradic

E3EEB6
B5EEDC
C0B5EE
EEB5C6

Contrast Matrix WCAG 2.1 Contrast

E3EEB6
A3BA86
677D38
A2BE72
B7D28D
—
1.7
Fail
3.8
AA Large
1.7
Fail
1.4
Fail
1.7
Fail
—
2.2
Fail
1.0
Fail
1.3
Fail
3.8
AA Large
2.2
Fail
—
2.2
Fail
2.8
Fail
1.7
Fail
1.0
Fail
2.2
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
2.8
Fail
1.2
Fail
—
White BG
1.2Fail
2.1Fail
4.6AA
2.1Fail
1.7Fail
Black BG
17.2AAA
9.9AAA
4.6AA
10.1AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8C4
ADAD93
717149
AEAE84
C3C39E

Deuteranopia

E7E6C7
ACAA96
6F6E4D
ADAA89
C1BFA2

Tritanopia

E4CED1
A49D9F
685659
A39396
B8ABAE

Achromatopsia

E4E4E4
ADADAD
6F6F6F
ADADAD
C2C2C2

Shades & Tints Shades & Tints

#E3EEB6

Dark
Light

#A3BA86

Dark
Light

#677D38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3eeb6;
  --color-2: #a3ba86;
  --color-3: #677d38;
  --color-4: #a2be72;
  --color-5: #b7d28d;
}

SCSS

$color-1: #e3eeb6;
$color-2: #a3ba86;
$color-3: #677d38;
$color-4: #a2be72;
$color-5: #b7d28d;

TAILWIND

colors: {
  'brand-1': '#e3eeb6',
  'brand-2': '#a3ba86',
  'brand-3': '#677d38',
  'brand-4': '#a2be72',
  'brand-5': '#b7d28d',
}

RGB Array

[227, 238, 182], [163, 186, 134], [103, 125, 56], [162, 190, 114], [183, 210, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3EEB6, #A3BA86, #677D38, #A2BE72, #B7D28D is ideal for: 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: #e3eeb6; --color-2: #a3ba86; --color-3: #677d38; --color-4: #a2be72; --color-5: #b7d28d. 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. 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