← Back to Editor

#18081C · #850841 · #F20765 · #F27273 · #E3C281

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

#18081C

Royal Purple · Black · Dark Purple

HEX
#18081C
RGB
rgb(24, 8, 28)
HSL
hsl(288, 56%, 7%)
HSB
hsb(288, 71%, 11%)
CMYK
cmyk(14%, 71%, 0%, 89%)
Oklch
oklch(17.1% 0.046 319.4)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#850841

Dark Violet · Brown · Camellia

HEX
#850841
RGB
rgb(133, 8, 65)
HSL
hsl(333, 89%, 28%)
HSB
hsb(333, 94%, 52%)
CMYK
cmyk(0%, 94%, 51%, 48%)
Oklch
oklch(40.2% 0.157 2.3)

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

#F20765

Dark Violet · Crimson · Camellia

HEX
#F20765
RGB
rgb(242, 7, 101)
HSL
hsl(336, 94%, 49%)
HSB
hsb(336, 97%, 95%)
CMYK
cmyk(0%, 97%, 58%, 5%)
Oklch
oklch(61.6% 0.245 9.2)

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

#F27273

Peach Pink · Salmon · Coral Red

HEX
#F27273
RGB
rgb(242, 114, 115)
HSL
hsl(360, 83%, 70%)
HSB
hsb(360, 53%, 95%)
CMYK
cmyk(0%, 53%, 52%, 5%)
Oklch
oklch(70.4% 0.158 21.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Soft Aurora

#E3C281

Ginger · BurlyWood · Sunflower

HEX
#E3C281
RGB
rgb(227, 194, 129)
HSL
hsl(40, 64%, 70%)
HSB
hsb(40, 43%, 89%)
CMYK
cmyk(0%, 15%, 43%, 11%)
Oklch
oklch(82.8% 0.091 83.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18081C
0C1C08

Analogous

0E081C
18081C
1C0816

Triadic

18081C
1C1808
081C18

Split-Comp.

18081C
161C08
081C0E

Tetradic

18081C
1C0E08
0C1C08
08161C

Contrast Matrix WCAG 2.1 Contrast

18081C
850841
F20765
F27273
E3C281
—
1.9
Fail
4.6
AA
6.8
AA
11.3
AAA
1.9
Fail
—
2.4
Fail
3.5
AA Large
5.8
AA
4.6
AA
2.4
Fail
—
1.5
Fail
2.5
Fail
6.8
AA
3.5
AA Large
1.5
Fail
—
1.7
Fail
11.3
AAA
5.8
AA
2.5
Fail
1.7
Fail
—
White BG
19.3AAA
10.0AAA
4.2AA Large
2.8Fail
1.7Fail
Black BG
1.1Fail
2.1Fail
5.0AA
7.4AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

111117
4F4E33
8C8A4E
BBB973
D5D491

Deuteranopia

121316
566030
9AAB49
C2CC73
D7D995

Tritanopia

171313
7F2826
E63C38
EC7373
E19DA0

Achromatopsia

0F0F0F
343434
585858
989898
C4C4C4

Shades & Tints Shades & Tints

#18081C

Dark
Light

#850841

Dark
Light

#F20765

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18081c;
  --color-2: #850841;
  --color-3: #f20765;
  --color-4: #f27273;
  --color-5: #e3c281;
}

SCSS

$color-1: #18081c;
$color-2: #850841;
$color-3: #f20765;
$color-4: #f27273;
$color-5: #e3c281;

TAILWIND

colors: {
  'brand-1': '#18081c',
  'brand-2': '#850841',
  'brand-3': '#f20765',
  'brand-4': '#f27273',
  'brand-5': '#e3c281',
}

RGB Array

[24, 8, 28], [133, 8, 65], [242, 7, 101], [242, 114, 115], [227, 194, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #18081C, #850841, #F20765, #F27273, #E3C281 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: #18081c; --color-2: #850841; --color-3: #f20765; --color-4: #f27273; --color-5: #e3c281. 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