Silver

#B9BBCF

Blue

Color Codes

All color formats for development

HEX
#B9BBCF
RGB
rgb(185, 187, 207)
HSL
hsl(235, 19%, 77%)
OKLCH
oklch(0.797 0.028 281.2)
CMYK
cmyk(11%, 10%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.90:1

AA AAA

On Black Background

11.07:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F6
100
#EAEA
200
#D8D9
300
#B9BB
400
#9598
500
#767A
600
#5B5E
700
#484B
800
#3436
900
#2122
950
#1515

Shades

Darker variations

1#A2A4C0
2#8A8EB0
3#7377A0
4#5F638C
5#505375
6#40425D
7#303246
8#20212F
9#101117

Tints

Lighter variations

1#C0C2D4
2#C7C9D9
3#CECFDE
4#D5D6E2
5#DCDDE7
6#E3E4EC
7#EAEBF1
8#F1F1F5
9#F8F8FA

Tones

Muted variations

1#BABCCE
2#BBBDCD
3#BDBECC
4#BEBFCB
5#BFC0CA
6#C0C1C9
7#C1C2C8
8#C2C2C7
9#C3C3C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F6
#F6F6F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEA
#EAEAF1
Light backgroundsTable row hoverSkeleton loading
200
D8D9
#D8D9E4
Secondary backgroundsInput backgroundsDividers
300
B9BB
#B9BBCF
BordersInactive statesPlaceholder text
400
9598
#9598B7
Disabled statesSecondary iconsMuted text
500
767A
#767AA2
Primary brand colorCTAsActive elementsLinks
600
5B5E
#5B5E86
Hover statesFocus ringsPrimary buttons hover
700
484B
#484B6A
Active/pressed statesDark mode accentsSecondary text
800
3436
#34364C
Text on light backgroundsHeadingsStrong borders
900
2122
#212231
Primary textHigh emphasis contentDark headings
950
1515
#15151E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F6F9;
  --silver-100: #EAEAF1;
  --silver-200: #D8D9E4;
  --silver-300: #B9BBCF;
  --silver-400: #9598B7;
  --silver-500: #767AA2;
  --silver-600: #5B5E86;
  --silver-700: #484B6A;
  --silver-800: #34364C;
  --silver-900: #212231;
  --silver-950: #15151E;
}
Generate More ShadesCreate PaletteConvert Color