← Back to Editor

#4A4653 · #AF7EB5 · #BDB6D1 · #BFCFDB · #CBDEE0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#4A4653

Deep Indigo · DarkSlateGray · Charcoal

HEX
#4A4653
RGB
rgb(74, 70, 83)
HSL
hsl(258, 8%, 30%)
HSB
hsb(258, 16%, 33%)
CMYK
cmyk(11%, 16%, 0%, 67%)
Oklch
oklch(40.3% 0.022 299.5)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#AF7EB5

Dark Plum · DarkGray · Violet

HEX
#AF7EB5
RGB
rgb(175, 126, 181)
HSL
hsl(293, 27%, 60%)
HSB
hsb(293, 30%, 71%)
CMYK
cmyk(3%, 30%, 0%, 29%)
Oklch
oklch(66.1% 0.097 322.8)

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

#BDB6D1

Wisteria · Silver · Cobalt Blue

HEX
#BDB6D1
RGB
rgb(189, 182, 209)
HSL
hsl(256, 23%, 77%)
HSB
hsb(256, 13%, 82%)
CMYK
cmyk(10%, 13%, 0%, 18%)
Oklch
oklch(79.1% 0.039 297.4)

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

#BFCFDB

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#BFCFDB
RGB
rgb(191, 207, 219)
HSL
hsl(206, 28%, 80%)
HSB
hsb(206, 13%, 86%)
CMYK
cmyk(13%, 5%, 0%, 14%)
Oklch
oklch(84.6% 0.024 240.1)

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

#CBDEE0

Sky Blue · LightGray · Glacier Blue

HEX
#CBDEE0
RGB
rgb(203, 222, 224)
HSL
hsl(186, 25%, 84%)
HSB
hsb(186, 9%, 88%)
CMYK
cmyk(9%, 1%, 0%, 12%)
Oklch
oklch(88.7% 0.021 204.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A4653
4F5346

Analogous

464953
4A4653
504653

Triadic

4A4653
534A46
46534A

Split-Comp.

4A4653
535046
495346

Tetradic

4A4653
534649
4F5346
465350

Contrast Matrix WCAG 2.1 Contrast

4A4653
AF7EB5
BDB6D1
BFCFDB
CBDEE0
—
2.8
Fail
4.7
AA
5.7
AA
6.6
AA
2.8
Fail
—
1.7
Fail
2.0
Fail
2.3
Fail
4.7
AA
1.7
Fail
—
1.2
Fail
1.4
Fail
5.7
AA
2.0
Fail
1.2
Fail
—
1.1
Fail
6.6
AA
2.3
Fail
1.4
Fail
1.1
Fail
—
White BG
9.2AAA
3.2AA Large
1.9Fail
1.6Fail
1.4Fail
Black BG
2.3Fail
6.5AA
10.8AAA
13.2AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484850
9A99A8
BABACA
C6C6D8
D3D3E0

Deuteranopia

49494F
9DA0A5
BABBC9
C5C4D7
D2D1DF

Tritanopia

4A4D4D
AD9D9B
BDC5C4
C0D6D5
CCDFDF

Achromatopsia

494949
939393
BBBBBB
CCCCCC
D9D9D9

Shades & Tints Shades & Tints

#4A4653

Dark
Light

#AF7EB5

Dark
Light

#BDB6D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a4653;
  --color-2: #af7eb5;
  --color-3: #bdb6d1;
  --color-4: #bfcfdb;
  --color-5: #cbdee0;
}

SCSS

$color-1: #4a4653;
$color-2: #af7eb5;
$color-3: #bdb6d1;
$color-4: #bfcfdb;
$color-5: #cbdee0;

TAILWIND

colors: {
  'brand-1': '#4a4653',
  'brand-2': '#af7eb5',
  'brand-3': '#bdb6d1',
  'brand-4': '#bfcfdb',
  'brand-5': '#cbdee0',
}

RGB Array

[74, 70, 83], [175, 126, 181], [189, 182, 209], [191, 207, 219], [203, 222, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A4653, #AF7EB5, #BDB6D1, #BFCFDB, #CBDEE0 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: #4a4653; --color-2: #af7eb5; --color-3: #bdb6d1; --color-4: #bfcfdb; --color-5: #cbdee0. 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