← Back to Editor

#CAE0A2 · #8FC42B · #2A5738 · #092024 · #141C04

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 WebsiteBlogData Visualization

Color Details Color Details

#CAE0A2

Willow Green · Khaki · Apple Green

HEX
#CAE0A2
RGB
rgb(202, 224, 162)
HSL
hsl(81, 50%, 76%)
HSB
hsb(81, 28%, 88%)
CMYK
cmyk(10%, 0%, 28%, 12%)
Oklch
oklch(87.5% 0.085 124.0)

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

#8FC42B

Grass Green · GreenYellow · Olive Green

HEX
#8FC42B
RGB
rgb(143, 196, 43)
HSL
hsl(81, 64%, 47%)
HSB
hsb(81, 78%, 77%)
CMYK
cmyk(27%, 0%, 78%, 23%)
Oklch
oklch(75.6% 0.182 127.6)

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

#2A5738

Celadon · DarkSlateGray · Forest Green

HEX
#2A5738
RGB
rgb(42, 87, 56)
HSL
hsl(139, 35%, 25%)
HSB
hsb(139, 52%, 34%)
CMYK
cmyk(52%, 0%, 36%, 66%)
Oklch
oklch(41.5% 0.072 152.2)

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

#092024

Lake Blue · Black · Peacock Green

HEX
#092024
RGB
rgb(9, 32, 36)
HSL
hsl(189, 60%, 9%)
HSB
hsb(189, 75%, 14%)
CMYK
cmyk(75%, 11%, 0%, 86%)
Oklch
oklch(22.7% 0.030 210.5)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#141C04

Grass Green · Black · Dark Green

HEX
#141C04
RGB
rgb(20, 28, 4)
HSL
hsl(80, 75%, 6%)
HSB
hsb(80, 86%, 11%)
CMYK
cmyk(29%, 0%, 86%, 89%)
Oklch
oklch(21.2% 0.044 124.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAE0A2
B9A3E0

Analogous

E0D7A3
CAE0A2
ACE0A3

Triadic

CAE0A2
A3CBE0
E0A3CB

Split-Comp.

CAE0A2
A3ACE0
D7A3E0

Tetradic

CAE0A2
A3E0D7
B9A3E0
E0A3AC

Contrast Matrix WCAG 2.1 Contrast

CAE0A2
8FC42B
2A5738
092024
141C04
—
1.5
Fail
5.8
AA
11.8
AAA
12.3
AAA
1.5
Fail
—
4.0
AA Large
8.1
AAA
8.4
AAA
5.8
AA
4.0
AA Large
—
2.0
Fail
2.1
Fail
11.8
AAA
8.1
AAA
2.0
Fail
—
1.0
Fail
12.3
AAA
8.4
AAA
2.1
Fail
1.0
Fail
—
White BG
1.4Fail
2.1Fail
8.3AAA
16.9AAA
17.5AAA
Black BG
14.7AAA
10.1AAA
2.5Fail
1.2Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4B1
A6A650
3D3E40
131323
17180A

Deuteranopia

D2D1B5
A39F59
3B3841
121023
17160B

Tritanopia

CBBDBF
926D74
2C4547
0A2222
140E0F

Achromatopsia

D2D2D2
A3A3A3
464646
1A1A1A
171717

Shades & Tints Shades & Tints

#CAE0A2

Dark
Light

#8FC42B

Dark
Light

#2A5738

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cae0a2;
  --color-2: #8fc42b;
  --color-3: #2a5738;
  --color-4: #092024;
  --color-5: #141c04;
}

SCSS

$color-1: #cae0a2;
$color-2: #8fc42b;
$color-3: #2a5738;
$color-4: #092024;
$color-5: #141c04;

TAILWIND

colors: {
  'brand-1': '#cae0a2',
  'brand-2': '#8fc42b',
  'brand-3': '#2a5738',
  'brand-4': '#092024',
  'brand-5': '#141c04',
}

RGB Array

[202, 224, 162], [143, 196, 43], [42, 87, 56], [9, 32, 36], [20, 28, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CAE0A2, #8FC42B, #2A5738, #092024, #141C04 is ideal for: tech websites, dark mode UIs, game UIs, 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: #cae0a2; --color-2: #8fc42b; --color-3: #2a5738; --color-4: #092024; --color-5: #141c04. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 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