← Back to Editor

#EEF596 · #D4DE6D · #B7CC65 · #6B6ED9 · #4443A9

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#EEF596

Fresh Green · Khaki · Lemon Cream

HEX
#EEF596
RGB
rgb(238, 245, 150)
HSL
hsl(64, 83%, 77%)
HSB
hsb(64, 39%, 96%)
CMYK
cmyk(3%, 0%, 39%, 4%)
Oklch
oklch(94.4% 0.118 112.1)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#D4DE6D

Fresh Green · Khaki · Sunflower

HEX
#D4DE6D
RGB
rgb(212, 222, 109)
HSL
hsl(65, 63%, 65%)
HSB
hsb(65, 51%, 87%)
CMYK
cmyk(5%, 0%, 51%, 13%)
Oklch
oklch(87.0% 0.138 113.4)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#B7CC65

Grass Green · Tan · Olive Green

HEX
#B7CC65
RGB
rgb(183, 204, 101)
HSL
hsl(72, 50%, 60%)
HSB
hsb(72, 50%, 80%)
CMYK
cmyk(10%, 0%, 50%, 20%)
Oklch
oklch(80.8% 0.131 119.0)

TraditionalGrass Green」· PaintOlive Green」· Creative Blush Sunrise

#6B6ED9

Azure · SlateBlue · Cobalt Blue

HEX
#6B6ED9
RGB
rgb(107, 110, 217)
HSL
hsl(238, 59%, 64%)
HSB
hsb(238, 51%, 85%)
CMYK
cmyk(51%, 49%, 0%, 15%)
Oklch
oklch(58.9% 0.160 279.1)

TraditionalAzure」· PaintCobalt Blue」· Creative Twilight Haze

#4443A9

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#4443A9
RGB
rgb(68, 67, 169)
HSL
hsl(241, 43%, 46%)
HSB
hsb(241, 60%, 66%)
CMYK
cmyk(60%, 60%, 0%, 34%)
Oklch
oklch(44.6% 0.159 278.2)

TraditionalDeep Indigo」· PaintNavy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EEF596
9A94F5

Analogous

F5CB94
EEF596
BEF594

Triadic

EEF596
94EFF5
F594EF

Split-Comp.

EEF596
94BEF5
CB94F5

Tetradic

EEF596
94F5CB
9A94F5
F594BE

Contrast Matrix WCAG 2.1 Contrast

EEF596
D4DE6D
B7CC65
6B6ED9
4443A9
1.3
Fail
1.5
Fail
3.7
AA Large
6.9
AA
1.3
Fail
1.2
Fail
3.0
Fail
5.5
AA
1.5
Fail
1.2
Fail
2.4
Fail
4.5
AA
3.7
AA Large
3.0
Fail
2.4
Fail
1.9
Fail
6.9
AA
5.5
AA
4.5
AA
1.9
Fail
White BG
1.2Fail
1.5Fail
1.8Fail
4.3AA Large
8.0AAA
Black BG
18.1AAA
14.5AAA
11.8AAA
4.9AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1AD
D8D888
C0C07E
6C6CBF
444490

Deuteranopia

F1F0B3
D8D78F
BFBD84
6C6CB9
44448A

Tritanopia

EEBFC3
D49EA3
B89296
6BABA6
447D79

Achromatopsia

E8E8E8
CECECE
BABABA
797979
4F4F4F

Shades & Tints Shades & Tints

#EEF596

Dark
Light

#D4DE6D

Dark
Light

#B7CC65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eef596;
  --color-2: #d4de6d;
  --color-3: #b7cc65;
  --color-4: #6b6ed9;
  --color-5: #4443a9;
}

SCSS

$color-1: #eef596;
$color-2: #d4de6d;
$color-3: #b7cc65;
$color-4: #6b6ed9;
$color-5: #4443a9;

TAILWIND

colors: {
  'brand-1': '#eef596',
  'brand-2': '#d4de6d',
  'brand-3': '#b7cc65',
  'brand-4': '#6b6ed9',
  'brand-5': '#4443a9',
}

RGB Array

[238, 245, 150], [212, 222, 109], [183, 204, 101], [107, 110, 217], [68, 67, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #EEF596, #D4DE6D, #B7CC65, #6B6ED9, #4443A9 is ideal for: corporate websites, product showcases, portfolios. 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: #eef596; --color-2: #d4de6d; --color-3: #b7cc65; --color-4: #6b6ed9; --color-5: #4443a9. 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. 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 nature-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