← Back to Editor

#9EC4AF · #F8D4B2 · #FF9981 · #FB5C47 · #E80100

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#9EC4AF

Celadon · DarkGray · Apple Green

HEX
#9EC4AF
RGB
rgb(158, 196, 175)
HSL
hsl(147, 24%, 69%)
HSB
hsb(147, 19%, 77%)
CMYK
cmyk(19%, 0%, 11%, 23%)
Oklch
oklch(78.7% 0.050 160.8)

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

#F8D4B2

Apricot · Wheat · Peach Orange

HEX
#F8D4B2
RGB
rgb(248, 212, 178)
HSL
hsl(29, 83%, 84%)
HSB
hsb(29, 28%, 97%)
CMYK
cmyk(0%, 15%, 28%, 3%)
Oklch
oklch(89.2% 0.060 65.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FF9981

Peach Pink · LightSalmon · Coral Red

HEX
#FF9981
RGB
rgb(255, 153, 129)
HSL
hsl(11, 100%, 75%)
HSB
hsb(11, 49%, 100%)
CMYK
cmyk(0%, 40%, 49%, 0%)
Oklch
oklch(78.3% 0.128 34.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FB5C47

Peach Pink · Tomato · Coral Red

HEX
#FB5C47
RGB
rgb(251, 92, 71)
HSL
hsl(7, 96%, 63%)
HSB
hsb(7, 72%, 98%)
CMYK
cmyk(0%, 63%, 72%, 2%)
Oklch
oklch(68.2% 0.198 30.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E80100

Vermilion · Red · Passion Red

HEX
#E80100
RGB
rgb(232, 1, 0)
HSL
hsl(0, 100%, 45%)
HSB
hsb(0, 100%, 91%)
CMYK
cmyk(0%, 100%, 100%, 9%)
Oklch
oklch(58.5% 0.240 29.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9EC4AF
C39DB2

Analogous

9FC39D
9EC4AF
9DC3C1

Triadic

9EC4AF
AE9DC3
C3AE9D

Split-Comp.

9EC4AF
C19DC3
C39D9F

Tetradic

9EC4AF
9D9FC3
C39DB2
C3C19D

Contrast Matrix WCAG 2.1 Contrast

9EC4AF
F8D4B2
FF9981
FB5C47
E80100
—
1.4
Fail
1.1
Fail
1.6
Fail
2.5
Fail
1.4
Fail
—
1.5
Fail
2.2
Fail
3.4
AA Large
1.1
Fail
1.5
Fail
—
1.5
Fail
2.3
Fail
1.6
Fail
2.2
Fail
1.5
Fail
—
1.5
Fail
2.5
Fail
3.4
AA Large
2.3
Fail
1.5
Fail
—
White BG
1.9Fail
1.4Fail
2.1Fail
3.1AA Large
4.7AA
Black BG
11.0AAA
15.1AAA
10.1AAA
6.7AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAFB4
E8E8BA
D3D287
B6B54C
848200

Deuteranopia

ACA9B5
EBEDBC
D9E088
BFCB4D
91A300

Tritanopia

A0B8B9
F6C1C2
FA8B8C
F35051
DC0000

Achromatopsia

B6B6B6
DBDBDB
B5B5B5
898989
464646

Shades & Tints Shades & Tints

#9EC4AF

Dark
Light

#F8D4B2

Dark
Light

#FF9981

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ec4af;
  --color-2: #f8d4b2;
  --color-3: #ff9981;
  --color-4: #fb5c47;
  --color-5: #e80100;
}

SCSS

$color-1: #9ec4af;
$color-2: #f8d4b2;
$color-3: #ff9981;
$color-4: #fb5c47;
$color-5: #e80100;

TAILWIND

colors: {
  'brand-1': '#9ec4af',
  'brand-2': '#f8d4b2',
  'brand-3': '#ff9981',
  'brand-4': '#fb5c47',
  'brand-5': '#e80100',
}

RGB Array

[158, 196, 175], [248, 212, 178], [255, 153, 129], [251, 92, 71], [232, 1, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9EC4AF, #F8D4B2, #FF9981, #FB5C47, #E80100 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: #9ec4af; --color-2: #f8d4b2; --color-3: #ff9981; --color-4: #fb5c47; --color-5: #e80100. 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