← Back to Editor

#B1B1CB · #646EB6 · #5C437E · #3B2937 · #A9BC58

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

#B1B1CB

Wisteria · Silver · Cobalt Blue

HEX
#B1B1CB
RGB
rgb(177, 177, 203)
HSL
hsl(240, 20%, 75%)
HSB
hsb(240, 13%, 80%)
CMYK
cmyk(13%, 13%, 0%, 20%)
Oklch
oklch(76.9% 0.037 285.5)

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

#646EB6

Azure · SlateBlue · Navy Blue

HEX
#646EB6
RGB
rgb(100, 110, 182)
HSL
hsl(233, 36%, 55%)
HSB
hsb(233, 45%, 71%)
CMYK
cmyk(45%, 40%, 0%, 29%)
Oklch
oklch(56.2% 0.112 276.2)

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

#5C437E

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#5C437E
RGB
rgb(92, 67, 126)
HSL
hsl(265, 31%, 38%)
HSB
hsb(265, 47%, 49%)
CMYK
cmyk(27%, 47%, 0%, 51%)
Oklch
oklch(43.7% 0.098 302.1)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#3B2937

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3B2937
RGB
rgb(59, 41, 55)
HSL
hsl(313, 18%, 20%)
HSB
hsb(313, 31%, 23%)
CMYK
cmyk(0%, 31%, 7%, 77%)
Oklch
oklch(30.8% 0.035 334.5)

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

#A9BC58

Grass Green · DarkSeaGreen · Olive Green

HEX
#A9BC58
RGB
rgb(169, 188, 88)
HSL
hsl(71, 43%, 54%)
HSB
hsb(71, 53%, 74%)
CMYK
cmyk(10%, 0%, 53%, 26%)
Oklch
oklch(76.0% 0.128 118.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1B1CB
CCCCB3

Analogous

B3BFCC
B1B1CB
BFB3CC

Triadic

B1B1CB
CCB3B3
B3CCB3

Split-Comp.

B1B1CB
CCBFB3
BFCCB3

Tetradic

B1B1CB
CCB3BF
CCCCB3
B3CCBF

Contrast Matrix WCAG 2.1 Contrast

B1B1CB
646EB6
5C437E
3B2937
A9BC58
—
2.3
Fail
3.9
AA Large
6.4
AA
1.0
Fail
2.3
Fail
—
1.7
Fail
2.9
Fail
2.3
Fail
3.9
AA Large
1.7
Fail
—
1.6
Fail
3.9
AA Large
6.4
AA
2.9
Fail
1.6
Fail
—
6.4
AA
1.0
Fail
2.3
Fail
3.9
AA Large
6.4
AA
—
White BG
2.1Fail
4.7AA
8.2AAA
13.5AAA
2.1Fail
Black BG
10.0AAA
4.4AA Large
2.6Fail
1.6Fail
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1C5
6868A5
515170
333334
B1B170

Deuteranopia

B1B1C3
6867A0
53546C
343633
B0AF76

Tritanopia

B1C0BF
659794
5B6462
3A3130
AA8388

Achromatopsia

B4B4B4
737373
515151
303030
ABABAB

Shades & Tints Shades & Tints

#B1B1CB

Dark
Light

#646EB6

Dark
Light

#5C437E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1b1cb;
  --color-2: #646eb6;
  --color-3: #5c437e;
  --color-4: #3b2937;
  --color-5: #a9bc58;
}

SCSS

$color-1: #b1b1cb;
$color-2: #646eb6;
$color-3: #5c437e;
$color-4: #3b2937;
$color-5: #a9bc58;

TAILWIND

colors: {
  'brand-1': '#b1b1cb',
  'brand-2': '#646eb6',
  'brand-3': '#5c437e',
  'brand-4': '#3b2937',
  'brand-5': '#a9bc58',
}

RGB Array

[177, 177, 203], [100, 110, 182], [92, 67, 126], [59, 41, 55], [169, 188, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1B1CB, #646EB6, #5C437E, #3B2937, #A9BC58 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: #b1b1cb; --color-2: #646eb6; --color-3: #5c437e; --color-4: #3b2937; --color-5: #a9bc58. 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