← Back to Editor

#542437 · #C02942 · #DE6037 · #E8A964 · #ECD078

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#542437

Dark Violet · DarkSlateGray · Raspberry

HEX
#542437
RGB
rgb(84, 36, 55)
HSL
hsl(336, 40%, 24%)
HSB
hsb(336, 57%, 33%)
CMYK
cmyk(0%, 57%, 35%, 67%)
Oklch
oklch(33.4% 0.075 357.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#C02942

Vermilion · Crimson · Passion Red

HEX
#C02942
RGB
rgb(192, 41, 66)
HSL
hsl(350, 65%, 46%)
HSB
hsb(350, 79%, 75%)
CMYK
cmyk(0%, 79%, 66%, 25%)
Oklch
oklch(53.2% 0.185 17.8)

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

#DE6037

Tangerine · Chocolate · Warm Sun

HEX
#DE6037
RGB
rgb(222, 96, 55)
HSL
hsl(15, 72%, 54%)
HSB
hsb(15, 75%, 87%)
CMYK
cmyk(0%, 57%, 75%, 13%)
Oklch
oklch(64.1% 0.167 38.1)

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

#E8A964

Ginger · SandyBrown · Warm Sun

HEX
#E8A964
RGB
rgb(232, 169, 100)
HSL
hsl(31, 74%, 65%)
HSB
hsb(31, 57%, 91%)
CMYK
cmyk(0%, 27%, 57%, 9%)
Oklch
oklch(78.0% 0.114 67.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#ECD078

Ginger · Khaki · Sunflower

HEX
#ECD078
RGB
rgb(236, 208, 120)
HSL
hsl(46, 75%, 70%)
HSB
hsb(46, 49%, 93%)
CMYK
cmyk(0%, 12%, 49%, 7%)
Oklch
oklch(86.3% 0.112 92.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

542437
255642

Analogous

562551
542437
562A25

Triadic

542437
385625
253856

Split-Comp.

542437
25562A
255156

Tetradic

542437
515625
255642
2A2556

Contrast Matrix WCAG 2.1 Contrast

542437
C02942
DE6037
E8A964
ECD078
—
2.2
Fail
3.5
AA Large
6.1
AA
8.2
AAA
2.2
Fail
—
1.6
Fail
2.8
Fail
3.8
AA Large
3.5
AA Large
1.6
Fail
—
1.8
Fail
2.4
Fail
6.1
AA
2.8
Fail
1.8
Fail
—
1.3
Fail
8.2
AAA
3.8
AA Large
2.4
Fail
1.3
Fail
—
White BG
12.5AAA
5.8AA
3.6AA Large
2.0Fail
1.5Fail
Black BG
1.7Fail
3.6AA Large
5.8AA
10.3AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F32
7F7D3C
A7A641
CDCC75
E0E08D

Deuteranopia

424631
87933A
AFB843
D0D579
E2E492

Tritanopia

522F2E
B83736
D8494A
E58285
EB9EA2

Achromatopsia

353535
595959
818181
B4B4B4
CECECE

Shades & Tints Shades & Tints

#542437

Dark
Light

#C02942

Dark
Light

#DE6037

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #542437;
  --color-2: #c02942;
  --color-3: #de6037;
  --color-4: #e8a964;
  --color-5: #ecd078;
}

SCSS

$color-1: #542437;
$color-2: #c02942;
$color-3: #de6037;
$color-4: #e8a964;
$color-5: #ecd078;

TAILWIND

colors: {
  'brand-1': '#542437',
  'brand-2': '#c02942',
  'brand-3': '#de6037',
  'brand-4': '#e8a964',
  'brand-5': '#ecd078',
}

RGB Array

[84, 36, 55], [192, 41, 66], [222, 96, 55], [232, 169, 100], [236, 208, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #542437, #C02942, #DE6037, #E8A964, #ECD078 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #542437; --color-2: #c02942; --color-3: #de6037; --color-4: #e8a964; --color-5: #ecd078. 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. 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 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