← Back to Editor

#E44818 · #973220 · #DF8612 · #F9BD38 · #3A6B67

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#E44818

Vermilion · OrangeRed · Passion Red

HEX
#E44818
RGB
rgb(228, 72, 24)
HSL
hsl(14, 81%, 49%)
HSB
hsb(14, 89%, 89%)
CMYK
cmyk(0%, 68%, 89%, 11%)
Oklch
oklch(61.9% 0.200 35.9)

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

#973220

Vermilion · Brown · Wine Red

HEX
#973220
RGB
rgb(151, 50, 32)
HSL
hsl(9, 65%, 36%)
HSB
hsb(9, 79%, 59%)
CMYK
cmyk(0%, 67%, 79%, 41%)
Oklch
oklch(46.3% 0.139 32.4)

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

#DF8612

Ochre · Chocolate · Amber Brown

HEX
#DF8612
RGB
rgb(223, 134, 18)
HSL
hsl(34, 85%, 47%)
HSB
hsb(34, 92%, 87%)
CMYK
cmyk(0%, 40%, 92%, 13%)
Oklch
oklch(69.9% 0.154 64.0)

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

#F9BD38

Ginger · GoldenRod · Sunflower

HEX
#F9BD38
RGB
rgb(249, 189, 56)
HSL
hsl(41, 94%, 60%)
HSB
hsb(41, 78%, 98%)
CMYK
cmyk(0%, 24%, 78%, 2%)
Oklch
oklch(83.2% 0.155 82.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#3A6B67

Mineral Blue · SeaGreen · Mint Ice

HEX
#3A6B67
RGB
rgb(58, 107, 103)
HSL
hsl(175, 30%, 32%)
HSB
hsb(175, 46%, 42%)
CMYK
cmyk(46%, 0%, 4%, 58%)
Oklch
oklch(49.2% 0.054 188.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E44818
18B3E2

Analogous

E2184E
E44818
E2AC18

Triadic

E44818
18E247
4718E2

Split-Comp.

E44818
18E2AC
184EE2

Tetradic

E44818
4EE218
18B3E2
AC18E2

Contrast Matrix WCAG 2.1 Contrast

E44818
973220
DF8612
F9BD38
3A6B67
—
1.9
Fail
1.4
Fail
2.4
Fail
1.5
Fail
1.9
Fail
—
2.7
Fail
4.4
AA Large
1.2
Fail
1.4
Fail
2.7
Fail
—
1.6
Fail
2.2
Fail
2.4
Fail
4.4
AA Large
1.6
Fail
—
3.6
AA Large
1.5
Fail
1.2
Fail
2.2
Fail
3.6
AA Large
—
White BG
4.0AA Large
7.5AAA
2.8Fail
1.7Fail
6.0AA
Black BG
5.2AA
2.8Fail
7.6AAA
12.4AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F24
6B6A24
B8B82E
DFDE58
4F5068

Deuteranopia

AAB526
717925
BEC435
E3E760
4C4968

Tritanopia

DC2D2F
922829
DB4449
F67277
3C6969

Achromatopsia

717171
4E4E4E
939393
C0C0C0
5C5C5C

Shades & Tints Shades & Tints

#E44818

Dark
Light

#973220

Dark
Light

#DF8612

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e44818;
  --color-2: #973220;
  --color-3: #df8612;
  --color-4: #f9bd38;
  --color-5: #3a6b67;
}

SCSS

$color-1: #e44818;
$color-2: #973220;
$color-3: #df8612;
$color-4: #f9bd38;
$color-5: #3a6b67;

TAILWIND

colors: {
  'brand-1': '#e44818',
  'brand-2': '#973220',
  'brand-3': '#df8612',
  'brand-4': '#f9bd38',
  'brand-5': '#3a6b67',
}

RGB Array

[228, 72, 24], [151, 50, 32], [223, 134, 18], [249, 189, 56], [58, 107, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E44818, #973220, #DF8612, #F9BD38, #3A6B67 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e44818; --color-2: #973220; --color-3: #df8612; --color-4: #f9bd38; --color-5: #3a6b67. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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