← Back to Editor

#9BD4B1 · #77D7C9 · #E7FCD5 · #EB8E26 · #F43614

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 App

Color Details Color Details

#9BD4B1

Celadon · DarkSeaGreen · Apple Green

HEX
#9BD4B1
RGB
rgb(155, 212, 177)
HSL
hsl(143, 40%, 72%)
HSB
hsb(143, 27%, 83%)
CMYK
cmyk(27%, 0%, 17%, 17%)
Oklch
oklch(82.1% 0.077 157.3)

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

#77D7C9

Jade · MediumAquaMarine · Lake Green

HEX
#77D7C9
RGB
rgb(119, 215, 201)
HSL
hsl(171, 55%, 65%)
HSB
hsb(171, 45%, 84%)
CMYK
cmyk(45%, 0%, 7%, 16%)
Oklch
oklch(81.6% 0.094 183.5)

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

#E7FCD5

Emerald · Beige · Mint Green

HEX
#E7FCD5
RGB
rgb(231, 252, 213)
HSL
hsl(92, 87%, 91%)
HSB
hsb(92, 15%, 99%)
CMYK
cmyk(8%, 0%, 15%, 1%)
Oklch
oklch(96.6% 0.056 130.6)

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

#EB8E26

Ginger · GoldenRod · Warm Sun

HEX
#EB8E26
RGB
rgb(235, 142, 38)
HSL
hsl(32, 83%, 54%)
HSB
hsb(32, 84%, 92%)
CMYK
cmyk(0%, 40%, 84%, 8%)
Oklch
oklch(72.9% 0.156 62.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#F43614

Vermilion · OrangeRed · Passion Red

HEX
#F43614
RGB
rgb(244, 54, 20)
HSL
hsl(9, 91%, 52%)
HSB
hsb(9, 92%, 96%)
CMYK
cmyk(0%, 78%, 92%, 4%)
Oklch
oklch(63.0% 0.228 32.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BD4B1
D49BBE

Analogous

A2D49B
9BD4B1
9BD4CD

Triadic

9BD4B1
B19BD4
D4B19B

Split-Comp.

9BD4B1
CD9BD4
D49BA2

Tetradic

9BD4B1
9BA2D4
D49BBE
D4CD9B

Contrast Matrix WCAG 2.1 Contrast

9BD4B1
77D7C9
E7FCD5
EB8E26
F43614
—
1.0
Fail
1.5
Fail
1.5
Fail
2.3
Fail
1.0
Fail
—
1.6
Fail
1.5
Fail
2.3
Fail
1.5
Fail
1.6
Fail
—
2.3
Fail
3.6
AA Large
1.5
Fail
1.5
Fail
2.3
Fail
—
1.6
Fail
2.3
Fail
2.3
Fail
3.6
AA Large
1.6
Fail
—
White BG
1.7Fail
1.7Fail
1.1Fail
2.5Fail
3.9AA Large
Black BG
12.4AAA
12.3AAA
19.3AAA
8.4AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B4B9
A1A1CC
F0F0DE
C3C23F
A2A01C

Deuteranopia

B0ACBC
9B94CD
EFEDE1
C8CF45
ADBB1E

Tritanopia

9EC0C2
7CCFD0
E8E6E8
E65357
EA2324

Achromatopsia

BFBFBF
B9B9B9
F1F1F1
9E9E9E
6B6B6B

Shades & Tints Shades & Tints

#9BD4B1

Dark
Light

#77D7C9

Dark
Light

#E7FCD5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bd4b1;
  --color-2: #77d7c9;
  --color-3: #e7fcd5;
  --color-4: #eb8e26;
  --color-5: #f43614;
}

SCSS

$color-1: #9bd4b1;
$color-2: #77d7c9;
$color-3: #e7fcd5;
$color-4: #eb8e26;
$color-5: #f43614;

TAILWIND

colors: {
  'brand-1': '#9bd4b1',
  'brand-2': '#77d7c9',
  'brand-3': '#e7fcd5',
  'brand-4': '#eb8e26',
  'brand-5': '#f43614',
}

RGB Array

[155, 212, 177], [119, 215, 201], [231, 252, 213], [235, 142, 38], [244, 54, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BD4B1, #77D7C9, #E7FCD5, #EB8E26, #F43614 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: #9bd4b1; --color-2: #77d7c9; --color-3: #e7fcd5; --color-4: #eb8e26; --color-5: #f43614. 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