Silver

#B9C1CF

Blue

Color Codes

All color formats for development

HEX
#B9C1CF
RGB
rgb(185, 193, 207)
HSL
hsl(218, 19%, 77%)
OKLCH
oklch(0.809 0.022 261.8)
CMYK
cmyk(11%, 7%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.81:1

AA AAA

On Black Background

11.59:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEC
200
#D8DC
300
#B9C1
400
#95A1
500
#7686
600
#5B6B
700
#4855
800
#343D
900
#2127
950
#1518

Shades

Darker variations

1#A2ADC0
2#8A98B0
3#7383A0
4#5F708C
5#505D75
6#404B5D
7#303846
8#20252F
9#101317

Tints

Lighter variations

1#C0C8D4
2#C7CED9
3#CED4DE
4#D5DAE2
5#DCE0E7
6#E3E6EC
7#EAEDF1
8#F1F3F5
9#F8F9FA

Tones

Muted variations

1#BAC2CE
2#BBC2CD
3#BDC2CC
4#BEC3CB
5#BFC3CA
6#C0C3C9
7#C1C3C8
8#C2C4C7
9#C3C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEC
#EAECF1
Light backgroundsTable row hoverSkeleton loading
200
D8DC
#D8DCE4
Secondary backgroundsInput backgroundsDividers
300
B9C1
#B9C1CF
BordersInactive statesPlaceholder text
400
95A1
#95A1B7
Disabled statesSecondary iconsMuted text
500
7686
#7686A2
Primary brand colorCTAsActive elementsLinks
600
5B6B
#5B6B86
Hover statesFocus ringsPrimary buttons hover
700
4855
#48556A
Active/pressed statesDark mode accentsSecondary text
800
343D
#343D4C
Text on light backgroundsHeadingsStrong borders
900
2127
#212731
Primary textHigh emphasis contentDark headings
950
1518
#15181E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAECF1;
  --silver-200: #D8DCE4;
  --silver-300: #B9C1CF;
  --silver-400: #95A1B7;
  --silver-500: #7686A2;
  --silver-600: #5B6B86;
  --silver-700: #48556A;
  --silver-800: #343D4C;
  --silver-900: #212731;
  --silver-950: #15181E;
}
Generate More ShadesCreate PaletteConvert Color