← Back to Editor

#E1FEBE · #9AE3AB · #77CEAC · #597A81 · #FB3D7D

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

#E1FEBE

Willow Green · Beige · Mint Green

HEX
#E1FEBE
RGB
rgb(225, 254, 190)
HSL
hsl(87, 97%, 87%)
HSB
hsb(87, 25%, 100%)
CMYK
cmyk(11%, 0%, 25%, 0%)
Oklch
oklch(96.0% 0.088 127.8)

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

#9AE3AB

Emerald · LightGreen · Apple Green

HEX
#9AE3AB
RGB
rgb(154, 227, 171)
HSL
hsl(134, 57%, 75%)
HSB
hsb(134, 32%, 89%)
CMYK
cmyk(32%, 0%, 25%, 11%)
Oklch
oklch(85.3% 0.107 150.9)

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

#77CEAC

Jade · MediumAquaMarine · Apple Green

HEX
#77CEAC
RGB
rgb(119, 206, 172)
HSL
hsl(157, 47%, 64%)
HSB
hsb(157, 42%, 81%)
CMYK
cmyk(42%, 0%, 17%, 19%)
Oklch
oklch(78.7% 0.098 166.8)

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

#597A81

Slate Blue · SlateGray · Mint Ice

HEX
#597A81
RGB
rgb(89, 122, 129)
HSL
hsl(191, 18%, 43%)
HSB
hsb(191, 31%, 51%)
CMYK
cmyk(31%, 5%, 0%, 49%)
Oklch
oklch(55.7% 0.039 212.2)

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

#FB3D7D

Rouge · DeepPink · Rose Pink

HEX
#FB3D7D
RGB
rgb(251, 61, 125)
HSL
hsl(340, 96%, 61%)
HSB
hsb(340, 76%, 98%)
CMYK
cmyk(0%, 76%, 50%, 2%)
Oklch
oklch(66.2% 0.227 6.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1FEBE
DBBEFE

Analogous

FEFBBE
E1FEBE
C1FEBE

Triadic

E1FEBE
BEE1FE
FEBEE1

Split-Comp.

E1FEBE
BEC1FE
FBBEFE

Tetradic

E1FEBE
BEFEFB
DBBEFE
FEBEC1

Contrast Matrix WCAG 2.1 Contrast

E1FEBE
9AE3AB
77CEAC
597A81
FB3D7D
—
1.4
Fail
1.7
Fail
4.2
AA Large
3.2
AA Large
1.4
Fail
—
1.2
Fail
3.1
AA Large
2.3
Fail
1.7
Fail
1.2
Fail
—
2.5
Fail
1.8
Fail
4.2
AA Large
3.1
AA Large
2.5
Fail
—
1.3
Fail
3.2
AA Large
2.3
Fail
1.8
Fail
1.3
Fail
—
White BG
1.1Fail
1.5Fail
1.9Fail
4.6AA
3.5AA Large
Black BG
19.1AAA
13.9AAA
11.2AAA
4.5AA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEECD
BABAB9
9D9DB4
67687F
A9A76E

Deuteranopia

ECEAD1
B5B0BC
9891B6
65637F
B4C26A

Tritanopia

E2DADC
9EC3C6
7BBBBC
5B7E7E
F2615F

Achromatopsia

EEEEEE
C7C7C7
B0B0B0
717171
7D7D7D

Shades & Tints Shades & Tints

#E1FEBE

Dark
Light

#9AE3AB

Dark
Light

#77CEAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1febe;
  --color-2: #9ae3ab;
  --color-3: #77ceac;
  --color-4: #597a81;
  --color-5: #fb3d7d;
}

SCSS

$color-1: #e1febe;
$color-2: #9ae3ab;
$color-3: #77ceac;
$color-4: #597a81;
$color-5: #fb3d7d;

TAILWIND

colors: {
  'brand-1': '#e1febe',
  'brand-2': '#9ae3ab',
  'brand-3': '#77ceac',
  'brand-4': '#597a81',
  'brand-5': '#fb3d7d',
}

RGB Array

[225, 254, 190], [154, 227, 171], [119, 206, 172], [89, 122, 129], [251, 61, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1FEBE, #9AE3AB, #77CEAC, #597A81, #FB3D7D 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: #e1febe; --color-2: #9ae3ab; --color-3: #77ceac; --color-4: #597a81; --color-5: #fb3d7d. 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