Silver

#989FB3

Blue

Color Codes

All color formats for development

HEX
#989FB3
RGB
rgb(152, 159, 179)
HSL
hsl(224, 15%, 65%)
OKLCH
oklch(0.703 0.03 270.3)
CMYK
cmyk(15%, 11%, 0%, 30%)

Accessibility

WCAG contrast compliance

On White Background

2.64:1

AA AAA

On Black Background

7.95:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEC
200
#D9DC
300
#BCC0
400
#98A0
500
#7B84
600
#5F68
700
#4C53
800
#363B
900
#2326
950
#1618

Shades

Darker variations

1#858EA5
2#727C97
3#636C85
4#555C72
5#464D5F
6#383E4C
7#2A2E39
8#1C1F26
9#0E0F13

Tints

Lighter variations

1#A3A9BB
2#ADB3C2
3#B7BCCA
4#C1C6D1
5#CCCFD9
6#D6D9E1
7#E0E2E8
8#EAECF0
9#F5F5F7

Tones

Muted variations

1#9AA0B2
2#9BA1B0
3#9CA1AF
4#9EA2AE
5#9FA3AC
6#A0A3AB
7#A2A4AA
8#A3A5A8
9#A4A5A7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F8
BackgroundsSubtle highlightsCard backgrounds
100
EAEC
#EAECF0
Light backgroundsTable row hoverSkeleton loading
200
D9DC
#D9DCE3
Secondary backgroundsInput backgroundsDividers
300
BCC0
#BCC0CD
BordersInactive statesPlaceholder text
400
98A0
#98A0B3
Disabled statesSecondary iconsMuted text
500
7B84
#7B849D
Primary brand colorCTAsActive elementsLinks
600
5F68
#5F6881
Hover statesFocus ringsPrimary buttons hover
700
4C53
#4C5367
Active/pressed statesDark mode accentsSecondary text
800
363B
#363B49
Text on light backgroundsHeadingsStrong borders
900
2326
#23262F
Primary textHigh emphasis contentDark headings
950
1618
#16181D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F8;
  --silver-100: #EAECF0;
  --silver-200: #D9DCE3;
  --silver-300: #BCC0CD;
  --silver-400: #98A0B3;
  --silver-500: #7B849D;
  --silver-600: #5F6881;
  --silver-700: #4C5367;
  --silver-800: #363B49;
  --silver-900: #23262F;
  --silver-950: #16181D;
}
Generate More ShadesCreate PaletteConvert Color