← Back to Editor

#983D0A · #E66565 · #B87F56 · #848C54 · #73802E

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#983D0A

Tangerine · Brown · Amber Brown

HEX
#983D0A
RGB
rgb(152, 61, 10)
HSL
hsl(22, 88%, 32%)
HSB
hsb(22, 93%, 60%)
CMYK
cmyk(0%, 60%, 93%, 40%)
Oklch
oklch(47.8% 0.134 43.7)

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

#E66565

Peach Pink · Salmon · Coral Red

HEX
#E66565
RGB
rgb(230, 101, 101)
HSL
hsl(0, 72%, 65%)
HSB
hsb(0, 56%, 90%)
CMYK
cmyk(0%, 56%, 56%, 10%)
Oklch
oklch(66.6% 0.161 22.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B87F56

Tangerine · DarkSalmon · Warm Sun

HEX
#B87F56
RGB
rgb(184, 127, 86)
HSL
hsl(25, 41%, 53%)
HSB
hsb(25, 53%, 72%)
CMYK
cmyk(0%, 31%, 53%, 28%)
Oklch
oklch(64.5% 0.090 56.1)

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

#848C54

Autumn Sage · Gray · Honey Gold

HEX
#848C54
RGB
rgb(132, 140, 84)
HSL
hsl(69, 25%, 44%)
HSB
hsb(69, 40%, 55%)
CMYK
cmyk(6%, 0%, 40%, 45%)
Oklch
oklch(62.0% 0.078 115.4)

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

#73802E

Grass Green · DarkOliveGreen · Forest Green

HEX
#73802E
RGB
rgb(115, 128, 46)
HSL
hsl(70, 47%, 34%)
HSB
hsb(70, 64%, 50%)
CMYK
cmyk(10%, 0%, 64%, 50%)
Oklch
oklch(57.2% 0.107 117.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

983D0A
0A6599

Analogous

990A1D
983D0A
99860A

Triadic

983D0A
0A993E
3E0A99

Split-Comp.

983D0A
0A9986
0A1D99

Tetradic

983D0A
1D990A
0A6599
860A99

Contrast Matrix WCAG 2.1 Contrast

983D0A
E66565
B87F56
848C54
73802E
—
2.1
Fail
2.1
Fail
1.9
Fail
1.6
Fail
2.1
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
2.1
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.9
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
White BG
7.0AA
3.3AA Large
3.4AA Large
3.6AA Large
4.3AA Large
Black BG
3.0AA Large
6.4AA
6.2AA
5.9AA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717016
AEAD65
9F9F60
878862
797942

Deuteranopia

767D19
B6BF65
A3A762
878665
787747

Tritanopia

932022
E06565
B56869
846C6F
745255

Achromatopsia

525252
8C8C8C
8B8B8B
838383
737373

Shades & Tints Shades & Tints

#983D0A

Dark
Light

#E66565

Dark
Light

#B87F56

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #983d0a;
  --color-2: #e66565;
  --color-3: #b87f56;
  --color-4: #848c54;
  --color-5: #73802e;
}

SCSS

$color-1: #983d0a;
$color-2: #e66565;
$color-3: #b87f56;
$color-4: #848c54;
$color-5: #73802e;

TAILWIND

colors: {
  'brand-1': '#983d0a',
  'brand-2': '#e66565',
  'brand-3': '#b87f56',
  'brand-4': '#848c54',
  'brand-5': '#73802e',
}

RGB Array

[152, 61, 10], [230, 101, 101], [184, 127, 86], [132, 140, 84], [115, 128, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #983D0A, #E66565, #B87F56, #848C54, #73802E is ideal for: corporate websites, product showcases, portfolios. 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: #983d0a; --color-2: #e66565; --color-3: #b87f56; --color-4: #848c54; --color-5: #73802e. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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