← Back to Editor

#FF96C9 · #6B807E · #9ED9CE · #AFD98B · #ABBF37

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF96C9

Rouge · LightPink · Cherry Blossom

HEX
#FF96C9
RGB
rgb(255, 150, 201)
HSL
hsl(331, 100%, 79%)
HSB
hsb(331, 41%, 100%)
CMYK
cmyk(0%, 41%, 21%, 0%)
Oklch
oklch(79.7% 0.139 350.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#6B807E

Mineral Blue · SlateGray · Warm Gray

HEX
#6B807E
RGB
rgb(107, 128, 126)
HSL
hsl(174, 9%, 46%)
HSB
hsb(174, 16%, 50%)
CMYK
cmyk(16%, 0%, 2%, 50%)
Oklch
oklch(58.2% 0.025 189.4)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#9ED9CE

Jade · LightBlue · Lake Green

HEX
#9ED9CE
RGB
rgb(158, 217, 206)
HSL
hsl(169, 44%, 74%)
HSB
hsb(169, 27%, 85%)
CMYK
cmyk(27%, 0%, 5%, 15%)
Oklch
oklch(84.2% 0.062 181.9)

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

#AFD98B

Emerald · LightGreen · Apple Green

HEX
#AFD98B
RGB
rgb(175, 217, 139)
HSL
hsl(92, 51%, 70%)
HSB
hsb(92, 36%, 85%)
CMYK
cmyk(19%, 0%, 36%, 15%)
Oklch
oklch(83.7% 0.113 131.5)

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

#ABBF37

Autumn Sage · GoldenRod · Honey Gold

HEX
#ABBF37
RGB
rgb(171, 191, 55)
HSL
hsl(69, 55%, 48%)
HSB
hsb(69, 71%, 75%)
CMYK
cmyk(10%, 0%, 71%, 25%)
Oklch
oklch(76.5% 0.157 117.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF96C9
94FFCB

Analogous

FF94FD
FF96C9
FF9694

Triadic

FF96C9
C8FF94
94C8FF

Split-Comp.

FF96C9
94FF96
94FDFF

Tetradic

FF96C9
FDFF94
94FFCB
9694FF

Contrast Matrix WCAG 2.1 Contrast

FF96C9
6B807E
9ED9CE
AFD98B
ABBF37
—
2.1
Fail
1.3
Fail
1.3
Fail
1.0
Fail
2.1
Fail
—
2.6
Fail
2.6
Fail
2.0
Fail
1.3
Fail
2.6
Fail
—
1.0
Fail
1.3
Fail
1.3
Fail
2.6
Fail
1.0
Fail
—
1.3
Fail
1.0
Fail
2.0
Fail
1.3
Fail
1.3
Fail
—
White BG
2.0Fail
4.2AA Large
1.6Fail
1.6Fail
2.1Fail
Black BG
10.5AAA
5.0AA
13.3AAA
13.1AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D1BD
74747E
B8B8D1
C1C29E
B4B458

Deuteranopia

D8E0BA
73717F
B4B0D1
BFBCA2
B3B160

Tritanopia

FAB3B1
6C7F7F
A1D3D3
B1ADB0
AC7278

Achromatopsia

BBBBBB
797979
C6C6C6
C4C4C4
AAAAAA

Shades & Tints Shades & Tints

#FF96C9

Dark
Light

#6B807E

Dark
Light

#9ED9CE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff96c9;
  --color-2: #6b807e;
  --color-3: #9ed9ce;
  --color-4: #afd98b;
  --color-5: #abbf37;
}

SCSS

$color-1: #ff96c9;
$color-2: #6b807e;
$color-3: #9ed9ce;
$color-4: #afd98b;
$color-5: #abbf37;

TAILWIND

colors: {
  'brand-1': '#ff96c9',
  'brand-2': '#6b807e',
  'brand-3': '#9ed9ce',
  'brand-4': '#afd98b',
  'brand-5': '#abbf37',
}

RGB Array

[255, 150, 201], [107, 128, 126], [158, 217, 206], [175, 217, 139], [171, 191, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF96C9, #6B807E, #9ED9CE, #AFD98B, #ABBF37 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ff96c9; --color-2: #6b807e; --color-3: #9ed9ce; --color-4: #afd98b; --color-5: #abbf37. 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. 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 tech, SaaS, healthcare, eco industries. 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