← Back to Editor

#7C8A67 · #AED790 · #D1EB99 · #D7D479 · #D7AF6A

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

#7C8A67

Grass Green · Gray · Olive Green

HEX
#7C8A67
RGB
rgb(124, 138, 103)
HSL
hsl(84, 15%, 47%)
HSB
hsb(84, 25%, 54%)
CMYK
cmyk(10%, 0%, 25%, 46%)
Oklch
oklch(61.2% 0.053 125.6)

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

#AED790

Celadon · LightGreen · Apple Green

HEX
#AED790
RGB
rgb(174, 215, 144)
HSL
hsl(95, 47%, 70%)
HSB
hsb(95, 33%, 84%)
CMYK
cmyk(19%, 0%, 33%, 16%)
Oklch
oklch(83.2% 0.104 132.7)

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

#D1EB99

Willow Green · Khaki · Apple Green

HEX
#D1EB99
RGB
rgb(209, 235, 153)
HSL
hsl(79, 67%, 76%)
HSB
hsb(79, 35%, 92%)
CMYK
cmyk(11%, 0%, 35%, 8%)
Oklch
oklch(90.2% 0.109 122.9)

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

#D7D479

Fresh Green · BurlyWood · Sunflower

HEX
#D7D479
RGB
rgb(215, 212, 121)
HSL
hsl(58, 54%, 66%)
HSB
hsb(58, 44%, 84%)
CMYK
cmyk(0%, 1%, 44%, 16%)
Oklch
oklch(85.3% 0.114 106.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D7AF6A

Ginger · BurlyWood · Warm Sun

HEX
#D7AF6A
RGB
rgb(215, 175, 106)
HSL
hsl(38, 58%, 63%)
HSB
hsb(38, 51%, 84%)
CMYK
cmyk(0%, 19%, 51%, 16%)
Oklch
oklch(77.5% 0.099 80.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C8A67
74668A

Analogous

8A8666
7C8A67
698A66

Triadic

7C8A67
667B8A
8A667B

Split-Comp.

7C8A67
66698A
86668A

Tetradic

7C8A67
668A86
74668A
8A6669

Contrast Matrix WCAG 2.1 Contrast

7C8A67
AED790
D1EB99
D7D479
D7AF6A
—
2.3
Fail
2.8
Fail
2.4
Fail
1.8
Fail
2.3
Fail
—
1.2
Fail
1.1
Fail
1.3
Fail
2.8
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
2.4
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.8
Fail
1.3
Fail
1.6
Fail
1.3
Fail
—
White BG
3.7AA Large
1.6Fail
1.3Fail
1.5Fail
2.1Fail
Black BG
5.7AA
12.9AAA
16.1AAA
13.6AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82826F
C0C0A1
DCDCAD
D6D68F
C6C57B

Deuteranopia

818072
BDBAA5
DBD9B2
D6D694
C8CB7F

Tritanopia

7D7678
B0AFB2
D2BDC0
D7A0A4
D5888B

Achromatopsia

828282
C3C3C3
DADADA
CBCBCB
B3B3B3

Shades & Tints Shades & Tints

#7C8A67

Dark
Light

#AED790

Dark
Light

#D1EB99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c8a67;
  --color-2: #aed790;
  --color-3: #d1eb99;
  --color-4: #d7d479;
  --color-5: #d7af6a;
}

SCSS

$color-1: #7c8a67;
$color-2: #aed790;
$color-3: #d1eb99;
$color-4: #d7d479;
$color-5: #d7af6a;

TAILWIND

colors: {
  'brand-1': '#7c8a67',
  'brand-2': '#aed790',
  'brand-3': '#d1eb99',
  'brand-4': '#d7d479',
  'brand-5': '#d7af6a',
}

RGB Array

[124, 138, 103], [174, 215, 144], [209, 235, 153], [215, 212, 121], [215, 175, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7C8A67, #AED790, #D1EB99, #D7D479, #D7AF6A 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: #7c8a67; --color-2: #aed790; --color-3: #d1eb99; --color-4: #d7d479; --color-5: #d7af6a. 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