← Back to Editor

#201F27 · #414E32 · #96A53C · #CFCE3E · #E6DED1

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#201F27

Deep Indigo · Black · Deep Sea Blue

HEX
#201F27
RGB
rgb(32, 31, 39)
HSL
hsl(248, 11%, 14%)
HSB
hsb(248, 21%, 15%)
CMYK
cmyk(18%, 21%, 0%, 85%)
Oklch
oklch(24.4% 0.015 291.0)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#414E32

Grass Green · DarkSlateGray · Forest Green

HEX
#414E32
RGB
rgb(65, 78, 50)
HSL
hsl(88, 22%, 25%)
HSB
hsb(88, 36%, 31%)
CMYK
cmyk(17%, 0%, 36%, 69%)
Oklch
oklch(40.4% 0.048 128.6)

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

#96A53C

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#96A53C
RGB
rgb(150, 165, 60)
HSL
hsl(69, 47%, 44%)
HSB
hsb(69, 64%, 65%)
CMYK
cmyk(9%, 0%, 64%, 35%)
Oklch
oklch(68.9% 0.130 116.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#CFCE3E

Autumn Sage · GoldenRod · Sunflower

HEX
#CFCE3E
RGB
rgb(207, 206, 62)
HSL
hsl(60, 60%, 53%)
HSB
hsb(60, 70%, 81%)
CMYK
cmyk(0%, 0%, 70%, 19%)
Oklch
oklch(82.7% 0.159 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E6DED1

Goose Yellow · LightGray · Peach Orange

HEX
#E6DED1
RGB
rgb(230, 222, 209)
HSL
hsl(37, 30%, 86%)
HSB
hsb(37, 9%, 90%)
CMYK
cmyk(0%, 3%, 9%, 10%)
Oklch
oklch(90.3% 0.020 80.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

201F27
272820

Analogous

202328
201F27
252028

Triadic

201F27
282120
202821

Split-Comp.

201F27
282520
232820

Tetradic

201F27
282023
272820
202825

Contrast Matrix WCAG 2.1 Contrast

201F27
414E32
96A53C
CFCE3E
E6DED1
—
1.8
Fail
6.0
AA
9.8
AAA
12.2
AAA
1.8
Fail
—
3.3
AA Large
5.3
AA
6.7
AA
6.0
AA
3.3
AA Large
—
1.6
Fail
2.0
Fail
9.8
AAA
5.3
AA
1.6
Fail
—
1.3
Fail
12.2
AAA
6.7
AA
2.0
Fail
1.3
Fail
—
White BG
16.3AAA
8.9AAA
2.7Fail
1.7Fail
1.3Fail
Black BG
1.3Fail
2.4Fail
7.7AAA
12.6AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202025
474739
9C9D55
CFCF61
E3E2D4

Deuteranopia

202025
46453A
9C9B5C
CFCF69
E3E4D5

Tritanopia

202423
423E3F
97696E
CF7C82
E6D7D7

Achromatopsia

202020
474747
959595
BEBEBE
DFDFDF

Shades & Tints Shades & Tints

#201F27

Dark
Light

#414E32

Dark
Light

#96A53C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #201f27;
  --color-2: #414e32;
  --color-3: #96a53c;
  --color-4: #cfce3e;
  --color-5: #e6ded1;
}

SCSS

$color-1: #201f27;
$color-2: #414e32;
$color-3: #96a53c;
$color-4: #cfce3e;
$color-5: #e6ded1;

TAILWIND

colors: {
  'brand-1': '#201f27',
  'brand-2': '#414e32',
  'brand-3': '#96a53c',
  'brand-4': '#cfce3e',
  'brand-5': '#e6ded1',
}

RGB Array

[32, 31, 39], [65, 78, 50], [150, 165, 60], [207, 206, 62], [230, 222, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #201F27, #414E32, #96A53C, #CFCE3E, #E6DED1 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: #201f27; --color-2: #414e32; --color-3: #96a53c; --color-4: #cfce3e; --color-5: #e6ded1. 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 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