← Back to Editor

#817F8F · #AB8C99 · #CFA0A4 · #E3B7B0 · #E9D0BD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#817F8F

Ash · Gray · Warm Gray

HEX
#817F8F
RGB
rgb(129, 127, 143)
HSL
hsl(248, 7%, 53%)
HSB
hsb(248, 11%, 56%)
CMYK
cmyk(10%, 11%, 0%, 44%)
Oklch
oklch(60.4% 0.024 291.4)

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

#AB8C99

Rouge · DarkGray · Rose Pink

HEX
#AB8C99
RGB
rgb(171, 140, 153)
HSL
hsl(335, 16%, 61%)
HSB
hsb(335, 18%, 67%)
CMYK
cmyk(0%, 18%, 11%, 33%)
Oklch
oklch(67.3% 0.041 351.2)

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

#CFA0A4

Peach Pink · Tan · Coral Red

HEX
#CFA0A4
RGB
rgb(207, 160, 164)
HSL
hsl(355, 33%, 72%)
HSB
hsb(355, 23%, 81%)
CMYK
cmyk(0%, 23%, 21%, 19%)
Oklch
oklch(75.0% 0.056 12.8)

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

#E3B7B0

Peach Pink · LightPink · Coral Red

HEX
#E3B7B0
RGB
rgb(227, 183, 176)
HSL
hsl(8, 48%, 79%)
HSB
hsb(8, 22%, 89%)
CMYK
cmyk(0%, 19%, 22%, 11%)
Oklch
oklch(81.7% 0.052 28.7)

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

#E9D0BD

Apricot · Wheat · Peach Orange

HEX
#E9D0BD
RGB
rgb(233, 208, 189)
HSL
hsl(26, 50%, 83%)
HSB
hsb(26, 19%, 91%)
CMYK
cmyk(0%, 11%, 19%, 9%)
Oklch
oklch(87.3% 0.038 59.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

817F8F
8D907F

Analogous

7F8590
817F8F
897F90

Triadic

817F8F
90817F
7F9081

Split-Comp.

817F8F
90897F
85907F

Tetradic

817F8F
907F85
8D907F
7F9089

Contrast Matrix WCAG 2.1 Contrast

817F8F
AB8C99
CFA0A4
E3B7B0
E9D0BD
—
1.3
Fail
1.7
Fail
2.2
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.2
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
2.7
Fail
2.0
Fail
1.5
Fail
1.2
Fail
—
White BG
3.9AA Large
3.0AA Large
2.3Fail
1.8Fail
1.5Fail
Black BG
5.4AA
6.9AA
9.2AAA
11.7AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

80808B
9E9D96
BBBAA3
D0D0B2
DEDEC2

Deuteranopia

80808A
9FA295
BDC1A3
D3D6B2
E0E2C3

Tritanopia

818887
A99393
CDA2A2
E1B3B3
E8C5C6

Achromatopsia

818181
979797
AFAFAF
C3C3C3
D5D5D5

Shades & Tints Shades & Tints

#817F8F

Dark
Light

#AB8C99

Dark
Light

#CFA0A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #817f8f;
  --color-2: #ab8c99;
  --color-3: #cfa0a4;
  --color-4: #e3b7b0;
  --color-5: #e9d0bd;
}

SCSS

$color-1: #817f8f;
$color-2: #ab8c99;
$color-3: #cfa0a4;
$color-4: #e3b7b0;
$color-5: #e9d0bd;

TAILWIND

colors: {
  'brand-1': '#817f8f',
  'brand-2': '#ab8c99',
  'brand-3': '#cfa0a4',
  'brand-4': '#e3b7b0',
  'brand-5': '#e9d0bd',
}

RGB Array

[129, 127, 143], [171, 140, 153], [207, 160, 164], [227, 183, 176], [233, 208, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #817F8F, #AB8C99, #CFA0A4, #E3B7B0, #E9D0BD 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: #817f8f; --color-2: #ab8c99; --color-3: #cfa0a4; --color-4: #e3b7b0; --color-5: #e9d0bd. 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