← Back to Editor

#041020 · #152A38 · #753171 · #C62D6E · #EC0069

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

#041020

Indigo · Black · Deep Sea Blue

HEX
#041020
RGB
rgb(4, 16, 32)
HSL
hsl(214, 78%, 7%)
HSB
hsb(214, 88%, 13%)
CMYK
cmyk(88%, 50%, 0%, 87%)
Oklch
oklch(17.1% 0.039 254.0)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#152A38

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#152A38
RGB
rgb(21, 42, 56)
HSL
hsl(204, 45%, 15%)
HSB
hsb(204, 63%, 22%)
CMYK
cmyk(62%, 25%, 0%, 78%)
Oklch
oklch(27.4% 0.038 239.3)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#753171

Rose Purple · Purple · Eggplant

HEX
#753171
RGB
rgb(117, 49, 113)
HSL
hsl(304, 41%, 33%)
HSB
hsb(304, 58%, 46%)
CMYK
cmyk(0%, 58%, 3%, 54%)
Oklch
oklch(43.2% 0.127 329.8)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#C62D6E

Dark Violet · MediumVioletRed · Camellia

HEX
#C62D6E
RGB
rgb(198, 45, 110)
HSL
hsl(335, 63%, 48%)
HSB
hsb(335, 77%, 78%)
CMYK
cmyk(0%, 77%, 44%, 22%)
Oklch
oklch(55.7% 0.194 0.4)

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

#EC0069

Dark Violet · DeepPink · Camellia

HEX
#EC0069
RGB
rgb(236, 0, 105)
HSL
hsl(333, 100%, 46%)
HSB
hsb(333, 100%, 93%)
CMYK
cmyk(0%, 100%, 56%, 7%)
Oklch
oklch(60.5% 0.243 6.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

041020
201404

Analogous

041E20
041020
060420

Triadic

041020
200410
102004

Split-Comp.

041020
200604
1E2004

Tetradic

041020
20041E
201404
042006

Contrast Matrix WCAG 2.1 Contrast

041020
152A38
753171
C62D6E
EC0069
—
1.3
Fail
2.2
Fail
3.6
AA Large
4.3
AA Large
1.3
Fail
—
1.7
Fail
2.8
Fail
3.4
AA Large
2.2
Fail
1.7
Fail
—
1.6
Fail
2.0
Fail
3.6
AA Large
2.8
Fail
1.6
Fail
—
1.2
Fail
4.3
AA Large
3.4
AA Large
2.0
Fail
1.2
Fail
—
White BG
19.1AAA
14.8AAA
8.6AAA
5.2AA
4.4AA Large
Black BG
1.1Fail
1.4Fail
2.4Fail
4.0AA Large
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

09091C
1E1E35
585762
84825E
868450

Deuteranopia

09081B
1D1B34
5C615E
8D985B
94A54A

Tritanopia

051918
163231
725553
BE524F
E03C37

Achromatopsia

0E0E0E
252525
4D4D4D
626262
535353

Shades & Tints Shades & Tints

#041020

Dark
Light

#152A38

Dark
Light

#753171

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #041020;
  --color-2: #152a38;
  --color-3: #753171;
  --color-4: #c62d6e;
  --color-5: #ec0069;
}

SCSS

$color-1: #041020;
$color-2: #152a38;
$color-3: #753171;
$color-4: #c62d6e;
$color-5: #ec0069;

TAILWIND

colors: {
  'brand-1': '#041020',
  'brand-2': '#152a38',
  'brand-3': '#753171',
  'brand-4': '#c62d6e',
  'brand-5': '#ec0069',
}

RGB Array

[4, 16, 32], [21, 42, 56], [117, 49, 113], [198, 45, 110], [236, 0, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #041020, #152A38, #753171, #C62D6E, #EC0069 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: #041020; --color-2: #152a38; --color-3: #753171; --color-4: #c62d6e; --color-5: #ec0069. 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