← Back to Editor

#98BCBB · #9B1181 · #DE0A80 · #FD6772 · #F2D39E

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

#98BCBB

Jade · DarkGray · Lake Green

HEX
#98BCBB
RGB
rgb(152, 188, 187)
HSL
hsl(178, 21%, 67%)
HSB
hsb(178, 19%, 74%)
CMYK
cmyk(19%, 0%, 1%, 26%)
Oklch
oklch(76.9% 0.039 194.3)

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

#9B1181

Rose Purple · DarkMagenta · Eggplant

HEX
#9B1181
RGB
rgb(155, 17, 129)
HSL
hsl(311, 80%, 34%)
HSB
hsb(311, 89%, 61%)
CMYK
cmyk(0%, 89%, 17%, 39%)
Oklch
oklch(47.4% 0.198 338.1)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#DE0A80

Rose Purple · MediumVioletRed · Camellia

HEX
#DE0A80
RGB
rgb(222, 10, 128)
HSL
hsl(327, 91%, 45%)
HSB
hsb(327, 95%, 87%)
CMYK
cmyk(0%, 95%, 42%, 13%)
Oklch
oklch(58.9% 0.237 356.5)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#FD6772

Peach Pink · Salmon · Coral Red

HEX
#FD6772
RGB
rgb(253, 103, 114)
HSL
hsl(356, 97%, 70%)
HSB
hsb(356, 59%, 99%)
CMYK
cmyk(0%, 59%, 55%, 1%)
Oklch
oklch(70.5% 0.183 18.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F2D39E

Goose Yellow · Wheat · Peach Orange

HEX
#F2D39E
RGB
rgb(242, 211, 158)
HSL
hsl(38, 76%, 78%)
HSB
hsb(38, 35%, 95%)
CMYK
cmyk(0%, 13%, 35%, 5%)
Oklch
oklch(88.0% 0.077 80.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98BCBB
BD999A

Analogous

99BDAA
98BCBB
99ACBD

Triadic

98BCBB
BB99BD
BDBB99

Split-Comp.

98BCBB
BD99AC
BDAA99

Tetradic

98BCBB
AA99BD
BD999A
ACBD99

Contrast Matrix WCAG 2.1 Contrast

98BCBB
9B1181
DE0A80
FD6772
F2D39E
—
3.7
AA Large
2.3
Fail
1.4
Fail
1.4
Fail
3.7
AA Large
—
1.6
Fail
2.6
Fail
5.2
AA
2.3
Fail
1.6
Fail
—
1.6
Fail
3.3
AA Large
1.4
Fail
2.6
Fail
1.6
Fail
—
2.0
Fail
1.4
Fail
5.2
AA
3.3
AA Large
2.0
Fail
—
White BG
2.0Fail
7.5AAA
4.7AA
2.9Fail
1.4Fail
Black BG
10.2AAA
2.8Fail
4.5AA Large
7.4AAA
14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8BB
5F5E66
828063
BCBB6F
E5E4AB

Deuteranopia

A6A3BB
67725F
8F9E5D
C5D06F
E6E9AE

Tritanopia

9ABBBB
94514C
D34D48
F66D6D
F0B5B7

Achromatopsia

B1B1B1
474747
575757
959595
D6D6D6

Shades & Tints Shades & Tints

#98BCBB

Dark
Light

#9B1181

Dark
Light

#DE0A80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98bcbb;
  --color-2: #9b1181;
  --color-3: #de0a80;
  --color-4: #fd6772;
  --color-5: #f2d39e;
}

SCSS

$color-1: #98bcbb;
$color-2: #9b1181;
$color-3: #de0a80;
$color-4: #fd6772;
$color-5: #f2d39e;

TAILWIND

colors: {
  'brand-1': '#98bcbb',
  'brand-2': '#9b1181',
  'brand-3': '#de0a80',
  'brand-4': '#fd6772',
  'brand-5': '#f2d39e',
}

RGB Array

[152, 188, 187], [155, 17, 129], [222, 10, 128], [253, 103, 114], [242, 211, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98BCBB, #9B1181, #DE0A80, #FD6772, #F2D39E 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: #98bcbb; --color-2: #9b1181; --color-3: #de0a80; --color-4: #fd6772; --color-5: #f2d39e. 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