← Back to Editor

#122714 · #113724 · #376032 · #E0F3B2 · #50220B

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

#122714

Celadon · Black · Dark Green

HEX
#122714
RGB
rgb(18, 39, 20)
HSL
hsl(126, 37%, 11%)
HSB
hsb(126, 54%, 15%)
CMYK
cmyk(54%, 0%, 49%, 85%)
Oklch
oklch(24.9% 0.045 146.2)

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

#113724

Mineral Blue · DarkSlateGray · Dark Green

HEX
#113724
RGB
rgb(17, 55, 36)
HSL
hsl(150, 53%, 14%)
HSB
hsb(150, 69%, 22%)
CMYK
cmyk(69%, 0%, 35%, 78%)
Oklch
oklch(30.3% 0.056 158.5)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#376032

Celadon · DarkOliveGreen · Forest Green

HEX
#376032
RGB
rgb(55, 96, 50)
HSL
hsl(113, 32%, 29%)
HSB
hsb(113, 48%, 38%)
CMYK
cmyk(43%, 0%, 48%, 62%)
Oklch
oklch(44.6% 0.086 141.7)

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

#E0F3B2

Willow Green · Wheat · Mint Green

HEX
#E0F3B2
RGB
rgb(224, 243, 178)
HSL
hsl(78, 73%, 83%)
HSB
hsb(78, 27%, 95%)
CMYK
cmyk(8%, 0%, 27%, 5%)
Oklch
oklch(93.4% 0.087 121.3)

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

#50220B

Tangerine · Maroon · Cinnamon

HEX
#50220B
RGB
rgb(80, 34, 11)
HSL
hsl(20, 76%, 18%)
HSB
hsb(20, 86%, 31%)
CMYK
cmyk(0%, 58%, 86%, 69%)
Oklch
oklch(31.4% 0.077 44.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

122714
261224

Analogous

1A2612
122714
12261E

Triadic

122714
141226
261412

Split-Comp.

122714
1E1226
26121A

Tetradic

122714
121A26
261224
261E12

Contrast Matrix WCAG 2.1 Contrast

122714
113724
376032
E0F3B2
50220B
—
1.2
Fail
2.2
Fail
13.3
AAA
1.2
Fail
1.2
Fail
—
1.8
Fail
11.0
AAA
1.0
Fail
2.2
Fail
1.8
Fail
—
6.1
AA
1.8
Fail
13.3
AAA
11.0
AAA
6.1
AA
—
11.2
AAA
1.2
Fail
1.0
Fail
1.8
Fail
11.2
AAA
—
White BG
15.8AAA
13.2AAA
7.3AAA
1.2Fail
13.3AAA
Black BG
1.3Fail
1.6Fail
2.9Fail
17.6AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1B19
212229
49493D
E8E8C2
3C3C11

Deuteranopia

1A181A
1F1C2A
464340
E7E6C6
3F4212

Tritanopia

131C1D
132C2D
394648
E1CED1
4E1516

Achromatopsia

1F1F1F
292929
4E4E4E
E6E6E6
2D2D2D

Shades & Tints Shades & Tints

#122714

Dark
Light

#113724

Dark
Light

#376032

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #122714;
  --color-2: #113724;
  --color-3: #376032;
  --color-4: #e0f3b2;
  --color-5: #50220b;
}

SCSS

$color-1: #122714;
$color-2: #113724;
$color-3: #376032;
$color-4: #e0f3b2;
$color-5: #50220b;

TAILWIND

colors: {
  'brand-1': '#122714',
  'brand-2': '#113724',
  'brand-3': '#376032',
  'brand-4': '#e0f3b2',
  'brand-5': '#50220b',
}

RGB Array

[18, 39, 20], [17, 55, 36], [55, 96, 50], [224, 243, 178], [80, 34, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #122714, #113724, #376032, #E0F3B2, #50220B 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: #122714; --color-2: #113724; --color-3: #376032; --color-4: #e0f3b2; --color-5: #50220b. 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