Silver

#BFC0CA

Gray

Color Codes

All color formats for development

HEX
#BFC0CA
RGB
rgb(191, 192, 202)
HSL
hsl(235, 9%, 77%)
OKLCH
oklch(0.81 0.014 281.5)
CMYK
cmyk(5%, 5%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

1.81:1

AA AAA

On Black Background

11.61:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F7
100
#ECEC
200
#DBDB
300
#BFC0
400
#9E9F
500
#8284
600
#6668
700
#5153
800
#3A3B
900
#2526
950
#1718

Shades

Darker variations

1#AAABB8
2#9496A6
3#7F8194
4#6B6D80
5#595B6B
6#474956
7#363640
8#24242B
9#121215

Tints

Lighter variations

1#C5C6CF
2#CCCDD4
3#D2D3DA
4#D9D9DF
5#DFDFE4
6#E5E6EA
7#ECECEF
8#F2F2F4
9#F9F9FA

Tones

Muted variations

1#C0C0C9
2#C0C1C9
3#C1C1C8
4#C1C2C8
5#C2C2C7
6#C2C3C6
7#C3C3C6
8#C3C3C5
9#C4C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F7
#F7F7F8
BackgroundsSubtle highlightsCard backgrounds
100
ECEC
#ECECEF
Light backgroundsTable row hoverSkeleton loading
200
DBDB
#DBDBE1
Secondary backgroundsInput backgroundsDividers
300
BFC0
#BFC0CA
BordersInactive statesPlaceholder text
400
9E9F
#9E9FAE
Disabled statesSecondary iconsMuted text
500
8284
#828497
Primary brand colorCTAsActive elementsLinks
600
6668
#66687A
Hover statesFocus ringsPrimary buttons hover
700
5153
#515361
Active/pressed statesDark mode accentsSecondary text
800
3A3B
#3A3B45
Text on light backgroundsHeadingsStrong borders
900
2526
#25262C
Primary textHigh emphasis contentDark headings
950
1718
#17181C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F7F7F8;
  --silver-100: #ECECEF;
  --silver-200: #DBDBE1;
  --silver-300: #BFC0CA;
  --silver-400: #9E9FAE;
  --silver-500: #828497;
  --silver-600: #66687A;
  --silver-700: #515361;
  --silver-800: #3A3B45;
  --silver-900: #25262C;
  --silver-950: #17181C;
}
Generate More ShadesCreate PaletteConvert Color