← Back to Editor

#680BE2 · #5A13AE · #4D1A7A · #3F2245 · #312911

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

#680BE2

Deep Indigo · DarkViolet · Violet

HEX
#680BE2
RGB
rgb(104, 11, 226)
HSL
hsl(266, 91%, 46%)
HSB
hsb(266, 95%, 89%)
CMYK
cmyk(54%, 95%, 0%, 11%)
Oklch
oklch(47.8% 0.265 290.5)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#5A13AE

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#5A13AE
RGB
rgb(90, 19, 174)
HSL
hsl(267, 80%, 38%)
HSB
hsb(267, 89%, 68%)
CMYK
cmyk(48%, 89%, 0%, 32%)
Oklch
oklch(41.2% 0.212 295.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#4D1A7A

Royal Purple · DarkSlateBlue · Eggplant

HEX
#4D1A7A
RGB
rgb(77, 26, 122)
HSL
hsl(272, 65%, 29%)
HSB
hsb(272, 79%, 48%)
CMYK
cmyk(37%, 79%, 0%, 52%)
Oklch
oklch(35.3% 0.152 303.4)

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

#3F2245

Dark Plum · DarkSlateGray · Dark Purple

HEX
#3F2245
RGB
rgb(63, 34, 69)
HSL
hsl(290, 34%, 20%)
HSB
hsb(290, 51%, 27%)
CMYK
cmyk(9%, 51%, 0%, 73%)
Oklch
oklch(30.6% 0.071 320.6)

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

#312911

Ochre · Black · Amber Gold

HEX
#312911
RGB
rgb(49, 41, 17)
HSL
hsl(45, 48%, 13%)
HSB
hsb(45, 65%, 19%)
CMYK
cmyk(0%, 16%, 65%, 81%)
Oklch
oklch(28.4% 0.040 91.3)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

680BE2
84E00B

Analogous

0B19E0
680BE2
D20BE0

Triadic

680BE2
E0670B
0BE067

Split-Comp.

680BE2
E0D20B
19E00B

Tetradic

680BE2
E00B19
84E00B
0BE0D2

Contrast Matrix WCAG 2.1 Contrast

680BE2
5A13AE
4D1A7A
3F2245
312911
—
1.3
Fail
1.6
Fail
1.8
Fail
1.9
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.8
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
1.9
Fail
1.5
Fail
1.2
Fail
1.0
Fail
—
White BG
7.7AAA
9.8AAA
12.0AAA
13.8AAA
14.4AAA
Black BG
2.7Fail
2.1Fail
1.7Fail
1.5Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

403FAE
3B3B88
373663
32323D
2E2D17

Deuteranopia

454CA2
3F4580
3A3E5D
34363B
2E2F18

Tritanopia

63857C
566B64
4A504C
3E3634
311B1C

Achromatopsia

3F3F3F
3A3A3A
343434
2F2F2F
292929

Shades & Tints Shades & Tints

#680BE2

Dark
Light

#5A13AE

Dark
Light

#4D1A7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #680be2;
  --color-2: #5a13ae;
  --color-3: #4d1a7a;
  --color-4: #3f2245;
  --color-5: #312911;
}

SCSS

$color-1: #680be2;
$color-2: #5a13ae;
$color-3: #4d1a7a;
$color-4: #3f2245;
$color-5: #312911;

TAILWIND

colors: {
  'brand-1': '#680be2',
  'brand-2': '#5a13ae',
  'brand-3': '#4d1a7a',
  'brand-4': '#3f2245',
  'brand-5': '#312911',
}

RGB Array

[104, 11, 226], [90, 19, 174], [77, 26, 122], [63, 34, 69], [49, 41, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #680BE2, #5A13AE, #4D1A7A, #3F2245, #312911 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: #680be2; --color-2: #5a13ae; --color-3: #4d1a7a; --color-4: #3f2245; --color-5: #312911. 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