#D6861E + #9C7A1B + #584527 + #8D1931 + #995F38 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D6861E

Ochre · Chocolate · Amber Brown

HEX

#D6861E

RGB

rgb(214, 134, 30)

HSL

hsl(34, 75%, 48%)

HSB

hsb(34, 86%, 84%)

CMYK

cmyk(0%, 37%, 86%, 16%)

Oklch

oklch(68.9% 0.145 66.1)

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

#9C7A1B

Ochre · DarkGoldenRod · Honey Gold

HEX

#9C7A1B

RGB

rgb(156, 122, 27)

HSL

hsl(44, 70%, 36%)

HSB

hsb(44, 83%, 61%)

CMYK

cmyk(0%, 22%, 83%, 39%)

Oklch

oklch(59.7% 0.113 87.2)

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

#584527

Ochre · DarkOliveGreen · Cinnamon

HEX

#584527

RGB

rgb(88, 69, 39)

HSL

hsl(37, 39%, 25%)

HSB

hsb(37, 56%, 35%)

CMYK

cmyk(0%, 22%, 56%, 65%)

Oklch

oklch(40.3% 0.052 77.9)

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

#8D1931

Vermilion · Brown · Wine Red

HEX

#8D1931

RGB

rgb(141, 25, 49)

HSL

hsl(348, 70%, 33%)

HSB

hsb(348, 82%, 55%)

CMYK

cmyk(0%, 82%, 65%, 45%)

Oklch

oklch(42.3% 0.150 15.8)

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

#995F38

Tangerine · Sienna · Amber Brown

HEX

#995F38

RGB

rgb(153, 95, 56)

HSL

hsl(24, 46%, 41%)

HSB

hsb(24, 63%, 60%)

CMYK

cmyk(0%, 38%, 63%, 40%)

Oklch

oklch(54.2% 0.093 53.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6861E

1F6ED6

Analogous

D62B1F

D6861E

CAD61F

Triadic

D6861E

1FD687

871FD6

Split-Comp.

D6861E

1FCAD6

2B1FD6

Tetradic

D6861E

1FD62B

1F6ED6

D61FCA

Contrast Matrix WCAG 2.1 Contrast

D6861E	9C7A1B	584527	8D1931	995F38
—	1.4 Fail	3.2 AA Large	3.1 AA Large	1.8 Fail
1.4 Fail	—	2.3 Fail	2.3 Fail	1.3 Fail
3.2 AA Large	2.3 Fail	—	1.0 Fail	1.8 Fail
3.1 AA Large	2.3 Fail	1.0 Fail	—	1.7 Fail
1.8 Fail	1.3 Fail	1.8 Fail	1.7 Fail	—

White BG

2.9Fail

4.0AA Large

9.1AAA

5.2AA

Black BG

7.3AAA

5.2AA

2.3Fail

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B337

8D8D32

50502E

5B5A2B

807F41

Deuteranopia

B8BE3D

8F9238

515230

626A2A

838844

Tritanopia

D24B4F

9A4448

573435

872726

96494B

Achromatopsia

929292

797979

474747

3E3E3E

6C6C6C

Shades & Tints Shades & Tints

#D6861E

Dark

Light

#9C7A1B

Dark

Light

#584527

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6861e;
  --color-2: #9c7a1b;
  --color-3: #584527;
  --color-4: #8d1931;
  --color-5: #995f38;
}

SCSS

$color-1: #d6861e;
$color-2: #9c7a1b;
$color-3: #584527;
$color-4: #8d1931;
$color-5: #995f38;

TAILWIND

colors: {
  'brand-1': '#d6861e',
  'brand-2': '#9c7a1b',
  'brand-3': '#584527',
  'brand-4': '#8d1931',
  'brand-5': '#995f38',
}

RGB Array

[214, 134, 30], [156, 122, 27], [88, 69, 39], [141, 25, 49], [153, 95, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6861E, #9C7A1B, #584527, #8D1931, #995F38 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: #d6861e; --color-2: #9c7a1b; --color-3: #584527; --color-4: #8d1931; --color-5: #995f38. 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