Silver

#B9BCCF

Blue

Color Codes

All color formats for development

HEX
#B9BCCF
RGB
rgb(185, 188, 207)
HSL
hsl(232, 19%, 77%)
OKLCH
oklch(0.799 0.027 278.6)
CMYK
cmyk(11%, 9%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.88:1

AA AAA

On Black Background

11.16:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F6
100
#EAEB
200
#D8D9
300
#B9BC
400
#9599
500
#767C
600
#5B61
700
#484D
800
#3437
900
#2123
950
#1516

Shades

Darker variations

1#A2A6C0
2#8A8FB0
3#7379A0
4#5F658C
5#505475
6#40445D
7#303346
8#20222F
9#101117

Tints

Lighter variations

1#C0C3D4
2#C7CAD9
3#CED0DE
4#D5D7E2
5#DCDEE7
6#E3E4EC
7#EAEBF1
8#F1F2F5
9#F8F8FA

Tones

Muted variations

1#BABDCE
2#BBBECD
3#BDBFCC
4#BEBFCB
5#BFC0CA
6#C0C1C9
7#C1C2C8
8#C2C3C7
9#C3C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F6
#F6F6F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEB
#EAEBF1
Light backgroundsTable row hoverSkeleton loading
200
D8D9
#D8D9E4
Secondary backgroundsInput backgroundsDividers
300
B9BC
#B9BCCF
BordersInactive statesPlaceholder text
400
9599
#9599B7
Disabled statesSecondary iconsMuted text
500
767C
#767CA2
Primary brand colorCTAsActive elementsLinks
600
5B61
#5B6186
Hover statesFocus ringsPrimary buttons hover
700
484D
#484D6A
Active/pressed statesDark mode accentsSecondary text
800
3437
#34374C
Text on light backgroundsHeadingsStrong borders
900
2123
#212331
Primary textHigh emphasis contentDark headings
950
1516
#15161E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F6F9;
  --silver-100: #EAEBF1;
  --silver-200: #D8D9E4;
  --silver-300: #B9BCCF;
  --silver-400: #9599B7;
  --silver-500: #767CA2;
  --silver-600: #5B6186;
  --silver-700: #484D6A;
  --silver-800: #34374C;
  --silver-900: #212331;
  --silver-950: #15161E;
}
Generate More ShadesCreate PaletteConvert Color