← Back to Editor

#B9C7CA · #B9BECF · #AFAFBD · #86939B · #767986

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

WorkspaceReading

Color Details Color Details

#B9C7CA

Sky Blue · Silver · Glacier Blue

HEX
#B9C7CA
RGB
rgb(185, 199, 202)
HSL
hsl(191, 14%, 76%)
HSB
hsb(191, 8%, 79%)
CMYK
cmyk(8%, 1%, 0%, 21%)
Oklch
oklch(82.0% 0.016 212.0)

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

#B9BECF

Azure · Silver · Cobalt Blue

HEX
#B9BECF
RGB
rgb(185, 190, 207)
HSL
hsl(226, 19%, 77%)
HSB
hsb(226, 11%, 81%)
CMYK
cmyk(11%, 8%, 0%, 19%)
Oklch
oklch(80.3% 0.025 272.8)

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

#AFAFBD

Wisteria · DarkGray · Cobalt Blue

HEX
#AFAFBD
RGB
rgb(175, 175, 189)
HSL
hsl(240, 10%, 71%)
HSB
hsb(240, 7%, 74%)
CMYK
cmyk(7%, 7%, 0%, 26%)
Oklch
oklch(75.8% 0.020 285.9)

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

#86939B

Slate Blue · LightSlateGray · Navy Blue

HEX
#86939B
RGB
rgb(134, 147, 155)
HSL
hsl(203, 10%, 57%)
HSB
hsb(203, 14%, 61%)
CMYK
cmyk(14%, 5%, 0%, 39%)
Oklch
oklch(65.5% 0.019 234.7)

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

#767986

Ink Gray · Gray · Warm Gray

HEX
#767986
RGB
rgb(118, 121, 134)
HSL
hsl(229, 6%, 49%)
HSB
hsb(229, 12%, 53%)
CMYK
cmyk(12%, 10%, 0%, 47%)
Oklch
oklch(57.8% 0.020 275.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9C7CA
CABCB9

Analogous

B9CAC5
B9C7CA
B9BFCA

Triadic

B9C7CA
CAB9C7
C7CAB9

Split-Comp.

B9C7CA
CAB9BF
CAC5B9

Tetradic

B9C7CA
C5B9CA
CABCB9
BFCAB9

Contrast Matrix WCAG 2.1 Contrast

B9C7CA
B9BECF
AFAFBD
86939B
767986
—
1.1
Fail
1.2
Fail
1.8
Fail
2.5
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
2.3
Fail
1.2
Fail
1.2
Fail
—
1.5
Fail
2.0
Fail
1.8
Fail
1.7
Fail
1.5
Fail
—
1.4
Fail
2.5
Fail
2.3
Fail
2.0
Fail
1.4
Fail
—
White BG
1.7Fail
1.9Fail
2.2Fail
3.2AA Large
4.3AA Large
Black BG
12.1AAA
11.3AAA
9.7AAA
6.7AA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFC9
BBBBCB
AFAFBA
8C8C99
777783

Deuteranopia

BEBDC9
BBBBCA
AFAFB9
8B8A99
777782

Tritanopia

BAC9C9
B9C8C7
AFB7B6
879897
768080

Achromatopsia

C3C3C3
BEBEBE
B1B1B1
909090
7A7A7A

Shades & Tints Shades & Tints

#B9C7CA

Dark
Light

#B9BECF

Dark
Light

#AFAFBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9c7ca;
  --color-2: #b9becf;
  --color-3: #afafbd;
  --color-4: #86939b;
  --color-5: #767986;
}

SCSS

$color-1: #b9c7ca;
$color-2: #b9becf;
$color-3: #afafbd;
$color-4: #86939b;
$color-5: #767986;

TAILWIND

colors: {
  'brand-1': '#b9c7ca',
  'brand-2': '#b9becf',
  'brand-3': '#afafbd',
  'brand-4': '#86939b',
  'brand-5': '#767986',
}

RGB Array

[185, 199, 202], [185, 190, 207], [175, 175, 189], [134, 147, 155], [118, 121, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9C7CA, #B9BECF, #AFAFBD, #86939B, #767986 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #b9c7ca; --color-2: #b9becf; --color-3: #afafbd; --color-4: #86939b; --color-5: #767986. 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. 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