← Back to Editor

#99888A · #FF8F98 · #C4BC99 · #8CD1A1 · #21DEB5

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

#99888A

Crimson · Gray · Silver Sand

HEX
#99888A
RGB
rgb(153, 136, 138)
HSL
hsl(353, 8%, 57%)
HSB
hsb(353, 11%, 60%)
CMYK
cmyk(0%, 11%, 10%, 40%)
Oklch
oklch(64.3% 0.021 9.6)

Traditional「Crimson」· Paint「Silver Sand」· Creative Urban Concrete

#FF8F98

Peach Pink · LightCoral · Coral Red

HEX
#FF8F98
RGB
rgb(255, 143, 152)
HSL
hsl(355, 100%, 78%)
HSB
hsb(355, 44%, 100%)
CMYK
cmyk(0%, 44%, 40%, 0%)
Oklch
oklch(77.2% 0.135 15.6)

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

#C4BC99

Ginger · Tan · Sunflower

HEX
#C4BC99
RGB
rgb(196, 188, 153)
HSL
hsl(49, 27%, 68%)
HSB
hsb(49, 22%, 77%)
CMYK
cmyk(0%, 4%, 22%, 23%)
Oklch
oklch(79.3% 0.048 96.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#8CD1A1

Celadon · DarkSeaGreen · Apple Green

HEX
#8CD1A1
RGB
rgb(140, 209, 161)
HSL
hsl(138, 43%, 68%)
HSB
hsb(138, 33%, 82%)
CMYK
cmyk(33%, 0%, 23%, 18%)
Oklch
oklch(80.2% 0.098 153.4)

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

#21DEB5

Mineral Blue · Turquoise · Mint Ice

HEX
#21DEB5
RGB
rgb(33, 222, 181)
HSL
hsl(167, 74%, 50%)
HSB
hsb(167, 85%, 87%)
CMYK
cmyk(85%, 0%, 18%, 13%)
Oklch
oklch(80.5% 0.151 172.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99888A
899A98

Analogous

9A8993
99888A
9A8F89

Triadic

99888A
8B9A89
898B9A

Split-Comp.

99888A
899A8F
89939A

Tetradic

99888A
939A89
899A98
8F899A

Contrast Matrix WCAG 2.1 Contrast

99888A
FF8F98
C4BC99
8CD1A1
21DEB5
—
1.5
Fail
1.8
Fail
1.9
Fail
2.0
Fail
1.5
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.8
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.9
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
2.0
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
White BG
3.4AA Large
2.2Fail
1.9Fail
1.8Fail
1.7Fail
Black BG
6.2AA
9.6AAA
11.0AAA
11.7AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

92918A
CFCD96
C1C0A1
AAAAAD
7375BF

Deuteranopia

939489
D5DD95
C1C2A4
A6A1AF
685AC1

Tritanopia

988989
F99494
C4A8AA
8FB6B8
2AC7C8

Achromatopsia

8D8D8D
B2B2B2
BABABA
B7B7B7
A1A1A1

Shades & Tints Shades & Tints

#99888A

Dark
Light

#FF8F98

Dark
Light

#C4BC99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99888a;
  --color-2: #ff8f98;
  --color-3: #c4bc99;
  --color-4: #8cd1a1;
  --color-5: #21deb5;
}

SCSS

$color-1: #99888a;
$color-2: #ff8f98;
$color-3: #c4bc99;
$color-4: #8cd1a1;
$color-5: #21deb5;

TAILWIND

colors: {
  'brand-1': '#99888a',
  'brand-2': '#ff8f98',
  'brand-3': '#c4bc99',
  'brand-4': '#8cd1a1',
  'brand-5': '#21deb5',
}

RGB Array

[153, 136, 138], [255, 143, 152], [196, 188, 153], [140, 209, 161], [33, 222, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99888A, #FF8F98, #C4BC99, #8CD1A1, #21DEB5 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: #99888a; --color-2: #ff8f98; --color-3: #c4bc99; --color-4: #8cd1a1; --color-5: #21deb5. 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