← Back to Editor

#8C898B · #B588A6 · #E887C8 · #D8C39F · #CDFF82

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C898B

Ash · Gray · Warm Gray

HEX
#8C898B
RGB
rgb(140, 137, 139)
HSL
hsl(320, 1%, 54%)
HSB
hsb(320, 2%, 55%)
CMYK
cmyk(0%, 2%, 1%, 45%)
Oklch
oklch(63.3% 0.005 337.4)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#B588A6

Mauve · DarkGray · Rose Pink

HEX
#B588A6
RGB
rgb(181, 136, 166)
HSL
hsl(320, 23%, 62%)
HSB
hsb(320, 25%, 71%)
CMYK
cmyk(0%, 25%, 8%, 29%)
Oklch
oklch(67.9% 0.068 339.2)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#E887C8

Mauve · Orchid · Rose Pink

HEX
#E887C8
RGB
rgb(232, 135, 200)
HSL
hsl(320, 68%, 72%)
HSB
hsb(320, 42%, 91%)
CMYK
cmyk(0%, 42%, 14%, 9%)
Oklch
oklch(74.7% 0.142 340.6)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#D8C39F

Goose Yellow · Tan · Warm Sun

HEX
#D8C39F
RGB
rgb(216, 195, 159)
HSL
hsl(38, 42%, 74%)
HSB
hsb(38, 26%, 85%)
CMYK
cmyk(0%, 10%, 26%, 15%)
Oklch
oklch(82.6% 0.054 81.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#CDFF82

Willow Green · Khaki · Apple Green

HEX
#CDFF82
RGB
rgb(205, 255, 130)
HSL
hsl(84, 100%, 75%)
HSB
hsb(84, 49%, 100%)
CMYK
cmyk(20%, 0%, 49%, 0%)
Oklch
oklch(93.9% 0.162 127.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C898B
898B89

Analogous

8A898B
8C898B
8B8989

Triadic

8C898B
8A8B89
898A8B

Split-Comp.

8C898B
898B89
898B8A

Tetradic

8C898B
8B8A89
898B89
89898B

Contrast Matrix WCAG 2.1 Contrast

8C898B
B588A6
E887C8
D8C39F
CDFF82
—
1.2
Fail
1.4
Fail
2.0
Fail
3.0
AA Large
1.2
Fail
—
1.2
Fail
1.7
Fail
2.6
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
2.1
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
1.5
Fail
3.0
AA Large
2.6
Fail
2.1
Fail
1.5
Fail
—
White BG
3.5AA Large
3.0Fail
2.4Fail
1.7Fail
1.2Fail
Black BG
6.1AA
7.0AAA
8.7AAA
12.2AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B8B
A2A19F
BEBDB8
CFCFA8
E3E3A0

Deuteranopia

8B8B8A
A4A89D
C4CBB5
D0D2AA
E0DCA8

Tritanopia

8C8A8A
B39998
E3ACA9
D7AFB0
D0B8BD

Achromatopsia

8A8A8A
999999
ABABAB
C5C5C5
E2E2E2

Shades & Tints Shades & Tints

#8C898B

Dark
Light

#B588A6

Dark
Light

#E887C8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c898b;
  --color-2: #b588a6;
  --color-3: #e887c8;
  --color-4: #d8c39f;
  --color-5: #cdff82;
}

SCSS

$color-1: #8c898b;
$color-2: #b588a6;
$color-3: #e887c8;
$color-4: #d8c39f;
$color-5: #cdff82;

TAILWIND

colors: {
  'brand-1': '#8c898b',
  'brand-2': '#b588a6',
  'brand-3': '#e887c8',
  'brand-4': '#d8c39f',
  'brand-5': '#cdff82',
}

RGB Array

[140, 137, 139], [181, 136, 166], [232, 135, 200], [216, 195, 159], [205, 255, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C898B, #B588A6, #E887C8, #D8C39F, #CDFF82 is ideal for: health products, baby brands, fresh-style blogs. 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: #8c898b; --color-2: #b588a6; --color-3: #e887c8; --color-4: #d8c39f; --color-5: #cdff82. 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 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