← Back to Editor

#E16772 · #BF8A8E · #A7CCC6 · #9BA4B3 · #8C777F

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

#E16772

Peach Pink · LightCoral · Coral Red

HEX
#E16772
RGB
rgb(225, 103, 114)
HSL
hsl(355, 67%, 64%)
HSB
hsb(355, 54%, 88%)
CMYK
cmyk(0%, 54%, 49%, 12%)
Oklch
oklch(66.4% 0.152 16.7)

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

#BF8A8E

Peach Pink · Tan · Coral Red

HEX
#BF8A8E
RGB
rgb(191, 138, 142)
HSL
hsl(355, 29%, 65%)
HSB
hsb(355, 28%, 75%)
CMYK
cmyk(0%, 28%, 26%, 25%)
Oklch
oklch(68.6% 0.065 13.9)

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

#A7CCC6

Jade · LightSteelBlue · Lake Green

HEX
#A7CCC6
RGB
rgb(167, 204, 198)
HSL
hsl(170, 27%, 73%)
HSB
hsb(170, 18%, 80%)
CMYK
cmyk(18%, 0%, 3%, 20%)
Oklch
oklch(81.7% 0.040 184.4)

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

#9BA4B3

Azure · DarkGray · Cobalt Blue

HEX
#9BA4B3
RGB
rgb(155, 164, 179)
HSL
hsl(217, 14%, 65%)
HSB
hsb(217, 13%, 70%)
CMYK
cmyk(13%, 8%, 0%, 30%)
Oklch
oklch(71.6% 0.024 260.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#8C777F

Dark Violet · Gray · Warm Gray

HEX
#8C777F
RGB
rgb(140, 119, 127)
HSL
hsl(337, 8%, 51%)
HSB
hsb(337, 15%, 55%)
CMYK
cmyk(0%, 15%, 9%, 45%)
Oklch
oklch(59.1% 0.028 353.1)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E16772
66E1D6

Analogous

E166AD
E16772
E19966

Triadic

E16772
70E166
6670E1

Split-Comp.

E16772
66E199
66ADE1

Tetradic

E16772
ADE166
66E1D6
9966E1

Contrast Matrix WCAG 2.1 Contrast

E16772
BF8A8E
A7CCC6
9BA4B3
8C777F
—
1.1
Fail
1.9
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.7
Fail
1.2
Fail
1.4
Fail
1.9
Fail
1.7
Fail
—
1.4
Fail
2.4
Fail
1.3
Fail
1.2
Fail
1.4
Fail
—
1.7
Fail
1.3
Fail
1.4
Fail
2.4
Fail
1.7
Fail
—
White BG
3.3AA Large
2.9Fail
1.7Fail
2.5Fail
4.1AA Large
Black BG
6.4AA
7.2AAA
12.1AAA
8.4AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAB6F
A8A88D
B7B7C7
9F9FAF
83837D

Deuteranopia

B3BC6F
ABAF8D
B5B2C8
9E9EAF
84867D

Tritanopia

DB6D6D
BC8C8C
A9C9C9
9BADAC
8B7C7B

Achromatopsia

8D8D8D
9A9A9A
C0C0C0
A3A3A3
7E7E7E

Shades & Tints Shades & Tints

#E16772

Dark
Light

#BF8A8E

Dark
Light

#A7CCC6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e16772;
  --color-2: #bf8a8e;
  --color-3: #a7ccc6;
  --color-4: #9ba4b3;
  --color-5: #8c777f;
}

SCSS

$color-1: #e16772;
$color-2: #bf8a8e;
$color-3: #a7ccc6;
$color-4: #9ba4b3;
$color-5: #8c777f;

TAILWIND

colors: {
  'brand-1': '#e16772',
  'brand-2': '#bf8a8e',
  'brand-3': '#a7ccc6',
  'brand-4': '#9ba4b3',
  'brand-5': '#8c777f',
}

RGB Array

[225, 103, 114], [191, 138, 142], [167, 204, 198], [155, 164, 179], [140, 119, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E16772, #BF8A8E, #A7CCC6, #9BA4B3, #8C777F is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e16772; --color-2: #bf8a8e; --color-3: #a7ccc6; --color-4: #9ba4b3; --color-5: #8c777f. 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. Restrained colors convey professionalism and trust. 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