← Back to Editor

#002217 · #264D34 · #547239 · #A8C060 · #C0D878

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

#002217

Mineral Blue · Black · Peacock Green

HEX
#002217
RGB
rgb(0, 34, 23)
HSL
hsl(161, 100%, 7%)
HSB
hsb(161, 100%, 13%)
CMYK
cmyk(100%, 0%, 32%, 87%)
Oklch
oklch(22.4% 0.046 167.4)

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

#264D34

Celadon · DarkSlateGray · Forest Green

HEX
#264D34
RGB
rgb(38, 77, 52)
HSL
hsl(142, 34%, 23%)
HSB
hsb(142, 51%, 30%)
CMYK
cmyk(51%, 0%, 32%, 70%)
Oklch
oklch(38.4% 0.062 154.2)

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

#547239

Celadon · DarkOliveGreen · Forest Green

HEX
#547239
RGB
rgb(84, 114, 57)
HSL
hsl(92, 33%, 34%)
HSB
hsb(92, 50%, 45%)
CMYK
cmyk(26%, 0%, 50%, 55%)
Oklch
oklch(51.4% 0.090 131.7)

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

#A8C060

Grass Green · DarkSeaGreen · Olive Green

HEX
#A8C060
RGB
rgb(168, 192, 96)
HSL
hsl(75, 43%, 56%)
HSB
hsb(75, 50%, 75%)
CMYK
cmyk(13%, 0%, 50%, 25%)
Oklch
oklch(76.9% 0.126 121.0)

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

#C0D878

Willow Green · Tan · Apple Green

HEX
#C0D878
RGB
rgb(192, 216, 120)
HSL
hsl(75, 55%, 66%)
HSB
hsb(75, 44%, 85%)
CMYK
cmyk(11%, 0%, 44%, 15%)
Oklch
oklch(84.3% 0.125 120.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

002217
24000B

Analogous

002407
002217
001D24

Triadic

002217
180024
241800

Split-Comp.

002217
24001D
240700

Tetradic

002217
070024
24000B
1D2400

Contrast Matrix WCAG 2.1 Contrast

002217
264D34
547239
A8C060
C0D878
—
1.8
Fail
3.1
AA Large
8.4
AAA
10.7
AAA
1.8
Fail
—
1.8
Fail
4.7
AA
6.1
AA
3.1
AA Large
1.8
Fail
—
2.7
Fail
3.5
AA Large
8.4
AAA
4.7
AA
2.7
Fail
—
1.3
Fail
10.7
AAA
6.1
AA
3.5
AA Large
1.3
Fail
—
White BG
16.9AAA
9.6AAA
5.5AA
2.0Fail
1.6Fail
Black BG
1.2Fail
2.2Fail
3.8AA Large
10.4AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0F0F1A
37373A
616147
B2B377
CACB8F

Deuteranopia

0D0A1A
35323C
5F5D4A
B1AF7D
C9C795

Tritanopia

021C1C
283F40
565254
A98A8E
C1A2A6

Achromatopsia

171717
3E3E3E
636363
AEAEAE
C6C6C6

Shades & Tints Shades & Tints

#002217

Dark
Light

#264D34

Dark
Light

#547239

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #002217;
  --color-2: #264d34;
  --color-3: #547239;
  --color-4: #a8c060;
  --color-5: #c0d878;
}

SCSS

$color-1: #002217;
$color-2: #264d34;
$color-3: #547239;
$color-4: #a8c060;
$color-5: #c0d878;

TAILWIND

colors: {
  'brand-1': '#002217',
  'brand-2': '#264d34',
  'brand-3': '#547239',
  'brand-4': '#a8c060',
  'brand-5': '#c0d878',
}

RGB Array

[0, 34, 23], [38, 77, 52], [84, 114, 57], [168, 192, 96], [192, 216, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #002217, #264D34, #547239, #A8C060, #C0D878 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: #002217; --color-2: #264d34; --color-3: #547239; --color-4: #a8c060; --color-5: #c0d878. 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