Silver

#B9C0CF

Blue

Color Codes

All color formats for development

HEX
#B9C0CF
RGB
rgb(185, 192, 207)
HSL
hsl(221, 19%, 77%)
OKLCH
oklch(0.807 0.022 265.7)
CMYK
cmyk(11%, 7%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.83:1

AA AAA

On Black Background

11.50:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEC
200
#D8DC
300
#B9C0
400
#95A0
500
#7684
600
#5B68
700
#4853
800
#343B
900
#2126
950
#1518

Shades

Darker variations

1#A2ABC0
2#8A96B0
3#7381A0
4#5F6E8C
5#505B75
6#40495D
7#303746
8#20252F
9#101217

Tints

Lighter variations

1#C0C7D4
2#C7CDD9
3#CED3DE
4#D5D9E2
5#DCE0E7
6#E3E6EC
7#EAECF1
8#F1F2F5
9#F8F9FA

Tones

Muted variations

1#BAC1CE
2#BBC1CD
3#BDC1CC
4#BEC2CB
5#BFC2CA
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
B9C0
#B9C0CF
BordersInactive statesPlaceholder text
400
95A0
#95A0B7
Disabled statesSecondary iconsMuted text
500
7684
#7684A2
Primary brand colorCTAsActive elementsLinks
600
5B68
#5B6886
Hover statesFocus ringsPrimary buttons hover
700
4853
#48536A
Active/pressed statesDark mode accentsSecondary text
800
343B
#343B4C
Text on light backgroundsHeadingsStrong borders
900
2126
#212631
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: #B9C0CF;
  --silver-400: #95A0B7;
  --silver-500: #7684A2;
  --silver-600: #5B6886;
  --silver-700: #48536A;
  --silver-800: #343B4C;
  --silver-900: #212631;
  --silver-950: #15181E;
}
Generate More ShadesCreate PaletteConvert Color