← Back to Editor

#A7C683 · #809530 · #726D1C · #391700 · #D48026

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

#A7C683

Willow Green · DarkSeaGreen · Apple Green

HEX
#A7C683
RGB
rgb(167, 198, 131)
HSL
hsl(88, 37%, 65%)
HSB
hsb(88, 34%, 78%)
CMYK
cmyk(16%, 0%, 34%, 22%)
Oklch
oklch(78.7% 0.096 128.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#809530

Grass Green · Olive · Forest Green

HEX
#809530
RGB
rgb(128, 149, 48)
HSL
hsl(72, 51%, 39%)
HSB
hsb(72, 68%, 58%)
CMYK
cmyk(14%, 0%, 68%, 42%)
Oklch
oklch(63.3% 0.128 120.3)

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

#726D1C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#726D1C
RGB
rgb(114, 109, 28)
HSL
hsl(57, 61%, 28%)
HSB
hsb(57, 75%, 45%)
CMYK
cmyk(0%, 4%, 75%, 55%)
Oklch
oklch(52.4% 0.099 105.8)

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

#391700

Tangerine · Black · Cinnamon

HEX
#391700
RGB
rgb(57, 23, 0)
HSL
hsl(24, 100%, 11%)
HSB
hsb(24, 100%, 22%)
CMYK
cmyk(0%, 60%, 100%, 78%)
Oklch
oklch(25.1% 0.064 52.2)

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

#D48026

Ochre · Chocolate · Amber Brown

HEX
#D48026
RGB
rgb(212, 128, 38)
HSL
hsl(31, 70%, 49%)
HSB
hsb(31, 82%, 83%)
CMYK
cmyk(0%, 40%, 82%, 17%)
Oklch
oklch(67.6% 0.142 61.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7C683
A485C7

Analogous

C7C585
A7C683
87C785

Triadic

A7C683
85A8C7
C785A8

Split-Comp.

A7C683
8587C7
C585C7

Tetradic

A7C683
85C7C5
A485C7
C78587

Contrast Matrix WCAG 2.1 Contrast

A7C683
809530
726D1C
391700
D48026
—
1.8
Fail
2.8
Fail
8.5
AAA
1.6
Fail
1.8
Fail
—
1.6
Fail
4.8
AA
1.1
Fail
2.8
Fail
1.6
Fail
—
3.0
AA Large
1.8
Fail
8.5
AAA
4.8
AA
3.0
AA Large
—
5.3
AA
1.6
Fail
1.1
Fail
1.8
Fail
5.3
AA
—
White BG
1.9Fail
3.4AA Large
5.4AA
16.2AAA
3.0AA Large
Black BG
11.0AAA
6.3AA
3.9AA Large
1.3Fail
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B593
898948
707030
2A2A06
B0AF3C

Deuteranopia

B3B097
88864E
707134
2C2F07
B5BB41

Tritanopia

A9A0A3
815C60
723F42
370A0B
D04D51

Achromatopsia

B5B5B5
838383
656565
1F1F1F
8F8F8F

Shades & Tints Shades & Tints

#A7C683

Dark
Light

#809530

Dark
Light

#726D1C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7c683;
  --color-2: #809530;
  --color-3: #726d1c;
  --color-4: #391700;
  --color-5: #d48026;
}

SCSS

$color-1: #a7c683;
$color-2: #809530;
$color-3: #726d1c;
$color-4: #391700;
$color-5: #d48026;

TAILWIND

colors: {
  'brand-1': '#a7c683',
  'brand-2': '#809530',
  'brand-3': '#726d1c',
  'brand-4': '#391700',
  'brand-5': '#d48026',
}

RGB Array

[167, 198, 131], [128, 149, 48], [114, 109, 28], [57, 23, 0], [212, 128, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A7C683, #809530, #726D1C, #391700, #D48026 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: #a7c683; --color-2: #809530; --color-3: #726d1c; --color-4: #391700; --color-5: #d48026. 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