← Back to Editor

#9CAC50 · #53854C · #436244 · #041C0E · #AC453C

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#9CAC50

Grass Green · DarkSeaGreen · Olive Green

HEX
#9CAC50
RGB
rgb(156, 172, 80)
HSL
hsl(70, 37%, 49%)
HSB
hsb(70, 53%, 67%)
CMYK
cmyk(9%, 0%, 53%, 33%)
Oklch
oklch(71.2% 0.119 117.7)

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

#53854C

Celadon · DarkOliveGreen · Olive Green

HEX
#53854C
RGB
rgb(83, 133, 76)
HSL
hsl(113, 27%, 41%)
HSB
hsb(113, 43%, 52%)
CMYK
cmyk(38%, 0%, 43%, 48%)
Oklch
oklch(56.6% 0.101 141.4)

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

#436244

Celadon · DarkOliveGreen · Forest Green

HEX
#436244
RGB
rgb(67, 98, 68)
HSL
hsl(122, 19%, 32%)
HSB
hsb(122, 32%, 38%)
CMYK
cmyk(32%, 0%, 31%, 62%)
Oklch
oklch(46.3% 0.060 145.3)

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

#041C0E

Pine Green · Black · Dark Green

HEX
#041C0E
RGB
rgb(4, 28, 14)
HSL
hsl(145, 75%, 6%)
HSB
hsb(145, 86%, 11%)
CMYK
cmyk(86%, 0%, 50%, 89%)
Oklch
oklch(20.2% 0.042 155.5)

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

#AC453C

Crimson · Sienna · Passion Red

HEX
#AC453C
RGB
rgb(172, 69, 60)
HSL
hsl(5, 48%, 45%)
HSB
hsb(5, 65%, 67%)
CMYK
cmyk(0%, 60%, 65%, 33%)
Oklch
oklch(52.7% 0.137 27.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CAC50
5E4FAB

Analogous

AB8C4F
9CAC50
6EAB4F

Triadic

9CAC50
4F9CAB
AB4F9C

Split-Comp.

9CAC50
4F6EAB
8C4FAB

Tetradic

9CAC50
4FAB8C
5E4FAB
AB4F6E

Contrast Matrix WCAG 2.1 Contrast

9CAC50
53854C
436244
041C0E
AC453C
—
1.7
Fail
2.7
Fail
7.2
AAA
2.3
Fail
1.7
Fail
—
1.6
Fail
4.1
AA Large
1.3
Fail
2.7
Fail
1.6
Fail
—
2.6
Fail
1.2
Fail
7.2
AAA
4.1
AA Large
2.6
Fail
—
3.1
AA Large
2.3
Fail
1.3
Fail
1.2
Fail
3.1
AA Large
—
White BG
2.5Fail
4.4AA Large
6.8AA
17.8AAA
5.7AA
Black BG
8.4AAA
4.8AA
3.1AA Large
1.2Fail
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A366
69695A
50514B
0E0F11
7F7E3E

Deuteranopia

A2A16C
66625D
4F4C4D
0D0B12
858D3F

Tritanopia

9D787C
566567
455152
051415
A74040

Achromatopsia

9D9D9D
707070
555555
131313
636363

Shades & Tints Shades & Tints

#9CAC50

Dark
Light

#53854C

Dark
Light

#436244

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cac50;
  --color-2: #53854c;
  --color-3: #436244;
  --color-4: #041c0e;
  --color-5: #ac453c;
}

SCSS

$color-1: #9cac50;
$color-2: #53854c;
$color-3: #436244;
$color-4: #041c0e;
$color-5: #ac453c;

TAILWIND

colors: {
  'brand-1': '#9cac50',
  'brand-2': '#53854c',
  'brand-3': '#436244',
  'brand-4': '#041c0e',
  'brand-5': '#ac453c',
}

RGB Array

[156, 172, 80], [83, 133, 76], [67, 98, 68], [4, 28, 14], [172, 69, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9CAC50, #53854C, #436244, #041C0E, #AC453C 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: #9cac50; --color-2: #53854c; --color-3: #436244; --color-4: #041c0e; --color-5: #ac453c. 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