← Back to Editor

#A8BCBF · #B7B8AB · #C1A099 · #A54B79 · #504858

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

#A8BCBF

Sky Blue · Silver · Lake Green

HEX
#A8BCBF
RGB
rgb(168, 188, 191)
HSL
hsl(188, 15%, 70%)
HSB
hsb(188, 12%, 75%)
CMYK
cmyk(12%, 2%, 0%, 25%)
Oklch
oklch(78.1% 0.022 207.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B7B8AB

Fresh Green · DarkGray · Silver Sand

HEX
#B7B8AB
RGB
rgb(183, 184, 171)
HSL
hsl(65, 8%, 70%)
HSB
hsb(65, 7%, 72%)
CMYK
cmyk(1%, 0%, 7%, 28%)
Oklch
oklch(77.8% 0.018 110.4)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#C1A099

Peach Pink · Tan · Coral Red

HEX
#C1A099
RGB
rgb(193, 160, 153)
HSL
hsl(11, 24%, 68%)
HSB
hsb(11, 21%, 76%)
CMYK
cmyk(0%, 17%, 21%, 24%)
Oklch
oklch(73.3% 0.041 32.0)

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

#A54B79

Rose Purple · MediumVioletRed · Camellia

HEX
#A54B79
RGB
rgb(165, 75, 121)
HSL
hsl(329, 38%, 47%)
HSB
hsb(329, 55%, 65%)
CMYK
cmyk(0%, 55%, 27%, 35%)
Oklch
oklch(54.1% 0.130 350.4)

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

#504858

Dark Plum · DarkSlateGray · Eggplant

HEX
#504858
RGB
rgb(80, 72, 88)
HSL
hsl(270, 10%, 31%)
HSB
hsb(270, 18%, 35%)
CMYK
cmyk(9%, 18%, 0%, 65%)
Oklch
oklch(41.6% 0.028 307.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8BCBF
BEAAA7

Analogous

A7BEB6
A8BCBF
A7AFBE

Triadic

A8BCBF
BEA7BB
BBBEA7

Split-Comp.

A8BCBF
BEA7AF
BEB6A7

Tetradic

A8BCBF
B6A7BE
BEAAA7
AFBEA7

Contrast Matrix WCAG 2.1 Contrast

A8BCBF
B7B8AB
C1A099
A54B79
504858
—
1.0
Fail
1.2
Fail
2.7
Fail
4.4
AA Large
1.0
Fail
—
1.2
Fail
2.7
Fail
4.3
AA Large
1.2
Fail
1.2
Fail
—
2.3
Fail
3.6
AA Large
2.7
Fail
2.7
Fail
2.3
Fail
—
1.6
Fail
4.4
AA Large
4.3
AA Large
3.6
AA Large
1.6
Fail
—
White BG
2.0Fail
2.0Fail
2.4Fail
5.4AA
8.7AAA
Black BG
10.6AAA
10.5AAA
8.8AAA
3.9AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1BE
B7B7AE
B3B29B
7E7D6E
4D4C54

Deuteranopia

B0AEBE
B7B7AF
B5B79B
838A6B
4D4E53

Tritanopia

A9BEBE
B7B1B1
BF9C9C
A16563
505150

Achromatopsia

B6B6B6
B6B6B6
A9A9A9
6B6B6B
4C4C4C

Shades & Tints Shades & Tints

#A8BCBF

Dark
Light

#B7B8AB

Dark
Light

#C1A099

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8bcbf;
  --color-2: #b7b8ab;
  --color-3: #c1a099;
  --color-4: #a54b79;
  --color-5: #504858;
}

SCSS

$color-1: #a8bcbf;
$color-2: #b7b8ab;
$color-3: #c1a099;
$color-4: #a54b79;
$color-5: #504858;

TAILWIND

colors: {
  'brand-1': '#a8bcbf',
  'brand-2': '#b7b8ab',
  'brand-3': '#c1a099',
  'brand-4': '#a54b79',
  'brand-5': '#504858',
}

RGB Array

[168, 188, 191], [183, 184, 171], [193, 160, 153], [165, 75, 121], [80, 72, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8BCBF, #B7B8AB, #C1A099, #A54B79, #504858 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: #a8bcbf; --color-2: #b7b8ab; --color-3: #c1a099; --color-4: #a54b79; --color-5: #504858. 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