← Back to Editor

#E0FFCC · #A2C1FC · #675CE6 · #4D558F · #4A50F0

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

#E0FFCC

Emerald · Beige · Mint Green

HEX
#E0FFCC
RGB
rgb(224, 255, 204)
HSL
hsl(96, 100%, 90%)
HSB
hsb(96, 20%, 100%)
CMYK
cmyk(12%, 0%, 20%, 0%)
Oklch
oklch(96.5% 0.074 133.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#A2C1FC

Azure · LightSkyBlue · Sky Blue

HEX
#A2C1FC
RGB
rgb(162, 193, 252)
HSL
hsl(219, 94%, 81%)
HSB
hsb(219, 36%, 99%)
CMYK
cmyk(36%, 23%, 0%, 1%)
Oklch
oklch(80.9% 0.091 263.0)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#675CE6

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#675CE6
RGB
rgb(103, 92, 230)
HSL
hsl(245, 73%, 63%)
HSB
hsb(245, 60%, 90%)
CMYK
cmyk(55%, 60%, 0%, 10%)
Oklch
oklch(56.3% 0.202 281.3)

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

#4D558F

Indigo · DarkSlateBlue · Navy Blue

HEX
#4D558F
RGB
rgb(77, 85, 143)
HSL
hsl(233, 30%, 43%)
HSB
hsb(233, 46%, 56%)
CMYK
cmyk(46%, 41%, 0%, 44%)
Oklch
oklch(47.0% 0.094 276.2)

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

#4A50F0

Azure · SlateBlue · Cobalt Blue

HEX
#4A50F0
RGB
rgb(74, 80, 240)
HSL
hsl(238, 85%, 62%)
HSB
hsb(238, 69%, 94%)
CMYK
cmyk(69%, 67%, 0%, 6%)
Oklch
oklch(53.3% 0.234 273.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0FFCC
EBCCFF

Analogous

FAFFCC
E0FFCC
CCFFD1

Triadic

E0FFCC
CCE0FF
FFCCE0

Split-Comp.

E0FFCC
D1CCFF
FFCCFA

Tetradic

E0FFCC
CCFAFF
EBCCFF
FFD1CC

Contrast Matrix WCAG 2.1 Contrast

E0FFCC
A2C1FC
675CE6
4D558F
4A50F0
—
1.7
Fail
4.6
AA
6.4
AA
5.2
AA
1.7
Fail
—
2.7
Fail
3.8
AA Large
3.1
AA Large
4.6
AA
2.7
Fail
—
1.4
Fail
1.1
Fail
6.4
AA
3.8
AA Large
1.4
Fail
—
1.2
Fail
5.2
AA
3.1
AA Large
1.1
Fail
1.2
Fail
—
White BG
1.1Fail
1.8Fail
4.9AA
7.0AA
5.7AA
Black BG
19.3AAA
11.6AAA
4.3AA Large
3.0AA Large
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEED8
AFB0EE
6262C5
505181
4D4DC9

Deuteranopia

ECE9DB
AEABEA
6364BD
504F7E
4C4CC0

Tritanopia

E2E2E4
A4E2E0
66AAA4
4D7673
4AABA4

Achromatopsia

F0F0F0
BEBEBE
6F6F6F
595959
606060

Shades & Tints Shades & Tints

#E0FFCC

Dark
Light

#A2C1FC

Dark
Light

#675CE6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0ffcc;
  --color-2: #a2c1fc;
  --color-3: #675ce6;
  --color-4: #4d558f;
  --color-5: #4a50f0;
}

SCSS

$color-1: #e0ffcc;
$color-2: #a2c1fc;
$color-3: #675ce6;
$color-4: #4d558f;
$color-5: #4a50f0;

TAILWIND

colors: {
  'brand-1': '#e0ffcc',
  'brand-2': '#a2c1fc',
  'brand-3': '#675ce6',
  'brand-4': '#4d558f',
  'brand-5': '#4a50f0',
}

RGB Array

[224, 255, 204], [162, 193, 252], [103, 92, 230], [77, 85, 143], [74, 80, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0FFCC, #A2C1FC, #675CE6, #4D558F, #4A50F0 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #e0ffcc; --color-2: #a2c1fc; --color-3: #675ce6; --color-4: #4d558f; --color-5: #4a50f0. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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