Silver

#9DA7AF

Blue

Color Codes

All color formats for development

HEX
#9DA7AF
RGB
rgb(157, 167, 175)
HSL
hsl(207, 10%, 65%)
OKLCH
oklch(0.723 0.016 241.9)
CMYK
cmyk(10%, 5%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

2.45:1

AA AAA

On Black Background

8.58:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F7
100
#EBED
200
#DBDE
300
#BEC5
400
#9DA7
500
#818D
600
#6571
700
#505A
800
#3940
900
#2529
950
#171A

Shades

Darker variations

1#8B96A0
2#788691
3#687580
4#5A646D
5#4B545B
6#3C4349
7#2D3237
8#1E2124
9#0F1112

Tints

Lighter variations

1#A7AFB7
2#B0B8BF
3#BAC1C7
4#C4CACF
5#CED3D7
6#D8DCDF
7#E2E4E7
8#EBEDEF
9#F5F6F7

Tones

Muted variations

1#9EA7AE
2#9FA6AD
3#A0A6AC
4#A0A6AB
5#A1A6AA
6#A2A6A9
7#A3A6A8
8#A4A6A8
9#A5A6A7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F7
#F7F7F8
BackgroundsSubtle highlightsCard backgrounds
100
EBED
#EBEDEF
Light backgroundsTable row hoverSkeleton loading
200
DBDE
#DBDEE1
Secondary backgroundsInput backgroundsDividers
300
BEC5
#BEC5CA
BordersInactive statesPlaceholder text
400
9DA7
#9DA7AF
Disabled statesSecondary iconsMuted text
500
818D
#818D98
Primary brand colorCTAsActive elementsLinks
600
6571
#65717B
Hover statesFocus ringsPrimary buttons hover
700
505A
#505A62
Active/pressed statesDark mode accentsSecondary text
800
3940
#394046
Text on light backgroundsHeadingsStrong borders
900
2529
#25292D
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: #EBEDEF;
  --silver-200: #DBDEE1;
  --silver-300: #BEC5CA;
  --silver-400: #9DA7AF;
  --silver-500: #818D98;
  --silver-600: #65717B;
  --silver-700: #505A62;
  --silver-800: #394046;
  --silver-900: #25292D;
  --silver-950: #171A1C;
}
Generate More ShadesCreate PaletteConvert Color