#E29731 + #D1632E + #8B7335 + #335839 + #470F0E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E29731

Ginger · GoldenRod · Warm Sun

HEX

#E29731

RGB

rgb(226, 151, 49)

HSL

hsl(35, 75%, 54%)

HSB

hsb(35, 78%, 89%)

CMYK

cmyk(0%, 33%, 78%, 11%)

Oklch

oklch(73.5% 0.143 69.6)

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

#D1632E

Tangerine · Chocolate · Amber Brown

HEX

#D1632E

RGB

rgb(209, 99, 46)

HSL

hsl(20, 64%, 50%)

HSB

hsb(20, 78%, 82%)

CMYK

cmyk(0%, 53%, 78%, 18%)

Oklch

oklch(62.5% 0.154 43.9)

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

#8B7335

Ochre · Sienna · Honey Gold

HEX

#8B7335

RGB

rgb(139, 115, 53)

HSL

hsl(43, 45%, 38%)

HSB

hsb(43, 62%, 55%)

CMYK

cmyk(0%, 17%, 62%, 45%)

Oklch

oklch(56.5% 0.086 88.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#335839

Celadon · DarkSlateGray · Forest Green

HEX

#335839

RGB

rgb(51, 88, 57)

HSL

hsl(130, 27%, 27%)

HSB

hsb(130, 42%, 35%)

CMYK

cmyk(42%, 0%, 35%, 65%)

Oklch

oklch(42.3% 0.067 148.2)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#470F0E

Vermilion · Maroon · Deep Berry

HEX

#470F0E

RGB

rgb(71, 15, 14)

HSL

hsl(1, 67%, 17%)

HSB

hsb(1, 80%, 28%)

CMYK

cmyk(0%, 79%, 80%, 72%)

Oklch

oklch(26.8% 0.085 25.9)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E29731

327BE2

Analogous

E24032

E29731

D3E232

Triadic

E29731

32E298

9832E2

Split-Comp.

E29731

32D3E2

4032E2

Tetradic

E29731

32E240

327BE2

E232D3

Contrast Matrix WCAG 2.1 Contrast

E29731	D1632E	8B7335	335839	470F0E
—	1.6 Fail	1.9 Fail	3.4 AA Large	6.5 AA
1.6 Fail	—	1.2 Fail	2.1 Fail	4.1 AA Large
1.9 Fail	1.2 Fail	—	1.8 Fail	3.4 AA Large
3.4 AA Large	2.1 Fail	1.8 Fail	—	1.9 Fail
6.5 AA	4.1 AA Large	3.4 AA Large	1.9 Fail	—

White BG

2.4Fail

3.8AA Large

4.6AA

8.1AAA

15.6AAA

Black BG

8.7AAA

5.5AA

4.6AA

2.6Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C14A

A1A03B

818044

434341

2F2E0E

Deuteranopia

C6CC50

A8B03E

828448

413E42

32360E

Tritanopia

DE5D61

CB4547

8A5052

354648

440E0E

Achromatopsia

A2A2A2

7E7E7E

737373

494949

202020

Shades & Tints Shades & Tints

#E29731

Dark

Light

#D1632E

Dark

Light

#8B7335

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e29731;
  --color-2: #d1632e;
  --color-3: #8b7335;
  --color-4: #335839;
  --color-5: #470f0e;
}

SCSS

$color-1: #e29731;
$color-2: #d1632e;
$color-3: #8b7335;
$color-4: #335839;
$color-5: #470f0e;

TAILWIND

colors: {
  'brand-1': '#e29731',
  'brand-2': '#d1632e',
  'brand-3': '#8b7335',
  'brand-4': '#335839',
  'brand-5': '#470f0e',
}

RGB Array

[226, 151, 49], [209, 99, 46], [139, 115, 53], [51, 88, 57], [71, 15, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E29731, #D1632E, #8B7335, #335839, #470F0E 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: #e29731; --color-2: #d1632e; --color-3: #8b7335; --color-4: #335839; --color-5: #470f0e. 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 general-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