← Back to Editor

#45272F · #340B1B · #7B1217 · #EE2E17 · #FB8E19

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

#45272F

Dark Violet · DarkSlateGray · Raspberry

HEX
#45272F
RGB
rgb(69, 39, 47)
HSL
hsl(344, 28%, 21%)
HSB
hsb(344, 43%, 27%)
CMYK
cmyk(0%, 43%, 32%, 73%)
Oklch
oklch(31.4% 0.046 2.9)

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

#340B1B

Dark Violet · Black · Raspberry

HEX
#340B1B
RGB
rgb(52, 11, 27)
HSL
hsl(337, 65%, 12%)
HSB
hsb(337, 79%, 20%)
CMYK
cmyk(0%, 79%, 48%, 80%)
Oklch
oklch(22.8% 0.068 0.1)

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

#7B1217

Vermilion · Maroon · Wine Red

HEX
#7B1217
RGB
rgb(123, 18, 23)
HSL
hsl(357, 74%, 28%)
HSB
hsb(357, 85%, 48%)
CMYK
cmyk(0%, 85%, 81%, 52%)
Oklch
oklch(37.8% 0.138 25.1)

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

#EE2E17

Vermilion · OrangeRed · Passion Red

HEX
#EE2E17
RGB
rgb(238, 46, 23)
HSL
hsl(6, 86%, 51%)
HSB
hsb(6, 90%, 93%)
CMYK
cmyk(0%, 81%, 90%, 7%)
Oklch
oklch(61.4% 0.228 30.7)

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

#FB8E19

Ginger · Orange · Warm Sun

HEX
#FB8E19
RGB
rgb(251, 142, 25)
HSL
hsl(31, 97%, 54%)
HSB
hsb(31, 90%, 98%)
CMYK
cmyk(0%, 43%, 90%, 2%)
Oklch
oklch(74.9% 0.172 58.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45272F
27453D

Analogous

45273E
45272F
452E27

Triadic

45272F
2F4527
272F45

Split-Comp.

45272F
27452E
273E45

Tetradic

45272F
3E4527
27453D
2E2745

Contrast Matrix WCAG 2.1 Contrast

45272F
340B1B
7B1217
EE2E17
FB8E19
—
1.3
Fail
1.2
Fail
3.2
AA Large
5.7
AA
1.3
Fail
—
1.6
Fail
4.2
AA Large
7.4
AAA
1.2
Fail
1.6
Fail
—
2.6
Fail
4.6
AA
3.2
AA Large
4.2
AA Large
2.6
Fail
—
1.8
Fail
5.7
AA
7.4
AAA
4.6
AA
1.8
Fail
—
White BG
13.3AAA
17.4AAA
10.8AAA
4.2AA Large
2.3Fail
Black BG
1.6Fail
1.2Fail
1.9Fail
5.0AA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

38382D
222217
4E4D16
9B991D
CCCB35

Deuteranopia

3A3C2D
252816
545C15
A6B41E
D2DA3C

Tritanopia

442C2B
321413
761515
E42122
F64C51

Achromatopsia

313131
191919
323232
656565
A1A1A1

Shades & Tints Shades & Tints

#45272F

Dark
Light

#340B1B

Dark
Light

#7B1217

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45272f;
  --color-2: #340b1b;
  --color-3: #7b1217;
  --color-4: #ee2e17;
  --color-5: #fb8e19;
}

SCSS

$color-1: #45272f;
$color-2: #340b1b;
$color-3: #7b1217;
$color-4: #ee2e17;
$color-5: #fb8e19;

TAILWIND

colors: {
  'brand-1': '#45272f',
  'brand-2': '#340b1b',
  'brand-3': '#7b1217',
  'brand-4': '#ee2e17',
  'brand-5': '#fb8e19',
}

RGB Array

[69, 39, 47], [52, 11, 27], [123, 18, 23], [238, 46, 23], [251, 142, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #45272F, #340B1B, #7B1217, #EE2E17, #FB8E19 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: #45272f; --color-2: #340b1b; --color-3: #7b1217; --color-4: #ee2e17; --color-5: #fb8e19. 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