← Back to Editor

#BF8080 · #A879A3 · #A3A3CC · #97B7CC · #9A8BA6

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

#BF8080

Peach Pink · DarkSalmon · Coral Red

HEX
#BF8080
RGB
rgb(191, 128, 128)
HSL
hsl(0, 33%, 63%)
HSB
hsb(0, 33%, 75%)
CMYK
cmyk(0%, 33%, 33%, 25%)
Oklch
oklch(66.4% 0.079 19.4)

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

#A879A3

Rose Purple · DarkGray · Violet

HEX
#A879A3
RGB
rgb(168, 121, 163)
HSL
hsl(306, 21%, 57%)
HSB
hsb(306, 28%, 66%)
CMYK
cmyk(0%, 28%, 3%, 34%)
Oklch
oklch(63.7% 0.082 330.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#A3A3CC

Wisteria · DarkGray · Cobalt Blue

HEX
#A3A3CC
RGB
rgb(163, 163, 204)
HSL
hsl(240, 29%, 72%)
HSB
hsb(240, 20%, 80%)
CMYK
cmyk(20%, 20%, 0%, 20%)
Oklch
oklch(73.0% 0.059 284.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#97B7CC

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#97B7CC
RGB
rgb(151, 183, 204)
HSL
hsl(204, 34%, 70%)
HSB
hsb(204, 26%, 80%)
CMYK
cmyk(26%, 10%, 0%, 20%)
Oklch
oklch(76.3% 0.046 237.0)

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

#9A8BA6

Dark Plum · DarkGray · Violet

HEX
#9A8BA6
RGB
rgb(154, 139, 166)
HSL
hsl(273, 13%, 60%)
HSB
hsb(273, 16%, 65%)
CMYK
cmyk(7%, 16%, 0%, 35%)
Oklch
oklch(65.9% 0.043 310.1)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF8080
82C0C0

Analogous

C082A1
BF8080
C0A182

Triadic

BF8080
82C082
8282C0

Split-Comp.

BF8080
82C0A1
82A1C0

Tetradic

BF8080
A1C082
82C0C0
A182C0

Contrast Matrix WCAG 2.1 Contrast

BF8080
A879A3
A3A3CC
97B7CC
9A8BA6
—
1.1
Fail
1.3
Fail
1.5
Fail
1.0
Fail
1.1
Fail
—
1.5
Fail
1.7
Fail
1.1
Fail
1.3
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.7
Fail
1.1
Fail
—
1.5
Fail
1.0
Fail
1.1
Fail
1.3
Fail
1.5
Fail
—
White BG
3.2AA Large
3.5AA Large
2.4Fail
2.1Fail
3.2AA Large
Black BG
6.6AA
5.9AA
8.7AAA
10.0AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A380
949399
A3A3C2
A5A5C7
94939F

Deuteranopia

A7AC80
969A96
A3A3C0
A3A1C6
94969E

Tritanopia

BC8080
A6918F
A3BAB9
99C3C2
999A99

Achromatopsia

939393
8C8C8C
A8A8A8
B0B0B0
939393

Shades & Tints Shades & Tints

#BF8080

Dark
Light

#A879A3

Dark
Light

#A3A3CC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf8080;
  --color-2: #a879a3;
  --color-3: #a3a3cc;
  --color-4: #97b7cc;
  --color-5: #9a8ba6;
}

SCSS

$color-1: #bf8080;
$color-2: #a879a3;
$color-3: #a3a3cc;
$color-4: #97b7cc;
$color-5: #9a8ba6;

TAILWIND

colors: {
  'brand-1': '#bf8080',
  'brand-2': '#a879a3',
  'brand-3': '#a3a3cc',
  'brand-4': '#97b7cc',
  'brand-5': '#9a8ba6',
}

RGB Array

[191, 128, 128], [168, 121, 163], [163, 163, 204], [151, 183, 204], [154, 139, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF8080, #A879A3, #A3A3CC, #97B7CC, #9A8BA6 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: #bf8080; --color-2: #a879a3; --color-3: #a3a3cc; --color-4: #97b7cc; --color-5: #9a8ba6. 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