← Back to Editor

#020D19 · #0F6058 · #7A922D · #E18637 · #FF1A6B

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#020D19

Indigo · Black · Deep Sea Blue

HEX
#020D19
RGB
rgb(2, 13, 25)
HSL
hsl(211, 85%, 5%)
HSB
hsb(211, 92%, 10%)
CMYK
cmyk(92%, 48%, 0%, 90%)
Oklch
oklch(15.4% 0.033 246.7)

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

#0F6058

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0F6058
RGB
rgb(15, 96, 88)
HSL
hsl(174, 73%, 22%)
HSB
hsb(174, 84%, 38%)
CMYK
cmyk(84%, 0%, 8%, 62%)
Oklch
oklch(44.2% 0.073 184.6)

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

#7A922D

Grass Green · Olive · Forest Green

HEX
#7A922D
RGB
rgb(122, 146, 45)
HSL
hsl(74, 53%, 37%)
HSB
hsb(74, 69%, 57%)
CMYK
cmyk(16%, 0%, 69%, 43%)
Oklch
oklch(62.1% 0.129 121.8)

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

#E18637

Tangerine · GoldenRod · Warm Sun

HEX
#E18637
RGB
rgb(225, 134, 55)
HSL
hsl(28, 74%, 55%)
HSB
hsb(28, 76%, 88%)
CMYK
cmyk(0%, 40%, 76%, 12%)
Oklch
oklch(70.4% 0.144 57.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FF1A6B

Dark Violet · DeepPink · Rose Pink

HEX
#FF1A6B
RGB
rgb(255, 26, 107)
HSL
hsl(339, 100%, 55%)
HSB
hsb(339, 90%, 100%)
CMYK
cmyk(0%, 90%, 58%, 0%)
Oklch
oklch(64.6% 0.249 9.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020D19
180D02

Analogous

021718
020D19
020218

Triadic

020D19
18020C
0C1802

Split-Comp.

020D19
180202
171802

Tetradic

020D19
180217
180D02
021802

Contrast Matrix WCAG 2.1 Contrast

020D19
0F6058
7A922D
E18637
FF1A6B
—
2.6
Fail
5.6
AA
7.1
AAA
5.2
AA
2.6
Fail
—
2.1
Fail
2.7
Fail
2.0
Fail
5.6
AA
2.1
Fail
—
1.3
Fail
1.1
Fail
7.1
AAA
2.7
Fail
1.3
Fail
—
1.4
Fail
5.2
AA
2.0
Fail
1.1
Fail
1.4
Fail
—
White BG
19.5AAA
7.4AAA
3.5AA Large
2.7Fail
3.7AA Large
Black BG
1.1Fail
2.8Fail
6.0AA
7.7AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

070716
32335A
848545
BAB94A
9C9A57

Deuteranopia

060515
2D275A
83814B
BFC64F
A9BA53

Tritanopia

031413
135B5C
7B595D
DC595D
F44845

Achromatopsia

0B0B0B
474747
7F7F7F
989898
686868

Shades & Tints Shades & Tints

#020D19

Dark
Light

#0F6058

Dark
Light

#7A922D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020d19;
  --color-2: #0f6058;
  --color-3: #7a922d;
  --color-4: #e18637;
  --color-5: #ff1a6b;
}

SCSS

$color-1: #020d19;
$color-2: #0f6058;
$color-3: #7a922d;
$color-4: #e18637;
$color-5: #ff1a6b;

TAILWIND

colors: {
  'brand-1': '#020d19',
  'brand-2': '#0f6058',
  'brand-3': '#7a922d',
  'brand-4': '#e18637',
  'brand-5': '#ff1a6b',
}

RGB Array

[2, 13, 25], [15, 96, 88], [122, 146, 45], [225, 134, 55], [255, 26, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #020D19, #0F6058, #7A922D, #E18637, #FF1A6B 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: #020d19; --color-2: #0f6058; --color-3: #7a922d; --color-4: #e18637; --color-5: #ff1a6b. 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