← Back to Editor

#DF8726 · #8C3E2A · #A63517 · #46140B · #71506F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DF8726

Ginger · GoldenRod · Warm Sun

HEX
#DF8726
RGB
rgb(223, 135, 38)
HSL
hsl(31, 74%, 51%)
HSB
hsb(31, 83%, 87%)
CMYK
cmyk(0%, 39%, 83%, 13%)
Oklch
oklch(70.2% 0.148 62.3)

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

#8C3E2A

Crimson · Sienna · Wine Red

HEX
#8C3E2A
RGB
rgb(140, 62, 42)
HSL
hsl(12, 54%, 36%)
HSB
hsb(12, 70%, 55%)
CMYK
cmyk(0%, 56%, 70%, 45%)
Oklch
oklch(46.3% 0.111 35.5)

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

#A63517

Vermilion · Brown · Wine Red

HEX
#A63517
RGB
rgb(166, 53, 23)
HSL
hsl(13, 76%, 37%)
HSB
hsb(13, 86%, 65%)
CMYK
cmyk(0%, 68%, 86%, 35%)
Oklch
oklch(49.2% 0.154 35.2)

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

#46140B

Vermilion · Maroon · Deep Berry

HEX
#46140B
RGB
rgb(70, 20, 11)
HSL
hsl(9, 73%, 16%)
HSB
hsb(9, 84%, 27%)
CMYK
cmyk(0%, 71%, 84%, 73%)
Oklch
oklch(27.2% 0.079 32.4)

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

#71506F

Rose Purple · DimGray · Eggplant

HEX
#71506F
RGB
rgb(113, 80, 111)
HSL
hsl(304, 17%, 38%)
HSB
hsb(304, 29%, 44%)
CMYK
cmyk(0%, 29%, 2%, 56%)
Oklch
oklch(47.8% 0.064 328.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF8726
267FDF

Analogous

DF2926
DF8726
DBDF26

Triadic

DF8726
26DF85
8526DF

Split-Comp.

DF8726
26DBDF
2926DF

Tetradic

DF8726
26DF29
267FDF
DF26DB

Contrast Matrix WCAG 2.1 Contrast

DF8726
8C3E2A
A63517
46140B
71506F
—
2.7
Fail
2.4
Fail
5.6
AA
2.5
Fail
2.7
Fail
—
1.1
Fail
2.1
Fail
1.1
Fail
2.4
Fail
1.1
Fail
—
2.3
Fail
1.0
Fail
5.6
AA
2.1
Fail
2.3
Fail
—
2.3
Fail
2.5
Fail
1.1
Fail
1.0
Fail
2.3
Fail
—
White BG
2.8Fail
7.4AAA
6.7AA
15.4AAA
6.8AA
Black BG
7.6AAA
2.8Fail
3.1AA Large
1.4Fail
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B83D
6A6A2F
75741E
30300D
636267

Deuteranopia

BEC543
6F7530
7C8420
33370E
656766

Tritanopia

DB5054
883334
A02425
440F0F
6F6260

Achromatopsia

969696
535353
535353
222222
5D5D5D

Shades & Tints Shades & Tints

#DF8726

Dark
Light

#8C3E2A

Dark
Light

#A63517

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df8726;
  --color-2: #8c3e2a;
  --color-3: #a63517;
  --color-4: #46140b;
  --color-5: #71506f;
}

SCSS

$color-1: #df8726;
$color-2: #8c3e2a;
$color-3: #a63517;
$color-4: #46140b;
$color-5: #71506f;

TAILWIND

colors: {
  'brand-1': '#df8726',
  'brand-2': '#8c3e2a',
  'brand-3': '#a63517',
  'brand-4': '#46140b',
  'brand-5': '#71506f',
}

RGB Array

[223, 135, 38], [140, 62, 42], [166, 53, 23], [70, 20, 11], [113, 80, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DF8726, #8C3E2A, #A63517, #46140B, #71506F 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: #df8726; --color-2: #8c3e2a; --color-3: #a63517; --color-4: #46140b; --color-5: #71506f. 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