← Back to Editor

#DE8B2C · #EB5F38 · #EB3838 · #454141 · #464A61

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 Library

Color Details Color Details

#DE8B2C

Ginger · GoldenRod · Warm Sun

HEX
#DE8B2C
RGB
rgb(222, 139, 44)
HSL
hsl(32, 73%, 52%)
HSB
hsb(32, 80%, 87%)
CMYK
cmyk(0%, 37%, 80%, 13%)
Oklch
oklch(70.8% 0.144 64.2)

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

#EB5F38

Vermilion · Tomato · Passion Red

HEX
#EB5F38
RGB
rgb(235, 95, 56)
HSL
hsl(13, 82%, 57%)
HSB
hsb(13, 76%, 92%)
CMYK
cmyk(0%, 60%, 76%, 8%)
Oklch
oklch(65.9% 0.182 36.2)

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

#EB3838

Vermilion · Crimson · Passion Red

HEX
#EB3838
RGB
rgb(235, 56, 56)
HSL
hsl(0, 82%, 57%)
HSB
hsb(0, 76%, 92%)
CMYK
cmyk(0%, 76%, 76%, 8%)
Oklch
oklch(61.8% 0.215 26.2)

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

#454141

Dark Cyan · DarkSlateGray · Charcoal

HEX
#454141
RGB
rgb(69, 65, 65)
HSL
hsl(0, 3%, 26%)
HSB
hsb(0, 6%, 27%)
CMYK
cmyk(0%, 6%, 6%, 73%)
Oklch
oklch(37.9% 0.005 17.4)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#464A61

Indigo · DarkSlateGray · Prussian Blue

HEX
#464A61
RGB
rgb(70, 74, 97)
HSL
hsl(231, 16%, 33%)
HSB
hsb(231, 28%, 38%)
CMYK
cmyk(28%, 24%, 0%, 62%)
Oklch
oklch(41.5% 0.039 276.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE8B2C
2B7FDE

Analogous

DE312B
DE8B2C
D8DE2B

Triadic

DE8B2C
2BDE8B
8B2BDE

Split-Comp.

DE8B2C
2BD8DE
312BDE

Tetradic

DE8B2C
2BDE31
2B7FDE
DE2BD8

Contrast Matrix WCAG 2.1 Contrast

DE8B2C
EB5F38
EB3838
454141
464A61
—
1.3
Fail
1.5
Fail
3.8
AA Large
3.2
AA Large
1.3
Fail
—
1.2
Fail
3.0
Fail
2.6
Fail
1.5
Fail
1.2
Fail
—
2.5
Fail
2.1
Fail
3.8
AA Large
3.0
Fail
2.5
Fail
—
1.2
Fail
3.2
AA Large
2.6
Fail
2.1
Fail
1.2
Fail
—
White BG
2.7Fail
3.4AA Large
4.1AA Large
10.1AAA
8.7AAA
Black BG
7.8AAA
6.2AA
5.2AA
2.1Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BAB943
AEAD41
9D9C38
434341
48485B

Deuteranopia

BFC549
B7C144
A8B538
444441
48475A

Tritanopia

DA5559
E4494B
E23838
454141
465756

Achromatopsia

999999
848484
6E6E6E
424242
4B4B4B

Shades & Tints Shades & Tints

#DE8B2C

Dark
Light

#EB5F38

Dark
Light

#EB3838

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de8b2c;
  --color-2: #eb5f38;
  --color-3: #eb3838;
  --color-4: #454141;
  --color-5: #464a61;
}

SCSS

$color-1: #de8b2c;
$color-2: #eb5f38;
$color-3: #eb3838;
$color-4: #454141;
$color-5: #464a61;

TAILWIND

colors: {
  'brand-1': '#de8b2c',
  'brand-2': '#eb5f38',
  'brand-3': '#eb3838',
  'brand-4': '#454141',
  'brand-5': '#464a61',
}

RGB Array

[222, 139, 44], [235, 95, 56], [235, 56, 56], [69, 65, 65], [70, 74, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE8B2C, #EB5F38, #EB3838, #454141, #464A61 is ideal for: corporate websites, product showcases, portfolios. 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: #de8b2c; --color-2: #eb5f38; --color-3: #eb3838; --color-4: #454141; --color-5: #464a61. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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