Silver

#9EA6AE

Gray

Color Codes

All color formats for development

HEX
#9EA6AE
RGB
rgb(158, 166, 174)
HSL
hsl(210, 9%, 65%)
OKLCH
oklch(0.721 0.015 248)
CMYK
cmyk(9%, 5%, 0%, 32%)

Accessibility

WCAG contrast compliance

On White Background

2.46:1

AA AAA

On Black Background

8.52:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F7
100
#ECED
200
#DBDE
300
#BFC4
400
#9EA6
500
#828C
600
#6670
700
#5159
800
#3A40
900
#2529
950
#171A

Shades

Darker variations

1#8C959F
2#7A8590
3#6A747E
4#5A636C
5#4B535A
6#3C4248
7#2D3236
8#1E2124
9#0F1112

Tints

Lighter variations

1#A7AFB6
2#B1B8BE
3#BBC1C6
4#C5C9CE
5#CED2D6
6#D8DBDF
7#E2E4E7
8#ECEDEF
9#F5F6F7

Tones

Muted variations

1#9FA6AD
2#9FA6AC
3#A0A6AB
4#A1A6AB
5#A2A6AA
6#A3A6A9
7#A3A6A8
8#A4A6A7
9#A5A6A7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F7
#F7F7F8
BackgroundsSubtle highlightsCard backgrounds
100
ECED
#ECEDEF
Light backgroundsTable row hoverSkeleton loading
200
DBDE
#DBDEE1
Secondary backgroundsInput backgroundsDividers
300
BFC4
#BFC4CA
BordersInactive statesPlaceholder text
400
9EA6
#9EA6AE
Disabled statesSecondary iconsMuted text
500
828C
#828C97
Primary brand colorCTAsActive elementsLinks
600
6670
#66707A
Hover statesFocus ringsPrimary buttons hover
700
5159
#515961
Active/pressed statesDark mode accentsSecondary text
800
3A40
#3A4045
Text on light backgroundsHeadingsStrong borders
900
2529
#25292C
Primary textHigh emphasis contentDark headings
950
171A
#171A1C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F7F7F8;
  --silver-100: #ECEDEF;
  --silver-200: #DBDEE1;
  --silver-300: #BFC4CA;
  --silver-400: #9EA6AE;
  --silver-500: #828C97;
  --silver-600: #66707A;
  --silver-700: #515961;
  --silver-800: #3A4045;
  --silver-900: #25292C;
  --silver-950: #171A1C;
}
Generate More ShadesCreate PaletteConvert Color