#E2B152 + #DC7940 + #C98987 + #B9C5AF + #FDE0B8 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#E2B152

Ginger · SandyBrown · Sunflower

HEX

#E2B152

RGB

rgb(226, 177, 82)

HSL

hsl(40, 71%, 60%)

HSB

hsb(40, 64%, 89%)

CMYK

cmyk(0%, 22%, 64%, 11%)

Oklch

oklch(78.7% 0.126 81.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DC7940

Tangerine · Chocolate · Warm Sun

HEX

#DC7940

RGB

rgb(220, 121, 64)

HSL

hsl(22, 69%, 56%)

HSB

hsb(22, 71%, 86%)

CMYK

cmyk(0%, 45%, 71%, 14%)

Oklch

oklch(67.7% 0.142 48.5)

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

#C98987

Peach Pink · DarkSalmon · Coral Red

HEX

#C98987

RGB

rgb(201, 137, 135)

HSL

hsl(2, 38%, 66%)

HSB

hsb(2, 33%, 79%)

CMYK

cmyk(0%, 32%, 33%, 21%)

Oklch

oklch(69.4% 0.079 21.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B9C5AF

Celadon · Silver · Apple Green

HEX

#B9C5AF

RGB

rgb(185, 197, 175)

HSL

hsl(93, 16%, 73%)

HSB

hsb(93, 11%, 77%)

CMYK

cmyk(6%, 0%, 11%, 23%)

Oklch

oklch(80.8% 0.033 130.7)

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

#FDE0B8

Goose Yellow · Wheat · Peach Orange

HEX

#FDE0B8

RGB

rgb(253, 224, 184)

HSL

hsl(35, 95%, 86%)

HSB

hsb(35, 27%, 99%)

CMYK

cmyk(0%, 11%, 27%, 1%)

Oklch

oklch(92.1% 0.061 75.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2B152

5181E1

Analogous

E16951

E2B152

C9E151

Triadic

E2B152

51E1B1

B151E1

Split-Comp.

E2B152

51C9E1

6951E1

Tetradic

E2B152

51E169

5181E1

E151C9

Contrast Matrix WCAG 2.1 Contrast

E2B152	DC7940	C98987	B9C5AF	FDE0B8
—	1.6 Fail	1.4 Fail	1.1 Fail	1.6 Fail
1.6 Fail	—	1.1 Fail	1.7 Fail	2.4 Fail
1.4 Fail	1.1 Fail	—	1.6 Fail	2.2 Fail
1.1 Fail	1.7 Fail	1.6 Fail	—	1.4 Fail
1.6 Fail	2.4 Fail	2.2 Fail	1.4 Fail	—

White BG

2.0Fail

3.1AA Large

2.8Fail

1.8Fail

1.3Fail

Black BG

10.6AAA

6.9AA

7.4AAA

11.7AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC69

B1B04E

ADAD87

BEBEB4

F0F0C2

Deuteranopia

D0D36F

B7BE51

B1B688

BEBDB6

F2F4C4

Tritanopia

E07B7F

D7595B

C68888

BAB9B9

FCC9CB

Achromatopsia

B5B5B5

909090

9C9C9C

BFBFBF

E4E4E4

Shades & Tints Shades & Tints

#E2B152

Dark

Light

#DC7940

Dark

Light

#C98987

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2b152;
  --color-2: #dc7940;
  --color-3: #c98987;
  --color-4: #b9c5af;
  --color-5: #fde0b8;
}

SCSS

$color-1: #e2b152;
$color-2: #dc7940;
$color-3: #c98987;
$color-4: #b9c5af;
$color-5: #fde0b8;

TAILWIND

colors: {
  'brand-1': '#e2b152',
  'brand-2': '#dc7940',
  'brand-3': '#c98987',
  'brand-4': '#b9c5af',
  'brand-5': '#fde0b8',
}

RGB Array

[226, 177, 82], [220, 121, 64], [201, 137, 135], [185, 197, 175], [253, 224, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E2B152, #DC7940, #C98987, #B9C5AF, #FDE0B8 is ideal for: health products, baby brands, fresh-style blogs. 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: #e2b152; --color-2: #dc7940; --color-3: #c98987; --color-4: #b9c5af; --color-5: #fde0b8. 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. 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