← Back to Editor

#33040C · #5A0D1F · #AE4235 · #DF761B · #304351

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

#33040C

Vermilion · Black · Deep Berry

HEX
#33040C
RGB
rgb(51, 4, 12)
HSL
hsl(350, 85%, 11%)
HSB
hsb(350, 92%, 20%)
CMYK
cmyk(0%, 92%, 76%, 80%)
Oklch
oklch(21.1% 0.075 16.3)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#5A0D1F

Vermilion · Maroon · Deep Berry

HEX
#5A0D1F
RGB
rgb(90, 13, 31)
HSL
hsl(346, 75%, 20%)
HSB
hsb(346, 86%, 35%)
CMYK
cmyk(0%, 86%, 66%, 65%)
Oklch
oklch(30.9% 0.108 13.8)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#AE4235

Crimson · Sienna · Passion Red

HEX
#AE4235
RGB
rgb(174, 66, 53)
HSL
hsl(6, 53%, 45%)
HSB
hsb(6, 70%, 68%)
CMYK
cmyk(0%, 62%, 70%, 32%)
Oklch
oklch(52.5% 0.144 29.6)

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

#DF761B

Tangerine · Chocolate · Amber Brown

HEX
#DF761B
RGB
rgb(223, 118, 27)
HSL
hsl(28, 78%, 49%)
HSB
hsb(28, 88%, 87%)
CMYK
cmyk(0%, 47%, 88%, 13%)
Oklch
oklch(67.3% 0.160 54.2)

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

#304351

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#304351
RGB
rgb(48, 67, 81)
HSL
hsl(205, 26%, 25%)
HSB
hsb(205, 41%, 32%)
CMYK
cmyk(41%, 17%, 0%, 68%)
Oklch
oklch(37.3% 0.034 240.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33040C
04342C

Analogous

340424
33040C
341404

Triadic

33040C
0C3404
040C34

Split-Comp.

33040C
043414
042434

Tetradic

33040C
243404
04342C
140434

Contrast Matrix WCAG 2.1 Contrast

33040C
5A0D1F
AE4235
DF761B
304351
—
1.3
Fail
3.1
AA Large
5.8
AA
1.8
Fail
1.3
Fail
—
2.4
Fail
4.5
AA Large
1.4
Fail
3.1
AA Large
2.4
Fail
—
1.9
Fail
1.8
Fail
5.8
AA
4.5
AA Large
1.9
Fail
—
3.3
AA Large
1.8
Fail
1.4
Fail
1.8
Fail
3.3
AA Large
—
White BG
18.0AAA
13.9AAA
5.8AA
3.1AA Large
10.3AAA
Black BG
1.2Fail
1.5Fail
3.6AA Large
6.7AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1E0A
39381B
7F7E38
B2B131
38384E

Deuteranopia

21250A
3D431A
868E39
B8C036
37364D

Tritanopia

310908
561716
A93B3B
DA4246
314B4A

Achromatopsia

131313
262626
616161
8B8B8B
3F3F3F

Shades & Tints Shades & Tints

#33040C

Dark
Light

#5A0D1F

Dark
Light

#AE4235

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33040c;
  --color-2: #5a0d1f;
  --color-3: #ae4235;
  --color-4: #df761b;
  --color-5: #304351;
}

SCSS

$color-1: #33040c;
$color-2: #5a0d1f;
$color-3: #ae4235;
$color-4: #df761b;
$color-5: #304351;

TAILWIND

colors: {
  'brand-1': '#33040c',
  'brand-2': '#5a0d1f',
  'brand-3': '#ae4235',
  'brand-4': '#df761b',
  'brand-5': '#304351',
}

RGB Array

[51, 4, 12], [90, 13, 31], [174, 66, 53], [223, 118, 27], [48, 67, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33040C, #5A0D1F, #AE4235, #DF761B, #304351 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #33040c; --color-2: #5a0d1f; --color-3: #ae4235; --color-4: #df761b; --color-5: #304351. 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. 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