← Back to Editor

#3A053F · #773FFF · #FFAB0B · #01A759 · #D70453

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

#3A053F

Royal Purple · MidnightBlue · Dark Purple

HEX
#3A053F
RGB
rgb(58, 5, 63)
HSL
hsl(295, 85%, 13%)
HSB
hsb(295, 92%, 25%)
CMYK
cmyk(8%, 92%, 0%, 75%)
Oklch
oklch(25.4% 0.109 324.2)

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

#773FFF

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#773FFF
RGB
rgb(119, 63, 255)
HSL
hsl(258, 100%, 62%)
HSB
hsb(258, 75%, 100%)
CMYK
cmyk(53%, 75%, 0%, 0%)
Oklch
oklch(55.8% 0.261 288.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#FFAB0B

Ginger · Orange · Warm Sun

HEX
#FFAB0B
RGB
rgb(255, 171, 11)
HSL
hsl(39, 100%, 52%)
HSB
hsb(39, 96%, 100%)
CMYK
cmyk(0%, 33%, 96%, 0%)
Oklch
oklch(80.4% 0.169 73.5)

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

#01A759

Mineral Blue · SeaGreen · Forest Green

HEX
#01A759
RGB
rgb(1, 167, 89)
HSL
hsl(152, 99%, 33%)
HSB
hsb(152, 99%, 65%)
CMYK
cmyk(99%, 0%, 47%, 35%)
Oklch
oklch(63.9% 0.164 153.1)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#D70453

Dark Violet · Crimson · Camellia

HEX
#D70453
RGB
rgb(215, 4, 83)
HSL
hsl(338, 96%, 43%)
HSB
hsb(338, 98%, 84%)
CMYK
cmyk(0%, 98%, 61%, 16%)
Oklch
oklch(56.2% 0.223 11.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A053F
0A3D05

Analogous

1C053D
3A053F
3D0526

Triadic

3A053F
3D3905
053D39

Split-Comp.

3A053F
263D05
053D1C

Tetradic

3A053F
3D1C05
0A3D05
05263D

Contrast Matrix WCAG 2.1 Contrast

3A053F
773FFF
FFAB0B
01A759
D70453
—
3.1
AA Large
8.7
AAA
5.2
AA
3.2
AA Large
3.1
AA Large
—
2.8
Fail
1.7
Fail
1.0
Fail
8.7
AAA
2.8
Fail
—
1.7
Fail
2.7
Fail
5.2
AA
1.7
Fail
1.7
Fail
—
1.7
Fail
3.2
AA Large
1.0
Fail
2.7
Fail
1.7
Fail
—
White BG
16.5AAA
5.3AA
1.9Fail
3.1AA Large
5.2AA
Black BG
1.3Fail
3.9AA Large
11.1AAA
6.7AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

232331
5F5ED1
DBDA32
494A6C
7C7A40

Deuteranopia

262A2E
6266C5
E0E63B
3F3370
88983B

Tritanopia

372623
74ACA4
FB5057
097B7E
CC312D

Achromatopsia

1B1B1B
666666
B2B2B2
6C6C6C
4C4C4C

Shades & Tints Shades & Tints

#3A053F

Dark
Light

#773FFF

Dark
Light

#FFAB0B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a053f;
  --color-2: #773fff;
  --color-3: #ffab0b;
  --color-4: #01a759;
  --color-5: #d70453;
}

SCSS

$color-1: #3a053f;
$color-2: #773fff;
$color-3: #ffab0b;
$color-4: #01a759;
$color-5: #d70453;

TAILWIND

colors: {
  'brand-1': '#3a053f',
  'brand-2': '#773fff',
  'brand-3': '#ffab0b',
  'brand-4': '#01a759',
  'brand-5': '#d70453',
}

RGB Array

[58, 5, 63], [119, 63, 255], [255, 171, 11], [1, 167, 89], [215, 4, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A053F, #773FFF, #FFAB0B, #01A759, #D70453 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: #3a053f; --color-2: #773fff; --color-3: #ffab0b; --color-4: #01a759; --color-5: #d70453. 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