← Back to Editor

#B7A7BB · #B3BBC6 · #AECED0 · #DDE3DF · #534550

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

WorkspaceReadingData Visualization

Color Details Color Details

#B7A7BB

Lilac · DarkGray · Lilac Purple

HEX
#B7A7BB
RGB
rgb(183, 167, 187)
HSL
hsl(288, 13%, 69%)
HSB
hsb(288, 11%, 73%)
CMYK
cmyk(2%, 11%, 0%, 27%)
Oklch
oklch(74.8% 0.033 319.5)

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

#B3BBC6

Azure · Silver · Cobalt Blue

HEX
#B3BBC6
RGB
rgb(179, 187, 198)
HSL
hsl(215, 14%, 74%)
HSB
hsb(215, 10%, 78%)
CMYK
cmyk(10%, 6%, 0%, 22%)
Oklch
oklch(78.9% 0.018 256.3)

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

#AECED0

Sky Blue · LightSteelBlue · Lake Green

HEX
#AECED0
RGB
rgb(174, 206, 208)
HSL
hsl(184, 27%, 75%)
HSB
hsb(184, 16%, 82%)
CMYK
cmyk(16%, 1%, 0%, 18%)
Oklch
oklch(82.9% 0.034 201.2)

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

#DDE3DF

Celadon · LightGray · Mint Green

HEX
#DDE3DF
RGB
rgb(221, 227, 223)
HSL
hsl(140, 10%, 88%)
HSB
hsb(140, 3%, 89%)
CMYK
cmyk(3%, 0%, 2%, 11%)
Oklch
oklch(91.0% 0.008 157.1)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#534550

Rose Purple · DarkSlateGray · Charcoal

HEX
#534550
RGB
rgb(83, 69, 80)
HSL
hsl(313, 9%, 30%)
HSB
hsb(313, 17%, 33%)
CMYK
cmyk(0%, 17%, 4%, 67%)
Oklch
oklch(40.9% 0.026 333.5)

Traditional「Rose Purple」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7A7BB
AABAA6

Analogous

ACA6BA
B7A7BB
BAA6B4

Triadic

B7A7BB
BAB6A6
A6BAB6

Split-Comp.

B7A7BB
B4BAA6
A6BAAC

Tetradic

B7A7BB
BAACA6
AABAA6
A6B4BA

Contrast Matrix WCAG 2.1 Contrast

B7A7BB
B3BBC6
AECED0
DDE3DF
534550
—
1.2
Fail
1.4
Fail
1.7
Fail
4.0
AA Large
1.2
Fail
—
1.2
Fail
1.5
Fail
4.6
AA
1.4
Fail
1.2
Fail
—
1.3
Fail
5.4
AA
1.7
Fail
1.5
Fail
1.3
Fail
—
6.9
AA
4.0
AA Large
4.6
AA
5.4
AA
6.9
AA
—
White BG
2.3Fail
1.9Fail
1.7Fail
1.3Fail
9.0AAA
Black BG
9.3AAA
10.8AAA
12.5AAA
16.1AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0B6
B6B7C3
BCBCD0
E0E0E0
4D4D4D

Deuteranopia

B1B2B5
B6B5C3
BAB8CF
DFDFE0
4E4F4D

Tritanopia

B6B2B2
B3C1C1
B0CFCF
DDE1E1
524B4B

Achromatopsia

AEAEAE
BABABA
C5C5C5
E1E1E1
4A4A4A

Shades & Tints Shades & Tints

#B7A7BB

Dark
Light

#B3BBC6

Dark
Light

#AECED0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7a7bb;
  --color-2: #b3bbc6;
  --color-3: #aeced0;
  --color-4: #dde3df;
  --color-5: #534550;
}

SCSS

$color-1: #b7a7bb;
$color-2: #b3bbc6;
$color-3: #aeced0;
$color-4: #dde3df;
$color-5: #534550;

TAILWIND

colors: {
  'brand-1': '#b7a7bb',
  'brand-2': '#b3bbc6',
  'brand-3': '#aeced0',
  'brand-4': '#dde3df',
  'brand-5': '#534550',
}

RGB Array

[183, 167, 187], [179, 187, 198], [174, 206, 208], [221, 227, 223], [83, 69, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7A7BB, #B3BBC6, #AECED0, #DDE3DF, #534550 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #b7a7bb; --color-2: #b3bbc6; --color-3: #aeced0; --color-4: #dde3df; --color-5: #534550. 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. 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 beauty, lifestyle, arts 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