← Back to Editor

#E86611 · #573F34 · #404134 · #0A574E · #03131B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E86611

Tangerine · Chocolate · Amber Brown

HEX
#E86611
RGB
rgb(232, 102, 17)
HSL
hsl(24, 86%, 49%)
HSB
hsb(24, 93%, 91%)
CMYK
cmyk(0%, 56%, 93%, 9%)
Oklch
oklch(66.1% 0.181 46.0)

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

#573F34

Tangerine · DarkOliveGreen · Amber Brown

HEX
#573F34
RGB
rgb(87, 63, 52)
HSL
hsl(19, 25%, 27%)
HSB
hsb(19, 40%, 34%)
CMYK
cmyk(0%, 28%, 40%, 66%)
Oklch
oklch(39.1% 0.038 45.7)

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

#404134

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#404134
RGB
rgb(64, 65, 52)
HSL
hsl(65, 11%, 23%)
HSB
hsb(65, 20%, 25%)
CMYK
cmyk(2%, 0%, 20%, 75%)
Oklch
oklch(37.0% 0.021 111.0)

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

#0A574E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0A574E
RGB
rgb(10, 87, 78)
HSL
hsl(173, 79%, 19%)
HSB
hsb(173, 89%, 34%)
CMYK
cmyk(89%, 0%, 10%, 66%)
Oklch
oklch(41.2% 0.070 182.5)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#03131B

Lake Blue · Black · Deep Sea Blue

HEX
#03131B
RGB
rgb(3, 19, 27)
HSL
hsl(200, 80%, 6%)
HSB
hsb(200, 89%, 11%)
CMYK
cmyk(89%, 30%, 0%, 89%)
Oklch
oklch(17.6% 0.029 230.3)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E86611
1192E8

Analogous

E81127
E86611
E8D311

Triadic

E86611
11E867
6711E8

Split-Comp.

E86611
11E8D3
1127E8

Tetradic

E86611
27E811
1192E8
D311E8

Contrast Matrix WCAG 2.1 Contrast

E86611
573F34
404134
0A574E
03131B
—
2.9
Fail
3.1
AA Large
2.6
Fail
5.7
AA
2.9
Fail
—
1.1
Fail
1.1
Fail
1.9
Fail
3.1
AA Large
1.1
Fail
—
1.2
Fail
1.8
Fail
2.6
Fail
1.1
Fail
1.2
Fail
—
2.2
Fail
5.7
AA
1.9
Fail
1.8
Fail
2.2
Fail
—
White BG
3.3AA Large
9.7AAA
10.4AAA
8.4AAA
18.9AAA
Black BG
6.3AA
2.2Fail
2.0Fail
2.5Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0AF26
4D4C37
404037
2B2C50
0A0A19

Deuteranopia

B7C12B
4E5037
404038
272151
090819

Tritanopia

E13639
563939
403A3A
0E5252
041817

Achromatopsia

838383
454545
3F3F3F
3F3F3F
0F0F0F

Shades & Tints Shades & Tints

#E86611

Dark
Light

#573F34

Dark
Light

#404134

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e86611;
  --color-2: #573f34;
  --color-3: #404134;
  --color-4: #0a574e;
  --color-5: #03131b;
}

SCSS

$color-1: #e86611;
$color-2: #573f34;
$color-3: #404134;
$color-4: #0a574e;
$color-5: #03131b;

TAILWIND

colors: {
  'brand-1': '#e86611',
  'brand-2': '#573f34',
  'brand-3': '#404134',
  'brand-4': '#0a574e',
  'brand-5': '#03131b',
}

RGB Array

[232, 102, 17], [87, 63, 52], [64, 65, 52], [10, 87, 78], [3, 19, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E86611, #573F34, #404134, #0A574E, #03131B is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e86611; --color-2: #573f34; --color-3: #404134; --color-4: #0a574e; --color-5: #03131b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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