← Back to Editor

#57EB1B · #34D97D · #AF1AEA · #000CF1 · #DDEAE4

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#57EB1B

Emerald · Chartreuse · Olive Green

HEX
#57EB1B
RGB
rgb(87, 235, 27)
HSL
hsl(103, 84%, 51%)
HSB
hsb(103, 89%, 92%)
CMYK
cmyk(63%, 0%, 89%, 8%)
Oklch
oklch(82.7% 0.257 139.5)

Traditional「Emerald」· Paint「Olive Green」· Creative Blush Sunrise

#34D97D

Emerald · MediumSeaGreen · Olive Green

HEX
#34D97D
RGB
rgb(52, 217, 125)
HSL
hsl(147, 68%, 53%)
HSB
hsb(147, 76%, 85%)
CMYK
cmyk(76%, 0%, 42%, 15%)
Oklch
oklch(78.2% 0.185 153.2)

Traditional「Emerald」· Paint「Olive Green」· Creative Blush Sunrise

#AF1AEA

Royal Purple · DarkViolet · Violet

HEX
#AF1AEA
RGB
rgb(175, 26, 234)
HSL
hsl(283, 83%, 51%)
HSB
hsb(283, 89%, 92%)
CMYK
cmyk(25%, 89%, 0%, 8%)
Oklch
oklch(57.8% 0.276 312.5)

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

#000CF1

Indigo · Blue · Navy Blue

HEX
#000CF1
RGB
rgb(0, 12, 241)
HSL
hsl(237, 100%, 47%)
HSB
hsb(237, 100%, 95%)
CMYK
cmyk(100%, 95%, 0%, 5%)
Oklch
oklch(43.7% 0.297 264.1)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#DDEAE4

Jade · Lavender · Mint Green

HEX
#DDEAE4
RGB
rgb(221, 234, 228)
HSL
hsl(152, 24%, 89%)
HSB
hsb(152, 6%, 92%)
CMYK
cmyk(6%, 0%, 3%, 8%)
Oklch
oklch(92.6% 0.016 166.7)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57EB1B
B019EB

Analogous

BEEB19
57EB1B
19EB47

Triadic

57EB1B
1955EB
EB1955

Split-Comp.

57EB1B
4719EB
EB19BE

Tetradic

57EB1B
19BEEB
B019EB
EB4719

Contrast Matrix WCAG 2.1 Contrast

57EB1B
34D97D
AF1AEA
000CF1
DDEAE4
—
1.2
Fail
3.2
AA Large
5.7
AA
1.3
Fail
1.2
Fail
—
2.7
Fail
4.9
AA
1.5
Fail
3.2
AA Large
2.7
Fail
—
1.8
Fail
4.1
AA Large
5.7
AA
4.9
AA
1.8
Fail
—
7.3
AAA
1.3
Fail
1.5
Fail
4.1
AA Large
7.3
AAA
—
White BG
1.6Fail
1.8Fail
5.0AA
9.0AAA
1.2Fail
Black BG
13.3AAA
11.4AAA
4.2AA Large
2.3Fail
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

97984D
7B7D93
6E6DB8
0505BA
E3E3E5

Deuteranopia

8F8359
726699
7782AC
0504AC
E2E1E6

Tritanopia

5E757E
3CA5A9
A89087
018E84
DEE7E7

Achromatopsia

A7A7A7
9D9D9D
5E5E5E
232323
E5E5E5

Shades & Tints Shades & Tints

#57EB1B

Dark
Light

#34D97D

Dark
Light

#AF1AEA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57eb1b;
  --color-2: #34d97d;
  --color-3: #af1aea;
  --color-4: #000cf1;
  --color-5: #ddeae4;
}

SCSS

$color-1: #57eb1b;
$color-2: #34d97d;
$color-3: #af1aea;
$color-4: #000cf1;
$color-5: #ddeae4;

TAILWIND

colors: {
  'brand-1': '#57eb1b',
  'brand-2': '#34d97d',
  'brand-3': '#af1aea',
  'brand-4': '#000cf1',
  'brand-5': '#ddeae4',
}

RGB Array

[87, 235, 27], [52, 217, 125], [175, 26, 234], [0, 12, 241], [221, 234, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57EB1B, #34D97D, #AF1AEA, #000CF1, #DDEAE4 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: #57eb1b; --color-2: #34d97d; --color-3: #af1aea; --color-4: #000cf1; --color-5: #ddeae4. 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