#9D5427 + #E03718 + #2C2012 + #D39E2C + #747E65 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9D5427

Tangerine · Sienna · Amber Brown

HEX

#9D5427

RGB

rgb(157, 84, 39)

HSL

hsl(23, 60%, 38%)

HSB

hsb(23, 75%, 62%)

CMYK

cmyk(0%, 46%, 75%, 38%)

Oklch

oklch(52.5% 0.113 49.7)

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

#E03718

Vermilion · OrangeRed · Passion Red

HEX

#E03718

RGB

rgb(224, 55, 24)

HSL

hsl(9, 81%, 49%)

HSB

hsb(9, 89%, 88%)

CMYK

cmyk(0%, 75%, 89%, 12%)

Oklch

oklch(59.6% 0.209 32.4)

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

#2C2012

Ochre · Black · Cinnamon

HEX

#2C2012

RGB

rgb(44, 32, 18)

HSL

hsl(32, 42%, 12%)

HSB

hsb(32, 59%, 17%)

CMYK

cmyk(0%, 27%, 59%, 83%)

Oklch

oklch(25.4% 0.030 70.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#D39E2C

Ochre · GoldenRod · Honey Gold

HEX

#D39E2C

RGB

rgb(211, 158, 44)

HSL

hsl(41, 65%, 50%)

HSB

hsb(41, 79%, 83%)

CMYK

cmyk(0%, 25%, 79%, 17%)

Oklch

oklch(73.1% 0.137 81.7)

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

#747E65

Grass Green · DimGray · Olive Green

HEX

#747E65

RGB

rgb(116, 126, 101)

HSL

hsl(84, 11%, 45%)

HSB

hsb(84, 20%, 49%)

CMYK

cmyk(8%, 0%, 20%, 51%)

Oklch

oklch(57.8% 0.039 125.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D5427

276E9B

Analogous

9B2734

9D5427

9B8D27

Triadic

9D5427

279B53

53279B

Split-Comp.

9D5427

279B8D

27349B

Tetradic

9D5427

349B27

276E9B

8D279B

Contrast Matrix WCAG 2.1 Contrast

9D5427	E03718	2C2012	D39E2C	747E65
—	1.3 Fail	2.8 Fail	2.3 Fail	1.3 Fail
1.3 Fail	—	3.6 AA Large	1.8 Fail	1.0 Fail
2.8 Fail	3.6 AA Large	—	6.6 AA	3.7 AA Large
2.3 Fail	1.8 Fail	6.6 AA	—	1.8 Fail
1.3 Fail	1.0 Fail	3.7 AA Large	1.8 Fail	—

White BG

5.6AA

4.4AA Large

15.9AAA

2.4Fail

4.3AA Large

Black BG

3.7AA Large

4.7AA

1.3Fail

8.7AAA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D32

979520

272715

BCBC48

78786B

Deuteranopia

828735

A1AD21

282816

BFC34E

78776C

Tritanopia

993A3C

D82527

2B1819

D05D62

747071

Achromatopsia

656565

666666

222222

A1A1A1

787878

Shades & Tints Shades & Tints

#9D5427

Dark

Light

#E03718

Dark

Light

#2C2012

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d5427;
  --color-2: #e03718;
  --color-3: #2c2012;
  --color-4: #d39e2c;
  --color-5: #747e65;
}

SCSS

$color-1: #9d5427;
$color-2: #e03718;
$color-3: #2c2012;
$color-4: #d39e2c;
$color-5: #747e65;

TAILWIND

colors: {
  'brand-1': '#9d5427',
  'brand-2': '#e03718',
  'brand-3': '#2c2012',
  'brand-4': '#d39e2c',
  'brand-5': '#747e65',
}

RGB Array

[157, 84, 39], [224, 55, 24], [44, 32, 18], [211, 158, 44], [116, 126, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D5427, #E03718, #2C2012, #D39E2C, #747E65 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: #9d5427; --color-2: #e03718; --color-3: #2c2012; --color-4: #d39e2c; --color-5: #747e65. 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