← Back to Editor

#100621 · #3A0E43 · #BD226E · #F0A643 · #3F9491

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

#100621

Deep Indigo · Black · Dark Purple

HEX
#100621
RGB
rgb(16, 6, 33)
HSL
hsl(262, 69%, 8%)
HSB
hsb(262, 82%, 13%)
CMYK
cmyk(52%, 82%, 0%, 87%)
Oklch
oklch(15.8% 0.056 297.3)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#3A0E43

Royal Purple · MidnightBlue · Dark Purple

HEX
#3A0E43
RGB
rgb(58, 14, 67)
HSL
hsl(290, 65%, 16%)
HSB
hsb(290, 79%, 26%)
CMYK
cmyk(13%, 79%, 0%, 74%)
Oklch
oklch(26.6% 0.102 320.3)

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

#BD226E

Dark Violet · MediumVioletRed · Camellia

HEX
#BD226E
RGB
rgb(189, 34, 110)
HSL
hsl(331, 70%, 44%)
HSB
hsb(331, 82%, 74%)
CMYK
cmyk(0%, 82%, 42%, 26%)
Oklch
oklch(53.4% 0.197 357.2)

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

#F0A643

Ginger · SandyBrown · Warm Sun

HEX
#F0A643
RGB
rgb(240, 166, 67)
HSL
hsl(34, 85%, 60%)
HSB
hsb(34, 72%, 94%)
CMYK
cmyk(0%, 31%, 72%, 6%)
Oklch
oklch(78.0% 0.142 70.5)

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

#3F9491

Mineral Blue · CadetBlue · Mint Ice

HEX
#3F9491
RGB
rgb(63, 148, 145)
HSL
hsl(178, 40%, 41%)
HSB
hsb(178, 57%, 58%)
CMYK
cmyk(57%, 0%, 2%, 42%)
Oklch
oklch(61.4% 0.082 192.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

100621
182206

Analogous

060A22
100621
1F0622

Triadic

100621
221106
062211

Split-Comp.

100621
221F06
0A2206

Tetradic

100621
22060A
182206
06221F

Contrast Matrix WCAG 2.1 Contrast

100621
3A0E43
BD226E
F0A643
3F9491
—
1.2
Fail
3.4
AA Large
9.6
AAA
5.5
AA
1.2
Fail
—
2.7
Fail
7.7
AAA
4.4
AA Large
3.4
AA Large
2.7
Fail
—
2.8
Fail
1.6
Fail
9.6
AAA
7.7
AAA
2.8
Fail
—
1.7
Fail
5.5
AA
4.4
AA Large
1.6
Fail
1.7
Fail
—
White BG
19.6AAA
15.9AAA
5.8AA
2.1Fail
3.6AA Large
Black BG
1.1Fail
1.3Fail
3.6AA Large
10.2AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C1A
272736
7A785C
D0CF5B
646592

Deuteranopia

0C0D19
2A2D33
838E57
D4DA61
5F5992

Tritanopia

101514
382C2A
B54D4A
EC6E72
439292

Achromatopsia

0C0C0C
212121
595959
B1B1B1
7A7A7A

Shades & Tints Shades & Tints

#100621

Dark
Light

#3A0E43

Dark
Light

#BD226E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #100621;
  --color-2: #3a0e43;
  --color-3: #bd226e;
  --color-4: #f0a643;
  --color-5: #3f9491;
}

SCSS

$color-1: #100621;
$color-2: #3a0e43;
$color-3: #bd226e;
$color-4: #f0a643;
$color-5: #3f9491;

TAILWIND

colors: {
  'brand-1': '#100621',
  'brand-2': '#3a0e43',
  'brand-3': '#bd226e',
  'brand-4': '#f0a643',
  'brand-5': '#3f9491',
}

RGB Array

[16, 6, 33], [58, 14, 67], [189, 34, 110], [240, 166, 67], [63, 148, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #100621, #3A0E43, #BD226E, #F0A643, #3F9491 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: #100621; --color-2: #3a0e43; --color-3: #bd226e; --color-4: #f0a643; --color-5: #3f9491. 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