Silver

#B9C2D0

Blue

Color Codes

All color formats for development

HEX
#B9C2D0
RGB
rgb(185, 194, 208)
HSL
hsl(217, 20%, 77%)
OKLCH
oklch(0.811 0.022 259.2)
CMYK
cmyk(11%, 7%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.80:1

AA AAA

On Black Background

11.69:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEC
200
#D7DC
300
#B9C2
400
#94A2
500
#7587
600
#5A6B
700
#4755
800
#333D
900
#2127
950
#1418

Shades

Darker variations

1#A1ADC0
2#8999B1
3#7284A1
4#5E708D
5#4F5E76
6#3F4B5E
7#2F3847
8#1F252F
9#101318

Tints

Lighter variations

1#C0C8D5
2#C7CED9
3#CED4DE
4#D5DAE3
5#DCE0E8
6#E3E6EC
7#EAEDF1
8#F1F3F6
9#F8F9FA

Tones

Muted variations

1#BAC2CF
2#BBC2CE
3#BCC2CD
4#BDC3CB
5#BEC3CA
6#C0C3C9
7#C1C4C8
8#C2C4C7
9#C3C4C6

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
D7DC
#D7DCE4
Secondary backgroundsInput backgroundsDividers
300
B9C2
#B9C2D0
BordersInactive statesPlaceholder text
400
94A2
#94A2B8
Disabled statesSecondary iconsMuted text
500
7587
#7587A3
Primary brand colorCTAsActive elementsLinks
600
5A6B
#5A6B87
Hover statesFocus ringsPrimary buttons hover
700
4755
#47556B
Active/pressed statesDark mode accentsSecondary text
800
333D
#333D4D
Text on light backgroundsHeadingsStrong borders
900
2127
#212731
Primary textHigh emphasis contentDark headings
950
1418
#14181F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAECF1;
  --silver-200: #D7DCE4;
  --silver-300: #B9C2D0;
  --silver-400: #94A2B8;
  --silver-500: #7587A3;
  --silver-600: #5A6B87;
  --silver-700: #47556B;
  --silver-800: #333D4D;
  --silver-900: #212731;
  --silver-950: #14181F;
}
Generate More ShadesCreate PaletteConvert Color