← Back to Editor

#20BBA5 · #54CAA5 · #87DAA6 · #BBE9A6 · #EEF8A6

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 App

Color Details Color Details

#20BBA5

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#20BBA5
RGB
rgb(32, 187, 165)
HSL
hsl(171, 71%, 43%)
HSB
hsb(171, 83%, 73%)
CMYK
cmyk(83%, 0%, 12%, 27%)
Oklch
oklch(71.2% 0.124 179.9)

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

#54CAA5

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#54CAA5
RGB
rgb(84, 202, 165)
HSL
hsl(161, 53%, 56%)
HSB
hsb(161, 58%, 79%)
CMYK
cmyk(58%, 0%, 18%, 21%)
Oklch
oklch(76.2% 0.120 169.4)

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

#87DAA6

Emerald · LightGreen · Apple Green

HEX
#87DAA6
RGB
rgb(135, 218, 166)
HSL
hsl(142, 53%, 69%)
HSB
hsb(142, 38%, 85%)
CMYK
cmyk(38%, 0%, 24%, 15%)
Oklch
oklch(82.1% 0.110 155.6)

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

#BBE9A6

Emerald · LightGreen · Apple Green

HEX
#BBE9A6
RGB
rgb(187, 233, 166)
HSL
hsl(101, 60%, 78%)
HSB
hsb(101, 29%, 91%)
CMYK
cmyk(20%, 0%, 29%, 9%)
Oklch
oklch(88.5% 0.101 136.1)

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

#EEF8A6

Fresh Green · Wheat · Lemon Cream

HEX
#EEF8A6
RGB
rgb(238, 248, 166)
HSL
hsl(67, 85%, 81%)
HSB
hsb(67, 33%, 97%)
CMYK
cmyk(4%, 0%, 33%, 3%)
Oklch
oklch(95.3% 0.104 114.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20BBA5
BC2037

Analogous

20BC56
20BBA5
2085BC

Triadic

20BBA5
A420BC
BCA420

Split-Comp.

20BBA5
BC2085
BC5620

Tetradic

20BBA5
5620BC
BC2037
85BC20

Contrast Matrix WCAG 2.1 Contrast

20BBA5
54CAA5
87DAA6
BBE9A6
EEF8A6
—
1.2
Fail
1.4
Fail
1.8
Fail
2.1
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.1
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
2.4Fail
2.0Fail
1.7Fail
1.4Fail
1.1Fail
Black BG
8.7AAA
10.4AAA
12.6AAA
15.3AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6365AA
8788AE
ABACB3
CFCFB6
F2F2BA

Deuteranopia

5A4FAC
8077B0
A6A0B6
CCC9BA
F2F1BF

Tritanopia

28AFAF
5AB5B7
8BBDBF
BDC3C6
EFCACD

Achromatopsia

8A8A8A
A3A3A3
BBBBBB
D4D4D4
ECECEC

Shades & Tints Shades & Tints

#20BBA5

Dark
Light

#54CAA5

Dark
Light

#87DAA6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20bba5;
  --color-2: #54caa5;
  --color-3: #87daa6;
  --color-4: #bbe9a6;
  --color-5: #eef8a6;
}

SCSS

$color-1: #20bba5;
$color-2: #54caa5;
$color-3: #87daa6;
$color-4: #bbe9a6;
$color-5: #eef8a6;

TAILWIND

colors: {
  'brand-1': '#20bba5',
  'brand-2': '#54caa5',
  'brand-3': '#87daa6',
  'brand-4': '#bbe9a6',
  'brand-5': '#eef8a6',
}

RGB Array

[32, 187, 165], [84, 202, 165], [135, 218, 166], [187, 233, 166], [238, 248, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #20BBA5, #54CAA5, #87DAA6, #BBE9A6, #EEF8A6 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #20bba5; --color-2: #54caa5; --color-3: #87daa6; --color-4: #bbe9a6; --color-5: #eef8a6. 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. 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