← Back to Editor

#E28B46 · #F4320E · #8A0F12 · #22183D · #6A705C

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

#E28B46

Tangerine · Coral · Warm Sun

HEX
#E28B46
RGB
rgb(226, 139, 70)
HSL
hsl(27, 73%, 58%)
HSB
hsb(27, 69%, 89%)
CMYK
cmyk(0%, 38%, 69%, 11%)
Oklch
oklch(71.5% 0.135 56.6)

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

#F4320E

Vermilion · OrangeRed · Passion Red

HEX
#F4320E
RGB
rgb(244, 50, 14)
HSL
hsl(9, 91%, 51%)
HSB
hsb(9, 94%, 96%)
CMYK
cmyk(0%, 80%, 94%, 4%)
Oklch
oklch(62.7% 0.231 32.0)

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

#8A0F12

Vermilion · DarkRed · Wine Red

HEX
#8A0F12
RGB
rgb(138, 15, 18)
HSL
hsl(359, 80%, 30%)
HSB
hsb(359, 89%, 54%)
CMYK
cmyk(0%, 89%, 87%, 46%)
Oklch
oklch(40.6% 0.155 27.0)

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

#22183D

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#22183D
RGB
rgb(34, 24, 61)
HSL
hsl(256, 44%, 17%)
HSB
hsb(256, 61%, 24%)
CMYK
cmyk(44%, 61%, 0%, 76%)
Oklch
oklch(24.3% 0.068 293.1)

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

#6A705C

Grass Green · DimGray · Forest Green

HEX
#6A705C
RGB
rgb(106, 112, 92)
HSL
hsl(78, 10%, 40%)
HSB
hsb(78, 18%, 44%)
CMYK
cmyk(5%, 0%, 18%, 56%)
Oklch
oklch(53.4% 0.031 121.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E28B46
469CE2

Analogous

E2464E
E28B46
E2DA46

Triadic

E28B46
46E28C
8C46E2

Split-Comp.

E28B46
46E2DA
464EE2

Tetradic

E28B46
4EE246
469CE2
DA46E2

Contrast Matrix WCAG 2.1 Contrast

E28B46
F4320E
8A0F12
22183D
6A705C
—
1.5
Fail
3.7
AA Large
6.3
AA
2.0
Fail
1.5
Fail
—
2.5
Fail
4.2
AA Large
1.3
Fail
3.7
AA Large
2.5
Fail
—
1.7
Fail
1.9
Fail
6.3
AA
4.2
AA Large
1.7
Fail
—
3.2
AA Large
2.0
Fail
1.3
Fail
1.9
Fail
3.2
AA Large
—
White BG
2.6Fail
4.0AA Large
9.7AAA
16.6AAA
5.1AA
Black BG
8.0AAA
5.3AA
2.2Fail
1.3Fail
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC57
A09E17
555411
1E1E34
6D6D61

Deuteranopia

C1C85B
ABBA19
5C6511
1E1F32
6C6C62

Tritanopia

DE6467
EA1E1F
841111
222D2B
6A6566

Achromatopsia

9D9D9D
686868
343434
1F1F1F
6C6C6C

Shades & Tints Shades & Tints

#E28B46

Dark
Light

#F4320E

Dark
Light

#8A0F12

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e28b46;
  --color-2: #f4320e;
  --color-3: #8a0f12;
  --color-4: #22183d;
  --color-5: #6a705c;
}

SCSS

$color-1: #e28b46;
$color-2: #f4320e;
$color-3: #8a0f12;
$color-4: #22183d;
$color-5: #6a705c;

TAILWIND

colors: {
  'brand-1': '#e28b46',
  'brand-2': '#f4320e',
  'brand-3': '#8a0f12',
  'brand-4': '#22183d',
  'brand-5': '#6a705c',
}

RGB Array

[226, 139, 70], [244, 50, 14], [138, 15, 18], [34, 24, 61], [106, 112, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E28B46, #F4320E, #8A0F12, #22183D, #6A705C 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: #e28b46; --color-2: #f4320e; --color-3: #8a0f12; --color-4: #22183d; --color-5: #6a705c. 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