← Back to Editor

#032820 · #39702D · #ACBB52 · #CF5816 · #4E1F0D

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

#032820

Mineral Blue · Black · Peacock Green

HEX
#032820
RGB
rgb(3, 40, 32)
HSL
hsl(167, 86%, 8%)
HSB
hsb(167, 93%, 16%)
CMYK
cmyk(93%, 0%, 20%, 84%)
Oklch
oklch(24.9% 0.044 174.9)

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

#39702D

Celadon · DarkOliveGreen · Forest Green

HEX
#39702D
RGB
rgb(57, 112, 45)
HSL
hsl(109, 43%, 31%)
HSB
hsb(109, 60%, 44%)
CMYK
cmyk(49%, 0%, 60%, 56%)
Oklch
oklch(49.1% 0.115 140.1)

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

#ACBB52

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACBB52
RGB
rgb(172, 187, 82)
HSL
hsl(69, 44%, 53%)
HSB
hsb(69, 56%, 73%)
CMYK
cmyk(8%, 0%, 56%, 27%)
Oklch
oklch(75.9% 0.131 116.4)

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

#CF5816

Tangerine · Chocolate · Amber Brown

HEX
#CF5816
RGB
rgb(207, 88, 22)
HSL
hsl(21, 81%, 45%)
HSB
hsb(21, 89%, 81%)
CMYK
cmyk(0%, 57%, 89%, 19%)
Oklch
oklch(60.4% 0.166 44.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#4E1F0D

Tangerine · Maroon · Cinnamon

HEX
#4E1F0D
RGB
rgb(78, 31, 13)
HSL
hsl(17, 71%, 18%)
HSB
hsb(17, 83%, 31%)
CMYK
cmyk(0%, 60%, 83%, 69%)
Oklch
oklch(30.5% 0.077 40.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

032820
26030A

Analogous

03260D
032820
031C26

Triadic

032820
1E0326
261E03

Split-Comp.

032820
26031C
260D03

Tetradic

032820
0D0326
26030A
1C2603

Contrast Matrix WCAG 2.1 Contrast

032820
39702D
ACBB52
CF5816
4E1F0D
—
2.7
Fail
7.5
AAA
3.8
AA Large
1.1
Fail
2.7
Fail
—
2.8
Fail
1.4
Fail
2.3
Fail
7.5
AAA
2.8
Fail
—
2.0
Fail
6.5
AA
3.8
AA Large
1.4
Fail
2.0
Fail
—
3.3
AA Large
1.1
Fail
2.3
Fail
6.5
AA
3.3
AA Large
—
White BG
15.8AAA
5.9AA
2.1Fail
4.1AA Large
13.8AAA
Black BG
1.3Fail
3.5AA Large
10.0AAA
5.1AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

131322
51513D
B2B36B
9B9A26
3A3911

Deuteranopia

110E22
4E4A41
B2B172
A2AB2A
3C4012

Tritanopia

052324
3C4A4D
AD7F84
C93335
4C1516

Achromatopsia

1C1C1C
585858
ABABAB
747474
2B2B2B

Shades & Tints Shades & Tints

#032820

Dark
Light

#39702D

Dark
Light

#ACBB52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #032820;
  --color-2: #39702d;
  --color-3: #acbb52;
  --color-4: #cf5816;
  --color-5: #4e1f0d;
}

SCSS

$color-1: #032820;
$color-2: #39702d;
$color-3: #acbb52;
$color-4: #cf5816;
$color-5: #4e1f0d;

TAILWIND

colors: {
  'brand-1': '#032820',
  'brand-2': '#39702d',
  'brand-3': '#acbb52',
  'brand-4': '#cf5816',
  'brand-5': '#4e1f0d',
}

RGB Array

[3, 40, 32], [57, 112, 45], [172, 187, 82], [207, 88, 22], [78, 31, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #032820, #39702D, #ACBB52, #CF5816, #4E1F0D 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: #032820; --color-2: #39702d; --color-3: #acbb52; --color-4: #cf5816; --color-5: #4e1f0d. 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