← Back to Editor

#BDCBD9 · #90A1B0 · #6A7885 · #705268 · #54283F

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 LibraryData Visualization

Color Details Color Details

#BDCBD9

Azure · LightSteelBlue · Cobalt Blue

HEX
#BDCBD9
RGB
rgb(189, 203, 217)
HSL
hsl(210, 27%, 80%)
HSB
hsb(210, 13%, 85%)
CMYK
cmyk(13%, 6%, 0%, 15%)
Oklch
oklch(83.6% 0.025 248.1)

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

#90A1B0

Sky Blue · DarkGray · Cobalt Blue

HEX
#90A1B0
RGB
rgb(144, 161, 176)
HSL
hsl(208, 17%, 63%)
HSB
hsb(208, 18%, 69%)
CMYK
cmyk(18%, 9%, 0%, 31%)
Oklch
oklch(70.1% 0.029 244.8)

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

#6A7885

Slate Blue · SlateGray · Navy Blue

HEX
#6A7885
RGB
rgb(106, 120, 133)
HSL
hsl(209, 11%, 47%)
HSB
hsb(209, 20%, 52%)
CMYK
cmyk(20%, 10%, 0%, 48%)
Oklch
oklch(56.6% 0.026 246.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#705268

Rose Purple · DimGray · Eggplant

HEX
#705268
RGB
rgb(112, 82, 104)
HSL
hsl(316, 15%, 38%)
HSB
hsb(316, 27%, 44%)
CMYK
cmyk(0%, 27%, 7%, 56%)
Oklch
oklch(47.8% 0.052 336.3)

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

#54283F

Rose Purple · DarkSlateGray · Raspberry

HEX
#54283F
RGB
rgb(84, 40, 63)
HSL
hsl(329, 35%, 24%)
HSB
hsb(329, 52%, 33%)
CMYK
cmyk(0%, 52%, 25%, 67%)
Oklch
oklch(34.4% 0.072 349.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDCBD9
DACCBE

Analogous

BEDADA
BDCBD9
BEBEDA

Triadic

BDCBD9
DABECC
CCDABE

Split-Comp.

BDCBD9
DABEBE
DADABE

Tetradic

BDCBD9
DABEDA
DACCBE
BEDABE

Contrast Matrix WCAG 2.1 Contrast

BDCBD9
90A1B0
6A7885
705268
54283F
—
1.6
Fail
2.7
Fail
4.1
AA Large
7.3
AAA
1.6
Fail
—
1.7
Fail
2.6
Fail
4.5
AA
2.7
Fail
1.7
Fail
—
1.5
Fail
2.6
Fail
4.1
AA Large
2.6
Fail
1.5
Fail
—
1.8
Fail
7.3
AAA
4.5
AA
2.6
Fail
1.8
Fail
—
White BG
1.7Fail
2.7Fail
4.5AA
6.8AA
12.0AAA
Black BG
12.7AAA
7.9AAA
4.6AA
3.1AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3D6
9798AC
707082
636363
414139

Deuteranopia

C2C1D5
9695AC
6F6E81
656761
444738

Tritanopia

BED3D2
91AAA9
6B7F7F
6E5E5E
523534

Achromatopsia

C8C8C8
9E9E9E
757575
5D5D5D
383838

Shades & Tints Shades & Tints

#BDCBD9

Dark
Light

#90A1B0

Dark
Light

#6A7885

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdcbd9;
  --color-2: #90a1b0;
  --color-3: #6a7885;
  --color-4: #705268;
  --color-5: #54283f;
}

SCSS

$color-1: #bdcbd9;
$color-2: #90a1b0;
$color-3: #6a7885;
$color-4: #705268;
$color-5: #54283f;

TAILWIND

colors: {
  'brand-1': '#bdcbd9',
  'brand-2': '#90a1b0',
  'brand-3': '#6a7885',
  'brand-4': '#705268',
  'brand-5': '#54283f',
}

RGB Array

[189, 203, 217], [144, 161, 176], [106, 120, 133], [112, 82, 104], [84, 40, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BDCBD9, #90A1B0, #6A7885, #705268, #54283F 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: #bdcbd9; --color-2: #90a1b0; --color-3: #6a7885; --color-4: #705268; --color-5: #54283f. 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