Silver

#B9BECF

Blue

Color Codes

All color formats for development

HEX
#B9BECF
RGB
rgb(185, 190, 207)
HSL
hsl(226, 19%, 77%)
OKLCH
oklch(0.803 0.025 272.8)
CMYK
cmyk(11%, 8%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.85:1

AA AAA

On Black Background

11.33:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEB
200
#D8DA
300
#B9BE
400
#959D
500
#7681
600
#5B65
700
#4850
800
#3439
900
#2125
950
#1517

Shades

Darker variations

1#A2A9C0
2#8A93B0
3#737EA0
4#5F6A8C
5#505875
6#40475D
7#303546
8#20232F
9#101217

Tints

Lighter variations

1#C0C5D4
2#C7CBD9
3#CED2DE
4#D5D8E2
5#DCDFE7
6#E3E5EC
7#EAECF1
8#F1F2F5
9#F8F9FA

Tones

Muted variations

1#BABFCE
2#BBC0CD
3#BDC0CC
4#BEC1CB
5#BFC1CA
6#C0C2C9
7#C1C3C8
8#C2C3C7
9#C3C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEB
#EAEBF1
Light backgroundsTable row hoverSkeleton loading
200
D8DA
#D8DAE4
Secondary backgroundsInput backgroundsDividers
300
B9BE
#B9BECF
BordersInactive statesPlaceholder text
400
959D
#959DB7
Disabled statesSecondary iconsMuted text
500
7681
#7681A2
Primary brand colorCTAsActive elementsLinks
600
5B65
#5B6586
Hover statesFocus ringsPrimary buttons hover
700
4850
#48506A
Active/pressed statesDark mode accentsSecondary text
800
3439
#34394C
Text on light backgroundsHeadingsStrong borders
900
2125
#212531
Primary textHigh emphasis contentDark headings
950
1517
#15171E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAEBF1;
  --silver-200: #D8DAE4;
  --silver-300: #B9BECF;
  --silver-400: #959DB7;
  --silver-500: #7681A2;
  --silver-600: #5B6586;
  --silver-700: #48506A;
  --silver-800: #34394C;
  --silver-900: #212531;
  --silver-950: #15171E;
}
Generate More ShadesCreate PaletteConvert Color