← Back to Editor

#837C2C · #DEA353 · #F53B15 · #B91D0E · #371F03

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#837C2C

Autumn Sage · Olive · Honey Gold

HEX
#837C2C
RGB
rgb(131, 124, 44)
HSL
hsl(55, 50%, 34%)
HSB
hsb(55, 66%, 51%)
CMYK
cmyk(0%, 5%, 66%, 49%)
Oklch
oklch(57.6% 0.101 104.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#DEA353

Ginger · SandyBrown · Warm Sun

HEX
#DEA353
RGB
rgb(222, 163, 83)
HSL
hsl(35, 68%, 60%)
HSB
hsb(35, 63%, 87%)
CMYK
cmyk(0%, 27%, 63%, 13%)
Oklch
oklch(75.6% 0.119 72.6)

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

#F53B15

Vermilion · OrangeRed · Passion Red

HEX
#F53B15
RGB
rgb(245, 59, 21)
HSL
hsl(10, 92%, 52%)
HSB
hsb(10, 91%, 96%)
CMYK
cmyk(0%, 76%, 91%, 4%)
Oklch
oklch(63.5% 0.226 32.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#B91D0E

Vermilion · FireBrick · Wine Red

HEX
#B91D0E
RGB
rgb(185, 29, 14)
HSL
hsl(5, 86%, 39%)
HSB
hsb(5, 92%, 73%)
CMYK
cmyk(0%, 84%, 92%, 27%)
Oklch
oklch(50.5% 0.191 30.2)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#371F03

Ochre · Black · Cinnamon

HEX
#371F03
RGB
rgb(55, 31, 3)
HSL
hsl(32, 90%, 11%)
HSB
hsb(32, 95%, 22%)
CMYK
cmyk(0%, 44%, 95%, 78%)
Oklch
oklch(26.5% 0.055 66.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

837C2C
2B3382

Analogous

824F2B
837C2C
5E822B

Triadic

837C2C
2B827B
7B2B82

Split-Comp.

837C2C
2B5E82
4F2B82

Tetradic

837C2C
2B824F
2B3382
822B5E

Contrast Matrix WCAG 2.1 Contrast

837C2C
DEA353
F53B15
B91D0E
371F03
—
1.9
Fail
1.1
Fail
1.5
Fail
3.6
AA Large
1.9
Fail
—
1.7
Fail
2.9
Fail
7.0
AA
1.1
Fail
1.7
Fail
—
1.7
Fail
4.1
AA Large
1.5
Fail
2.9
Fail
1.7
Fail
—
2.4
Fail
3.6
AA Large
7.0
AA
4.1
AA Large
2.4
Fail
—
White BG
4.3AA Large
2.2Fail
3.8AA Large
6.5AA
15.4AAA
Black BG
4.9AA
9.5AAA
5.5AA
3.2AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

80803F
C4C466
A4A31E
757412
2D2C0A

Deuteranopia

808144
C8CC6B
AFBD20
7F8A13
2E300B

Tritanopia

834F52
DB7679
EC2527
B11415
360F10

Achromatopsia

757575
ACACAC
6E6E6E
4A4A4A
232323

Shades & Tints Shades & Tints

#837C2C

Dark
Light

#DEA353

Dark
Light

#F53B15

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #837c2c;
  --color-2: #dea353;
  --color-3: #f53b15;
  --color-4: #b91d0e;
  --color-5: #371f03;
}

SCSS

$color-1: #837c2c;
$color-2: #dea353;
$color-3: #f53b15;
$color-4: #b91d0e;
$color-5: #371f03;

TAILWIND

colors: {
  'brand-1': '#837c2c',
  'brand-2': '#dea353',
  'brand-3': '#f53b15',
  'brand-4': '#b91d0e',
  'brand-5': '#371f03',
}

RGB Array

[131, 124, 44], [222, 163, 83], [245, 59, 21], [185, 29, 14], [55, 31, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #837C2C, #DEA353, #F53B15, #B91D0E, #371F03 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: #837c2c; --color-2: #dea353; --color-3: #f53b15; --color-4: #b91d0e; --color-5: #371f03. 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