← Back to Editor

#B8C8CF · #7E7F95 · #735A75 · #673449 · #5E0F19

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

#B8C8CF

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B8C8CF
RGB
rgb(184, 200, 207)
HSL
hsl(198, 19%, 77%)
HSB
hsb(198, 11%, 81%)
CMYK
cmyk(11%, 3%, 0%, 19%)
Oklch
oklch(82.3% 0.020 225.8)

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

#7E7F95

Azure · LightSlateGray · Navy Blue

HEX
#7E7F95
RGB
rgb(126, 127, 149)
HSL
hsl(237, 10%, 54%)
HSB
hsb(237, 15%, 58%)
CMYK
cmyk(15%, 15%, 0%, 42%)
Oklch
oklch(60.3% 0.033 283.3)

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

#735A75

Dark Plum · DimGray · Violet

HEX
#735A75
RGB
rgb(115, 90, 117)
HSL
hsl(296, 13%, 41%)
HSB
hsb(296, 23%, 46%)
CMYK
cmyk(2%, 23%, 0%, 54%)
Oklch
oklch(50.3% 0.052 323.9)

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

#673449

Dark Violet · DimGray · Camellia

HEX
#673449
RGB
rgb(103, 52, 73)
HSL
hsl(335, 33%, 30%)
HSB
hsb(335, 50%, 40%)
CMYK
cmyk(0%, 50%, 29%, 60%)
Oklch
oklch(39.8% 0.078 355.1)

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

#5E0F19

Vermilion · Maroon · Wine Red

HEX
#5E0F19
RGB
rgb(94, 15, 25)
HSL
hsl(352, 72%, 21%)
HSB
hsb(352, 84%, 37%)
CMYK
cmyk(0%, 84%, 73%, 63%)
Oklch
oklch(31.7% 0.111 20.0)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8C8CF
CFC0B9

Analogous

B9CFCB
B8C8CF
B9BECF

Triadic

B8C8CF
CFB9C9
C9CFB9

Split-Comp.

B8C8CF
CFB9BE
CFCBB9

Tetradic

B8C8CF
CBB9CF
CFC0B9
BECFB9

Contrast Matrix WCAG 2.1 Contrast

B8C8CF
7E7F95
735A75
673449
5E0F19
—
2.3
Fail
3.5
AA Large
5.6
AA
7.8
AAA
2.3
Fail
—
1.6
Fail
2.5
Fail
3.4
AA Large
3.5
AA Large
1.6
Fail
—
1.6
Fail
2.2
Fail
5.6
AA
2.5
Fail
1.6
Fail
—
1.4
Fail
7.8
AAA
3.4
AA Large
2.2
Fail
1.4
Fail
—
White BG
1.7Fail
3.9AA Large
6.1AA
9.7AAA
13.5AAA
Black BG
12.2AAA
5.4AA
3.4AA Large
2.2Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFCD
7E7E90
68686E
515044
3C3B17

Deuteranopia

BEBDCD
7E7E8E
6A6C6D
545843
404616

Tritanopia

B9CCCC
7E8B8B
726968
64403F
5A1514

Achromatopsia

C4C4C4
818181
656565
464646
282828

Shades & Tints Shades & Tints

#B8C8CF

Dark
Light

#7E7F95

Dark
Light

#735A75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8c8cf;
  --color-2: #7e7f95;
  --color-3: #735a75;
  --color-4: #673449;
  --color-5: #5e0f19;
}

SCSS

$color-1: #b8c8cf;
$color-2: #7e7f95;
$color-3: #735a75;
$color-4: #673449;
$color-5: #5e0f19;

TAILWIND

colors: {
  'brand-1': '#b8c8cf',
  'brand-2': '#7e7f95',
  'brand-3': '#735a75',
  'brand-4': '#673449',
  'brand-5': '#5e0f19',
}

RGB Array

[184, 200, 207], [126, 127, 149], [115, 90, 117], [103, 52, 73], [94, 15, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8C8CF, #7E7F95, #735A75, #673449, #5E0F19 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: #b8c8cf; --color-2: #7e7f95; --color-3: #735a75; --color-4: #673449; --color-5: #5e0f19. 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