← Back to Editor

#801818 · #730028 · #C58500 · #F5CB71 · #3E3F40

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 AppData Visualization

Color Details Color Details

#801818

Vermilion · Maroon · Wine Red

HEX
#801818
RGB
rgb(128, 24, 24)
HSL
hsl(0, 68%, 30%)
HSB
hsb(0, 81%, 50%)
CMYK
cmyk(0%, 81%, 81%, 50%)
Oklch
oklch(39.3% 0.139 26.5)

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

#730028

Dark Violet · Maroon · Raspberry

HEX
#730028
RGB
rgb(115, 0, 40)
HSL
hsl(339, 100%, 23%)
HSB
hsb(339, 100%, 45%)
CMYK
cmyk(0%, 100%, 65%, 55%)
Oklch
oklch(35.4% 0.142 11.5)

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

#C58500

Ochre · DarkGoldenRod · Honey Gold

HEX
#C58500
RGB
rgb(197, 133, 0)
HSL
hsl(41, 100%, 39%)
HSB
hsb(41, 100%, 77%)
CMYK
cmyk(0%, 32%, 100%, 23%)
Oklch
oklch(66.5% 0.140 75.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F5CB71

Ginger · BurlyWood · Sunflower

HEX
#F5CB71
RGB
rgb(245, 203, 113)
HSL
hsl(41, 87%, 70%)
HSB
hsb(41, 54%, 96%)
CMYK
cmyk(0%, 17%, 54%, 4%)
Oklch
oklch(86.0% 0.119 84.8)

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

#3E3F40

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3E3F40
RGB
rgb(62, 63, 64)
HSL
hsl(210, 2%, 25%)
HSB
hsb(210, 3%, 25%)
CMYK
cmyk(3%, 2%, 0%, 75%)
Oklch
oklch(36.7% 0.002 247.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

801818
188181

Analogous

81184D
801818
814D18

Triadic

801818
188118
181881

Split-Comp.

801818
18814D
184D81

Tetradic

801818
4D8118
188181
4D1881

Contrast Matrix WCAG 2.1 Contrast

801818
730028
C58500
F5CB71
3E3F40
—
1.2
Fail
3.3
AA Large
6.6
AA
1.0
Fail
1.2
Fail
—
3.8
AA Large
7.8
AAA
1.1
Fail
3.3
AA Large
3.8
AA Large
—
2.0
Fail
3.4
AA Large
6.6
AA
7.8
AAA
2.0
Fail
—
6.9
AA
1.0
Fail
1.1
Fail
3.4
AA Large
6.9
AA
—
White BG
10.2AAA
11.9AAA
3.1AA Large
1.5Fail
10.6AAA
Black BG
2.1Fail
1.8Fail
6.7AA
13.7AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

535218
41401E
A9A920
E3E287
3E3E40

Deuteranopia

596118
48511C
ADB228
E5E88C
3E3E40

Tritanopia

7B1818
6D1715
C23A3F
F3989C
3E4040

Achromatopsia

373737
272727
898989
CDCDCD
3F3F3F

Shades & Tints Shades & Tints

#801818

Dark
Light

#730028

Dark
Light

#C58500

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #801818;
  --color-2: #730028;
  --color-3: #c58500;
  --color-4: #f5cb71;
  --color-5: #3e3f40;
}

SCSS

$color-1: #801818;
$color-2: #730028;
$color-3: #c58500;
$color-4: #f5cb71;
$color-5: #3e3f40;

TAILWIND

colors: {
  'brand-1': '#801818',
  'brand-2': '#730028',
  'brand-3': '#c58500',
  'brand-4': '#f5cb71',
  'brand-5': '#3e3f40',
}

RGB Array

[128, 24, 24], [115, 0, 40], [197, 133, 0], [245, 203, 113], [62, 63, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #801818, #730028, #C58500, #F5CB71, #3E3F40 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #801818; --color-2: #730028; --color-3: #c58500; --color-4: #f5cb71; --color-5: #3e3f40. 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 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