← Back to Editor

#820D2E · #9E183E · #D04C35 · #EDC839 · #8EA314

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 App

Color Details Color Details

#820D2E

Dark Violet · Brown · Camellia

HEX
#820D2E
RGB
rgb(130, 13, 46)
HSL
hsl(343, 82%, 28%)
HSB
hsb(343, 90%, 51%)
CMYK
cmyk(0%, 90%, 65%, 49%)
Oklch
oklch(39.3% 0.148 13.2)

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

#9E183E

Dark Violet · Brown · Camellia

HEX
#9E183E
RGB
rgb(158, 24, 62)
HSL
hsl(343, 74%, 36%)
HSB
hsb(343, 85%, 62%)
CMYK
cmyk(0%, 85%, 61%, 38%)
Oklch
oklch(45.7% 0.167 11.9)

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

#D04C35

Vermilion · Chocolate · Passion Red

HEX
#D04C35
RGB
rgb(208, 76, 53)
HSL
hsl(9, 62%, 51%)
HSB
hsb(9, 75%, 82%)
CMYK
cmyk(0%, 63%, 75%, 18%)
Oklch
oklch(59.3% 0.171 32.2)

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

#EDC839

Ginger · GoldenRod · Sunflower

HEX
#EDC839
RGB
rgb(237, 200, 57)
HSL
hsl(48, 83%, 58%)
HSB
hsb(48, 76%, 93%)
CMYK
cmyk(0%, 16%, 76%, 7%)
Oklch
oklch(84.1% 0.156 93.7)

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

#8EA314

Autumn Sage · Olive · Honey Gold

HEX
#8EA314
RGB
rgb(142, 163, 20)
HSL
hsl(69, 78%, 36%)
HSB
hsb(69, 88%, 64%)
CMYK
cmyk(13%, 0%, 88%, 36%)
Oklch
oklch(67.6% 0.153 118.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

820D2E
0D8261

Analogous

820D69
820D2E
82260D

Triadic

820D2E
2E820D
0D2E82

Split-Comp.

820D2E
0D8226
0D6982

Tetradic

820D2E
69820D
0D8261
260D82

Contrast Matrix WCAG 2.1 Contrast

820D2E
9E183E
D04C35
EDC839
8EA314
—
1.3
Fail
2.3
Fail
6.3
AA
3.6
AA Large
1.3
Fail
—
1.8
Fail
4.9
AA
2.8
Fail
2.3
Fail
1.8
Fail
—
2.7
Fail
1.6
Fail
6.3
AA
4.9
AA
2.7
Fail
—
1.7
Fail
3.6
AA Large
2.8
Fail
1.6
Fail
1.7
Fail
—
White BG
10.3AAA
7.9AAA
4.4AA Large
1.6Fail
2.8Fail
Black BG
2.0Fail
2.7Fail
4.8AA
12.9AAA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4E26
646335
97963B
DDDD5C
979737

Deuteranopia

565F24
6C7633
9FA83C
DFE264
96943F

Tritanopia

7C201E
972E2C
C93F40
EB777D
8F5258

Achromatopsia

343434
444444
717171
C3C3C3
8C8C8C

Shades & Tints Shades & Tints

#820D2E

Dark
Light

#9E183E

Dark
Light

#D04C35

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #820d2e;
  --color-2: #9e183e;
  --color-3: #d04c35;
  --color-4: #edc839;
  --color-5: #8ea314;
}

SCSS

$color-1: #820d2e;
$color-2: #9e183e;
$color-3: #d04c35;
$color-4: #edc839;
$color-5: #8ea314;

TAILWIND

colors: {
  'brand-1': '#820d2e',
  'brand-2': '#9e183e',
  'brand-3': '#d04c35',
  'brand-4': '#edc839',
  'brand-5': '#8ea314',
}

RGB Array

[130, 13, 46], [158, 24, 62], [208, 76, 53], [237, 200, 57], [142, 163, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #820D2E, #9E183E, #D04C35, #EDC839, #8EA314 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: #820d2e; --color-2: #9e183e; --color-3: #d04c35; --color-4: #edc839; --color-5: #8ea314. 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