#E89F3D + #C9402D + #B01D13 + #564638 + #404525 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#E89F3D

Ginger · GoldenRod · Warm Sun

HEX

#E89F3D

RGB

rgb(232, 159, 61)

HSL

hsl(34, 79%, 57%)

HSB

hsb(34, 74%, 91%)

CMYK

cmyk(0%, 31%, 74%, 9%)

Oklch

oklch(75.8% 0.140 70.3)

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

#C9402D

Vermilion · FireBrick · Passion Red

HEX

#C9402D

RGB

rgb(201, 64, 45)

HSL

hsl(7, 63%, 48%)

HSB

hsb(7, 78%, 79%)

CMYK

cmyk(0%, 68%, 78%, 21%)

Oklch

oklch(56.6% 0.177 31.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#B01D13

Vermilion · FireBrick · Wine Red

HEX

#B01D13

RGB

rgb(176, 29, 19)

HSL

hsl(4, 81%, 38%)

HSB

hsb(4, 89%, 69%)

CMYK

cmyk(0%, 84%, 89%, 31%)

Oklch

oklch(48.8% 0.183 29.5)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#564638

Tangerine · DarkOliveGreen · Amber Brown

HEX

#564638

RGB

rgb(86, 70, 56)

HSL

hsl(28, 21%, 28%)

HSB

hsb(28, 35%, 34%)

CMYK

cmyk(0%, 19%, 35%, 66%)

Oklch

oklch(40.7% 0.031 63.0)

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

#404525

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#404525

RGB

rgb(64, 69, 37)

HSL

hsl(69, 30%, 21%)

HSB

hsb(69, 46%, 27%)

CMYK

cmyk(7%, 0%, 46%, 73%)

Oklch

oklch(37.7% 0.050 116.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E89F3D

3B86E8

Analogous

E8463B

E89F3D

DCE83B

Triadic

E89F3D

3BE89D

9D3BE8

Split-Comp.

E89F3D

3BDCE8

463BE8

Tetradic

E89F3D

3BE846

3B86E8

E83BDC

Contrast Matrix WCAG 2.1 Contrast

E89F3D	C9402D	B01D13	564638	404525
—	2.2 Fail	3.1 AA Large	4.1 AA Large	4.5 AA
2.2 Fail	—	1.4 Fail	1.8 Fail	2.0 Fail
3.1 AA Large	1.4 Fail	—	1.3 Fail	1.4 Fail
4.1 AA Large	1.8 Fail	1.3 Fail	—	1.1 Fail
4.5 AA	2.0 Fail	1.4 Fail	1.1 Fail	—

White BG

2.2Fail

4.9AA

6.9AA

9.0AAA

10.0AAA

Black BG

9.5AAA

4.3AA Large

3.0AA Large

2.3Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C855

8E8C32

706F15

4F4F3B

42422D

Deuteranopia

CDD25A

96A033

798416

50513C

42422F

Tritanopia

E4676C

C23536

A91718

553E3F

403334

Achromatopsia

AAAAAA

676767

484848

494949

404040

Shades & Tints Shades & Tints

#E89F3D

Dark

Light

#C9402D

Dark

Light

#B01D13

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e89f3d;
  --color-2: #c9402d;
  --color-3: #b01d13;
  --color-4: #564638;
  --color-5: #404525;
}

SCSS

$color-1: #e89f3d;
$color-2: #c9402d;
$color-3: #b01d13;
$color-4: #564638;
$color-5: #404525;

TAILWIND

colors: {
  'brand-1': '#e89f3d',
  'brand-2': '#c9402d',
  'brand-3': '#b01d13',
  'brand-4': '#564638',
  'brand-5': '#404525',
}

RGB Array

[232, 159, 61], [201, 64, 45], [176, 29, 19], [86, 70, 56], [64, 69, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E89F3D, #C9402D, #B01D13, #564638, #404525 is ideal for: tech websites, dark mode UIs, game UIs. 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: #e89f3d; --color-2: #c9402d; --color-3: #b01d13; --color-4: #564638; --color-5: #404525. 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. 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