Silver

#9C9CB0

Blue

Color Codes

All color formats for development

HEX
#9C9CB0
RGB
rgb(156, 156, 176)
HSL
hsl(240, 11%, 65%)
OKLCH
oklch(0.699 0.029 285.6)
CMYK
cmyk(11%, 11%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

2.69:1

AA AAA

On Black Background

7.80:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F7
100
#EBEB
200
#DADA
300
#BEBE
400
#9C9C
500
#8080
600
#6464
700
#4F4F
800
#3939
900
#2424
950
#1717

Shades

Darker variations

1#8A8AA1
2#777792
3#676781
4#59596E
5#4A4A5C
6#3B3B4A
7#2C2C37
8#1E1E25
9#0F0F12

Tints

Lighter variations

1#A6A6B8
2#B0B0BF
3#BABAC7
4#C4C4CF
5#CDCDD7
6#D7D7DF
7#E1E1E7
8#EBEBEF
9#F5F5F7

Tones

Muted variations

1#9D9DAF
2#9E9EAE
3#9F9FAD
4#A0A0AC
5#A1A1AB
6#A2A2AA
7#A3A3A9
8#A4A4A8
9#A5A5A7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F7
#F7F7F8
BackgroundsSubtle highlightsCard backgrounds
100
EBEB
#EBEBEF
Light backgroundsTable row hoverSkeleton loading
200
DADA
#DADAE1
Secondary backgroundsInput backgroundsDividers
300
BEBE
#BEBECB
BordersInactive statesPlaceholder text
400
9C9C
#9C9CB0
Disabled statesSecondary iconsMuted text
500
8080
#808099
Primary brand colorCTAsActive elementsLinks
600
6464
#64647D
Hover statesFocus ringsPrimary buttons hover
700
4F4F
#4F4F63
Active/pressed statesDark mode accentsSecondary text
800
3939
#393947
Text on light backgroundsHeadingsStrong borders
900
2424
#24242D
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: #EBEBEF;
  --silver-200: #DADAE1;
  --silver-300: #BEBECB;
  --silver-400: #9C9CB0;
  --silver-500: #808099;
  --silver-600: #64647D;
  --silver-700: #4F4F63;
  --silver-800: #393947;
  --silver-900: #24242D;
  --silver-950: #17171C;
}
Generate More ShadesCreate PaletteConvert Color