← Back to Editor

#21888D · #43B1A8 · #93D057 · #DEF488 · #E3FB99

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

#21888D

Lake Blue · Teal · Mint Ice

HEX
#21888D
RGB
rgb(33, 136, 141)
HSL
hsl(183, 62%, 34%)
HSB
hsb(183, 77%, 55%)
CMYK
cmyk(77%, 4%, 0%, 45%)
Oklch
oklch(57.3% 0.089 199.9)

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

#43B1A8

Mineral Blue · CadetBlue · Mint Ice

HEX
#43B1A8
RGB
rgb(67, 177, 168)
HSL
hsl(175, 45%, 48%)
HSB
hsb(175, 62%, 69%)
CMYK
cmyk(62%, 0%, 5%, 31%)
Oklch
oklch(69.6% 0.100 187.6)

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

#93D057

Emerald · DarkSeaGreen · Olive Green

HEX
#93D057
RGB
rgb(147, 208, 87)
HSL
hsl(90, 56%, 58%)
HSB
hsb(90, 58%, 82%)
CMYK
cmyk(29%, 0%, 58%, 18%)
Oklch
oklch(79.1% 0.165 131.6)

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

#DEF488

Willow Green · Khaki · Apple Green

HEX
#DEF488
RGB
rgb(222, 244, 136)
HSL
hsl(72, 83%, 75%)
HSB
hsb(72, 44%, 96%)
CMYK
cmyk(9%, 0%, 44%, 4%)
Oklch
oklch(92.8% 0.136 118.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E3FB99

Willow Green · Khaki · Apple Green

HEX
#E3FB99
RGB
rgb(227, 251, 153)
HSL
hsl(75, 92%, 79%)
HSB
hsb(75, 39%, 98%)
CMYK
cmyk(10%, 0%, 39%, 2%)
Oklch
oklch(94.9% 0.125 120.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21888D
8C2621

Analogous

218C5C
21888D
21518C

Triadic

21888D
8C2187
878C21

Split-Comp.

21888D
8C2151
8C5C21

Tetradic

21888D
5C218C
8C2621
518C21

Contrast Matrix WCAG 2.1 Contrast

21888D
43B1A8
93D057
DEF488
E3FB99
—
1.6
Fail
2.3
Fail
3.5
AA Large
3.7
AA Large
1.6
Fail
—
1.4
Fail
2.2
Fail
2.3
Fail
2.3
Fail
1.4
Fail
—
1.5
Fail
1.6
Fail
3.5
AA Large
2.2
Fail
1.5
Fail
—
1.1
Fail
3.7
AA Large
2.3
Fail
1.6
Fail
1.1
Fail
—
White BG
4.2AA Large
2.6Fail
1.8Fail
1.2Fail
1.1Fail
Black BG
5.0AA
8.1AAA
11.4AAA
17.4AAA
18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4F8C
7374AA
ADAE74
E8E8A2
EDEEB1

Deuteranopia

48408C
6C64AB
AAA57B
E6E5A8
ECEAB6

Tritanopia

268B8B
49ACAC
968B90
DFB7BB
E4C3C8

Achromatopsia

6A6A6A
8F8F8F
B0B0B0
E1E1E1
E9E9E9

Shades & Tints Shades & Tints

#21888D

Dark
Light

#43B1A8

Dark
Light

#93D057

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21888d;
  --color-2: #43b1a8;
  --color-3: #93d057;
  --color-4: #def488;
  --color-5: #e3fb99;
}

SCSS

$color-1: #21888d;
$color-2: #43b1a8;
$color-3: #93d057;
$color-4: #def488;
$color-5: #e3fb99;

TAILWIND

colors: {
  'brand-1': '#21888d',
  'brand-2': '#43b1a8',
  'brand-3': '#93d057',
  'brand-4': '#def488',
  'brand-5': '#e3fb99',
}

RGB Array

[33, 136, 141], [67, 177, 168], [147, 208, 87], [222, 244, 136], [227, 251, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #21888D, #43B1A8, #93D057, #DEF488, #E3FB99 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: #21888d; --color-2: #43b1a8; --color-3: #93d057; --color-4: #def488; --color-5: #e3fb99. 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