Silver

#ADB6DB

Blue

Color Codes

All color formats for development

HEX
#ADB6DB
RGB
rgb(173, 182, 219)
HSL
hsl(228, 39%, 77%)
OKLCH
oklch(0.782 0.054 274.4)
CMYK
cmyk(21%, 17%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

2.00:1

AA AAA

On Black Background

10.49:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F6
100
#E6E9
200
#D1D6
300
#ADB7
400
#8391
500
#5F71
600
#4456
700
#3644
800
#2731
900
#191F
950
#1014

Shades

Darker variations

1#929ECF
2#7786C3
3#5C6EB7
4#485AA4
5#3C4B88
6#303C6D
7#242D52
8#181E37
9#0C0F1B

Tints

Lighter variations

1#B6BEDF
2#BEC5E2
3#C6CCE6
4#CED4EA
5#D6DBED
6#DEE2F1
7#E7E9F4
8#EFF1F8
9#F7F8FB

Tones

Muted variations

1#B0B8D9
2#B2B9D7
3#B4BBD4
4#B7BCD2
5#B9BDD0
6#BBBFCD
7#BDC0CB
8#C0C2C9
9#C2C3C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F6
#F4F6FA
BackgroundsSubtle highlightsCard backgrounds
100
E6E9
#E6E9F4
Light backgroundsTable row hoverSkeleton loading
200
D1D6
#D1D6EB
Secondary backgroundsInput backgroundsDividers
300
ADB7
#ADB7DB
BordersInactive statesPlaceholder text
400
8391
#8391C9
Disabled statesSecondary iconsMuted text
500
5F71
#5F71B9
Primary brand colorCTAsActive elementsLinks
600
4456
#44569C
Hover statesFocus ringsPrimary buttons hover
700
3644
#36447C
Active/pressed statesDark mode accentsSecondary text
800
2731
#273159
Text on light backgroundsHeadingsStrong borders
900
191F
#191F39
Primary textHigh emphasis contentDark headings
950
1014
#101423
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F6FA;
  --silver-100: #E6E9F4;
  --silver-200: #D1D6EB;
  --silver-300: #ADB7DB;
  --silver-400: #8391C9;
  --silver-500: #5F71B9;
  --silver-600: #44569C;
  --silver-700: #36447C;
  --silver-800: #273159;
  --silver-900: #191F39;
  --silver-950: #101423;
}
Generate More ShadesCreate PaletteConvert Color