Silver

#959DB7

Blue

Color Codes

All color formats for development

HEX
#959DB7
RGB
rgb(149, 157, 183)
HSL
hsl(226, 19%, 65%)
OKLCH
oklch(0.698 0.039 271.9)
CMYK
cmyk(19%, 14%, 0%, 28%)

Accessibility

WCAG contrast compliance

On White Background

2.70:1

AA AAA

On Black Background

7.78:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEB
200
#D8DA
300
#B9BE
400
#959D
500
#7681
600
#5B65
700
#4850
800
#3439
900
#2125
950
#1517

Shades

Darker variations

1#818AA9
2#6D789C
3#5E688A
4#515976
5#434A63
6#363C4F
7#282D3B
8#1B1E27
9#0D0F14

Tints

Lighter variations

1#9FA7BE
2#AAB0C5
3#B5BACC
4#BFC4D4
5#CACEDB
6#D5D8E2
7#DFE2E9
8#EAEBF1
9#F4F5F8

Tones

Muted variations

1#969EB5
2#989FB3
3#9A9FB2
4#9CA0B0
5#9DA1AE
6#9FA2AD
7#A1A3AB
8#A2A4A9
9#A4A5A7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEB
#EAEBF1
Light backgroundsTable row hoverSkeleton loading
200
D8DA
#D8DAE4
Secondary backgroundsInput backgroundsDividers
300
B9BE
#B9BECF
BordersInactive statesPlaceholder text
400
959D
#959DB7
Disabled statesSecondary iconsMuted text
500
7681
#7681A2
Primary brand colorCTAsActive elementsLinks
600
5B65
#5B6586
Hover statesFocus ringsPrimary buttons hover
700
4850
#48506A
Active/pressed statesDark mode accentsSecondary text
800
3439
#34394C
Text on light backgroundsHeadingsStrong borders
900
2125
#212531
Primary textHigh emphasis contentDark headings
950
1517
#15171E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAEBF1;
  --silver-200: #D8DAE4;
  --silver-300: #B9BECF;
  --silver-400: #959DB7;
  --silver-500: #7681A2;
  --silver-600: #5B6586;
  --silver-700: #48506A;
  --silver-800: #34394C;
  --silver-900: #212531;
  --silver-950: #15171E;
}
Generate More ShadesCreate PaletteConvert Color