← Back to Editor

#E0D39D · #FCB04D · #D8A35E · #B6956A · #A28C6F

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

#E0D39D

Goose Yellow · Khaki · Sunflower

HEX
#E0D39D
RGB
rgb(224, 211, 157)
HSL
hsl(48, 52%, 75%)
HSB
hsb(48, 30%, 88%)
CMYK
cmyk(0%, 6%, 30%, 12%)
Oklch
oklch(86.4% 0.072 96.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FCB04D

Ginger · SandyBrown · Warm Sun

HEX
#FCB04D
RGB
rgb(252, 176, 77)
HSL
hsl(34, 97%, 65%)
HSB
hsb(34, 69%, 99%)
CMYK
cmyk(0%, 30%, 69%, 1%)
Oklch
oklch(81.3% 0.143 70.2)

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

#D8A35E

Ginger · SandyBrown · Warm Sun

HEX
#D8A35E
RGB
rgb(216, 163, 94)
HSL
hsl(34, 61%, 61%)
HSB
hsb(34, 56%, 85%)
CMYK
cmyk(0%, 25%, 56%, 15%)
Oklch
oklch(75.1% 0.107 72.2)

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

#B6956A

Ginger · DarkSalmon · Warm Sun

HEX
#B6956A
RGB
rgb(182, 149, 106)
HSL
hsl(34, 34%, 56%)
HSB
hsb(34, 42%, 71%)
CMYK
cmyk(0%, 18%, 42%, 29%)
Oklch
oklch(69.0% 0.070 73.6)

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

#A28C6F

Ginger · Gray · Warm Sun

HEX
#A28C6F
RGB
rgb(162, 140, 111)
HSL
hsl(34, 22%, 54%)
HSB
hsb(34, 31%, 64%)
CMYK
cmyk(0%, 14%, 31%, 36%)
Oklch
oklch(65.2% 0.049 74.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0D39D
9EABE0

Analogous

E0B29E
E0D39D
CDE09E

Triadic

E0D39D
9EE0D3
D39EE0

Split-Comp.

E0D39D
9ECDE0
B29EE0

Tetradic

E0D39D
9EE0B2
9EABE0
E09ECD

Contrast Matrix WCAG 2.1 Contrast

E0D39D
FCB04D
D8A35E
B6956A
A28C6F
—
1.2
Fail
1.5
Fail
1.9
Fail
2.1
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.1
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
White BG
1.5Fail
1.8Fail
2.3Fail
2.8Fail
3.2AA Large
Black BG
14.0AAA
11.5AAA
9.3AAA
7.5AAA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADAAA
DBDA65
C1C16F
A8A774
989876

Deuteranopia

DBDCAD
E0E56B
C4C873
AAAC77
9A9B78

Tritanopia

DFB4B7
F8787C
D57C7F
B47D7E
A17C7D

Achromatopsia

D1D1D1
BBBBBB
ABABAB
9A9A9A
8F8F8F

Shades & Tints Shades & Tints

#E0D39D

Dark
Light

#FCB04D

Dark
Light

#D8A35E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0d39d;
  --color-2: #fcb04d;
  --color-3: #d8a35e;
  --color-4: #b6956a;
  --color-5: #a28c6f;
}

SCSS

$color-1: #e0d39d;
$color-2: #fcb04d;
$color-3: #d8a35e;
$color-4: #b6956a;
$color-5: #a28c6f;

TAILWIND

colors: {
  'brand-1': '#e0d39d',
  'brand-2': '#fcb04d',
  'brand-3': '#d8a35e',
  'brand-4': '#b6956a',
  'brand-5': '#a28c6f',
}

RGB Array

[224, 211, 157], [252, 176, 77], [216, 163, 94], [182, 149, 106], [162, 140, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E0D39D, #FCB04D, #D8A35E, #B6956A, #A28C6F 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: #e0d39d; --color-2: #fcb04d; --color-3: #d8a35e; --color-4: #b6956a; --color-5: #a28c6f. 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