← Back to Editor

#7E8866 · #A79B53 · #F5B470 · #EEA942 · #D76F26

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

#7E8866

Grass Green · Gray · Olive Green

HEX
#7E8866
RGB
rgb(126, 136, 102)
HSL
hsl(78, 14%, 47%)
HSB
hsb(78, 25%, 53%)
CMYK
cmyk(7%, 0%, 25%, 47%)
Oklch
oklch(60.9% 0.051 121.2)

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

#A79B53

Autumn Sage · Gray · Honey Gold

HEX
#A79B53
RGB
rgb(167, 155, 83)
HSL
hsl(51, 34%, 49%)
HSB
hsb(51, 50%, 65%)
CMYK
cmyk(0%, 7%, 50%, 35%)
Oklch
oklch(68.4% 0.094 100.0)

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

#F5B470

Ginger · SandyBrown · Warm Sun

HEX
#F5B470
RGB
rgb(245, 180, 112)
HSL
hsl(31, 87%, 70%)
HSB
hsb(31, 54%, 96%)
CMYK
cmyk(0%, 27%, 54%, 4%)
Oklch
oklch(81.6% 0.114 66.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#EEA942

Ginger · SandyBrown · Warm Sun

HEX
#EEA942
RGB
rgb(238, 169, 66)
HSL
hsl(36, 83%, 60%)
HSB
hsb(36, 72%, 93%)
CMYK
cmyk(0%, 29%, 72%, 7%)
Oklch
oklch(78.3% 0.141 73.5)

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

#D76F26

Tangerine · Chocolate · Amber Brown

HEX
#D76F26
RGB
rgb(215, 111, 38)
HSL
hsl(25, 70%, 50%)
HSB
hsb(25, 82%, 84%)
CMYK
cmyk(0%, 48%, 82%, 16%)
Oklch
oklch(65.1% 0.154 50.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E8866
716789

Analogous

898267
7E8866
6E8967

Triadic

7E8866
677F89
89677F

Split-Comp.

7E8866
676E89
826789

Tetradic

7E8866
678982
716789
89676E

Contrast Matrix WCAG 2.1 Contrast

7E8866
A79B53
F5B470
EEA942
D76F26
—
1.3
Fail
2.1
Fail
1.9
Fail
1.1
Fail
1.3
Fail
—
1.6
Fail
1.4
Fail
1.2
Fail
2.1
Fail
1.6
Fail
—
1.1
Fail
1.9
Fail
1.9
Fail
1.4
Fail
1.1
Fail
—
1.7
Fail
1.1
Fail
1.2
Fail
1.9
Fail
1.7
Fail
—
White BG
3.7AA Large
2.8Fail
1.8Fail
2.0Fail
3.4AA Large
Black BG
5.6AA
7.5AAA
11.6AAA
10.4AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82826E
A2A264
D9D880
D0D05B
AAA938

Deuteranopia

828170
A3A369
DDE284
D4D961
B0B83C

Tritanopia

7E7576
A67275
F28D90
EB6F73
D24649

Achromatopsia

818181
969696
C0C0C0
B2B2B2
868686

Shades & Tints Shades & Tints

#7E8866

Dark
Light

#A79B53

Dark
Light

#F5B470

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e8866;
  --color-2: #a79b53;
  --color-3: #f5b470;
  --color-4: #eea942;
  --color-5: #d76f26;
}

SCSS

$color-1: #7e8866;
$color-2: #a79b53;
$color-3: #f5b470;
$color-4: #eea942;
$color-5: #d76f26;

TAILWIND

colors: {
  'brand-1': '#7e8866',
  'brand-2': '#a79b53',
  'brand-3': '#f5b470',
  'brand-4': '#eea942',
  'brand-5': '#d76f26',
}

RGB Array

[126, 136, 102], [167, 155, 83], [245, 180, 112], [238, 169, 66], [215, 111, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7E8866, #A79B53, #F5B470, #EEA942, #D76F26 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: #7e8866; --color-2: #a79b53; --color-3: #f5b470; --color-4: #eea942; --color-5: #d76f26. 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