Silver

#BEBFCB

Blue

Color Codes

All color formats for development

HEX
#BEBFCB
RGB
rgb(190, 191, 203)
HSL
hsl(235, 11%, 77%)
OKLCH
oklch(0.808 0.017 282.2)
CMYK
cmyk(6%, 6%, 0%, 20%)

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
#F7F7
100
#EBEC
200
#DADB
300
#BEBF
400
#9C9E
500
#8082
600
#6466
700
#4F51
800
#393A
900
#2425
950
#1717

Shades

Darker variations

1#A8AAB9
2#9294A8
3#7D7F96
4#696B83
5#57596D
6#464757
7#343641
8#23242C
9#111216

Tints

Lighter variations

1#C4C5D0
2#CBCCD5
3#D1D2DA
4#D8D9E0
5#DEDFE5
6#E5E5EA
7#EBECEF
8#F2F2F5
9#F8F9FA

Tones

Muted variations

1#BFC0CA
2#BFC0CA
3#C0C1C9
4#C0C1C8
5#C1C2C8
6#C2C2C7
7#C2C3C6
8#C3C3C6
9#C4C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F7
#F7F7F8
BackgroundsSubtle highlightsCard backgrounds
100
EBEC
#EBECEF
Light backgroundsTable row hoverSkeleton loading
200
DADB
#DADBE1
Secondary backgroundsInput backgroundsDividers
300
BEBF
#BEBFCB
BordersInactive statesPlaceholder text
400
9C9E
#9C9EB0
Disabled statesSecondary iconsMuted text
500
8082
#808299
Primary brand colorCTAsActive elementsLinks
600
6466
#64667D
Hover statesFocus ringsPrimary buttons hover
700
4F51
#4F5163
Active/pressed statesDark mode accentsSecondary text
800
393A
#393A47
Text on light backgroundsHeadingsStrong borders
900
2425
#24252D
Primary textHigh emphasis contentDark headings
950
1717
#17171C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F7F7F8;
  --silver-100: #EBECEF;
  --silver-200: #DADBE1;
  --silver-300: #BEBFCB;
  --silver-400: #9C9EB0;
  --silver-500: #808299;
  --silver-600: #64667D;
  --silver-700: #4F5163;
  --silver-800: #393A47;
  --silver-900: #24252D;
  --silver-950: #17171C;
}
Generate More ShadesCreate PaletteConvert Color