← Back to Editor

#BFDAE4 · #B6BACC · #B393BC · #A876AC · #5B4C60

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#BFDAE4

Sky Blue · LightBlue · Glacier Blue

HEX
#BFDAE4
RGB
rgb(191, 218, 228)
HSL
hsl(196, 41%, 82%)
HSB
hsb(196, 16%, 89%)
CMYK
cmyk(16%, 4%, 0%, 11%)
Oklch
oklch(87.2% 0.032 222.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#B6BACC

Azure · Silver · Cobalt Blue

HEX
#B6BACC
RGB
rgb(182, 186, 204)
HSL
hsl(229, 18%, 76%)
HSB
hsb(229, 11%, 80%)
CMYK
cmyk(11%, 9%, 0%, 20%)
Oklch
oklch(79.1% 0.026 275.8)

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

#B393BC

Lilac · DarkGray · Lilac Purple

HEX
#B393BC
RGB
rgb(179, 147, 188)
HSL
hsl(287, 23%, 66%)
HSB
hsb(287, 22%, 74%)
CMYK
cmyk(5%, 22%, 0%, 26%)
Oklch
oklch(70.6% 0.069 318.7)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#A876AC

Dark Plum · DarkGray · Violet

HEX
#A876AC
RGB
rgb(168, 118, 172)
HSL
hsl(296, 25%, 57%)
HSB
hsb(296, 31%, 67%)
CMYK
cmyk(2%, 31%, 0%, 33%)
Oklch
oklch(63.5% 0.097 324.1)

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

#5B4C60

Dark Plum · DimGray · Eggplant

HEX
#5B4C60
RGB
rgb(91, 76, 96)
HSL
hsl(285, 12%, 34%)
HSB
hsb(285, 21%, 38%)
CMYK
cmyk(5%, 21%, 0%, 62%)
Oklch
oklch(43.9% 0.037 317.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFDAE4
E4C8BE

Analogous

BEE4DB
BFDAE4
BEC7E4

Triadic

BFDAE4
E4BEDA
DAE4BE

Split-Comp.

BFDAE4
E4BEC7
E4DBBE

Tetradic

BFDAE4
DBBEE4
E4C8BE
C7E4BE

Contrast Matrix WCAG 2.1 Contrast

BFDAE4
B6BACC
B393BC
A876AC
5B4C60
—
1.3
Fail
1.8
Fail
2.5
Fail
5.4
AA
1.3
Fail
—
1.4
Fail
1.9
Fail
4.1
AA Large
1.8
Fail
1.4
Fail
—
1.3
Fail
3.0
Fail
2.5
Fail
1.9
Fail
1.3
Fail
—
2.2
Fail
5.4
AA
4.1
AA Large
3.0
Fail
2.2
Fail
—
White BG
1.5Fail
1.9Fail
2.7Fail
3.6AA Large
7.9AAA
Black BG
14.4AAA
10.9AAA
7.8AAA
5.9AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBE2
B8B8C8
A5A5B2
92929F
55545B

Deuteranopia

C9C7E1
B8B7C7
A7A9B0
95999C
55575A

Tritanopia

C0E0DF
B6C4C3
B1AAA9
A69592
5A5757

Achromatopsia

D3D3D3
BBBBBB
A1A1A1
8B8B8B
535353

Shades & Tints Shades & Tints

#BFDAE4

Dark
Light

#B6BACC

Dark
Light

#B393BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfdae4;
  --color-2: #b6bacc;
  --color-3: #b393bc;
  --color-4: #a876ac;
  --color-5: #5b4c60;
}

SCSS

$color-1: #bfdae4;
$color-2: #b6bacc;
$color-3: #b393bc;
$color-4: #a876ac;
$color-5: #5b4c60;

TAILWIND

colors: {
  'brand-1': '#bfdae4',
  'brand-2': '#b6bacc',
  'brand-3': '#b393bc',
  'brand-4': '#a876ac',
  'brand-5': '#5b4c60',
}

RGB Array

[191, 218, 228], [182, 186, 204], [179, 147, 188], [168, 118, 172], [91, 76, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFDAE4, #B6BACC, #B393BC, #A876AC, #5B4C60 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #bfdae4; --color-2: #b6bacc; --color-3: #b393bc; --color-4: #a876ac; --color-5: #5b4c60. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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