← Back to Editor

#D1D190 · #E1E7BA · #FFFFC9 · #7F7F40 · #A3C380

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#D1D190

Fresh Green · Tan · Sunflower

HEX
#D1D190
RGB
rgb(209, 209, 144)
HSL
hsl(60, 41%, 69%)
HSB
hsb(60, 31%, 82%)
CMYK
cmyk(0%, 0%, 31%, 18%)
Oklch
oklch(84.5% 0.085 108.1)

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

#E1E7BA

Fresh Green · Wheat · Lemon Cream

HEX
#E1E7BA
RGB
rgb(225, 231, 186)
HSL
hsl(68, 48%, 82%)
HSB
hsb(68, 19%, 91%)
CMYK
cmyk(3%, 0%, 19%, 9%)
Oklch
oklch(91.2% 0.059 113.8)

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

#FFFFC9

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFC9
RGB
rgb(255, 255, 201)
HSL
hsl(60, 100%, 89%)
HSB
hsb(60, 21%, 100%)
CMYK
cmyk(0%, 0%, 21%, 0%)
Oklch
oklch(98.7% 0.069 107.6)

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

#7F7F40

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#7F7F40
RGB
rgb(127, 127, 64)
HSL
hsl(60, 33%, 37%)
HSB
hsb(60, 50%, 50%)
CMYK
cmyk(0%, 0%, 50%, 50%)
Oklch
oklch(58.2% 0.085 108.8)

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

#A3C380

Willow Green · DarkSeaGreen · Apple Green

HEX
#A3C380
RGB
rgb(163, 195, 128)
HSL
hsl(89, 36%, 63%)
HSB
hsb(89, 34%, 76%)
CMYK
cmyk(16%, 0%, 34%, 24%)
Oklch
oklch(77.7% 0.097 129.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1D190
9090D0

Analogous

D0B090
D1D190
B0D090

Triadic

D1D190
90D0D0
D090D0

Split-Comp.

D1D190
90B0D0
B090D0

Tetradic

D1D190
90D0B0
9090D0
D090B0

Contrast Matrix WCAG 2.1 Contrast

D1D190
E1E7BA
FFFFC9
7F7F40
A3C380
—
1.2
Fail
1.5
Fail
2.6
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
3.3
AA Large
1.5
Fail
1.5
Fail
1.2
Fail
—
4.1
AA Large
1.9
Fail
2.6
Fail
3.3
AA Large
4.1
AA Large
—
2.1
Fail
1.2
Fail
1.5
Fail
1.9
Fail
2.1
Fail
—
White BG
1.6Fail
1.3Fail
1.0Fail
4.2AA Large
2.0Fail
Black BG
13.2AAA
16.3AAA
20.4AAA
5.0AA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1A0
E4E4C5
FFFFD6
7F7F4F
B1B190

Deuteranopia

D1D1A4
E3E3C8
FFFFD9
7F7F53
AFAD94

Tritanopia

D1ACAF
E1CDCF
FFE0E3
7F5B5E
A59DA0

Achromatopsia

CACACA
E0E0E0
F9F9F9
787878
B2B2B2

Shades & Tints Shades & Tints

#D1D190

Dark
Light

#E1E7BA

Dark
Light

#FFFFC9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1d190;
  --color-2: #e1e7ba;
  --color-3: #ffffc9;
  --color-4: #7f7f40;
  --color-5: #a3c380;
}

SCSS

$color-1: #d1d190;
$color-2: #e1e7ba;
$color-3: #ffffc9;
$color-4: #7f7f40;
$color-5: #a3c380;

TAILWIND

colors: {
  'brand-1': '#d1d190',
  'brand-2': '#e1e7ba',
  'brand-3': '#ffffc9',
  'brand-4': '#7f7f40',
  'brand-5': '#a3c380',
}

RGB Array

[209, 209, 144], [225, 231, 186], [255, 255, 201], [127, 127, 64], [163, 195, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D1D190, #E1E7BA, #FFFFC9, #7F7F40, #A3C380 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #d1d190; --color-2: #e1e7ba; --color-3: #ffffc9; --color-4: #7f7f40; --color-5: #a3c380. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 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