← Back to Editor

#102001 · #003435 · #1E5930 · #58A041 · #A5B662

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#102001

Pine Green · Black · Dark Green

HEX
#102001
RGB
rgb(16, 32, 1)
HSL
hsl(91, 94%, 6%)
HSB
hsb(91, 97%, 13%)
CMYK
cmyk(50%, 0%, 97%, 87%)
Oklch
oklch(22.1% 0.059 131.8)

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

#003435

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003435
RGB
rgb(0, 52, 53)
HSL
hsl(181, 100%, 10%)
HSB
hsb(181, 100%, 21%)
CMYK
cmyk(100%, 2%, 0%, 79%)
Oklch
oklch(29.5% 0.050 196.9)

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

#1E5930

Celadon · DarkSlateGray · Forest Green

HEX
#1E5930
RGB
rgb(30, 89, 48)
HSL
hsl(138, 50%, 23%)
HSB
hsb(138, 66%, 35%)
CMYK
cmyk(66%, 0%, 46%, 65%)
Oklch
oklch(41.4% 0.091 150.4)

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

#58A041

Celadon · SeaGreen · Olive Green

HEX
#58A041
RGB
rgb(88, 160, 65)
HSL
hsl(105, 42%, 44%)
HSB
hsb(105, 59%, 63%)
CMYK
cmyk(45%, 0%, 59%, 37%)
Oklch
oklch(63.7% 0.149 138.8)

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

#A5B662

Grass Green · DarkSeaGreen · Olive Green

HEX
#A5B662
RGB
rgb(165, 182, 98)
HSL
hsl(72, 37%, 55%)
HSB
hsb(72, 46%, 71%)
CMYK
cmyk(9%, 0%, 46%, 29%)
Oklch
oklch(74.4% 0.111 118.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

102001
10011E

Analogous

1D1E01
102001
011E01

Triadic

102001
010F1E
1E010F

Split-Comp.

102001
01011E
1E011D

Tetradic

102001
011D1E
10011E
1E0101

Contrast Matrix WCAG 2.1 Contrast

102001
003435
1E5930
58A041
A5B662
—
1.3
Fail
2.1
Fail
5.3
AA
7.7
AAA
1.3
Fail
—
1.6
Fail
4.2
AA Large
6.1
AA
2.1
Fail
1.6
Fail
—
2.6
Fail
3.7
AA Large
5.3
AA
4.2
AA Large
2.6
Fail
—
1.5
Fail
7.7
AAA
6.1
AA
3.7
AA Large
1.5
Fail
—
White BG
17.1AAA
13.6AAA
8.3AAA
3.2AA Large
2.2Fail
Black BG
1.2Fail
1.5Fail
2.5Fail
6.5AA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171709
171735
38383A
777858
ACAD76

Deuteranopia

16150A
141035
34303C
736E5E
ABAA7B

Tritanopia

110E10
033535
214243
5C6A6E
A6868A

Achromatopsia

181818
252525
434343
808080
A7A7A7

Shades & Tints Shades & Tints

#102001

Dark
Light

#003435

Dark
Light

#1E5930

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #102001;
  --color-2: #003435;
  --color-3: #1e5930;
  --color-4: #58a041;
  --color-5: #a5b662;
}

SCSS

$color-1: #102001;
$color-2: #003435;
$color-3: #1e5930;
$color-4: #58a041;
$color-5: #a5b662;

TAILWIND

colors: {
  'brand-1': '#102001',
  'brand-2': '#003435',
  'brand-3': '#1e5930',
  'brand-4': '#58a041',
  'brand-5': '#a5b662',
}

RGB Array

[16, 32, 1], [0, 52, 53], [30, 89, 48], [88, 160, 65], [165, 182, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #102001, #003435, #1E5930, #58A041, #A5B662 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #102001; --color-2: #003435; --color-3: #1e5930; --color-4: #58a041; --color-5: #a5b662. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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