Silver

#ADBFDB

Blue

Color Codes

All color formats for development

HEX
#ADBFDB
RGB
rgb(173, 191, 219)
HSL
hsl(217, 39%, 77%)
OKLCH
oklch(0.8 0.044 259.2)
CMYK
cmyk(21%, 13%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.87:1

AA AAA

On Black Background

11.25:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6EC
200
#D1DB
300
#ADBF
400
#839E
500
#5F82
600
#4466
700
#3651
800
#273A
900
#1925
950
#1017

Shades

Darker variations

1#92AACF
2#7794C3
3#5C7FB7
4#486BA4
5#3C5988
6#30476D
7#243652
8#182437
9#0C121B

Tints

Lighter variations

1#B6C5DF
2#BECCE2
3#C6D2E6
4#CED9EA
5#D6DFED
6#DEE5F1
7#E7ECF4
8#EFF2F8
9#F7F9FB

Tones

Muted variations

1#B0C0D9
2#B2C0D7
3#B4C1D4
4#B7C1D2
5#B9C2D0
6#BBC2CD
7#BDC3CB
8#C0C3C9
9#C2C4C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F7
#F4F7FA
BackgroundsSubtle highlightsCard backgrounds
100
E6EC
#E6ECF4
Light backgroundsTable row hoverSkeleton loading
200
D1DB
#D1DBEB
Secondary backgroundsInput backgroundsDividers
300
ADBF
#ADBFDB
BordersInactive statesPlaceholder text
400
839E
#839EC9
Disabled statesSecondary iconsMuted text
500
5F82
#5F82B9
Primary brand colorCTAsActive elementsLinks
600
4466
#44669C
Hover statesFocus ringsPrimary buttons hover
700
3651
#36517C
Active/pressed statesDark mode accentsSecondary text
800
273A
#273A59
Text on light backgroundsHeadingsStrong borders
900
1925
#192539
Primary textHigh emphasis contentDark headings
950
1017
#101723
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F7FA;
  --silver-100: #E6ECF4;
  --silver-200: #D1DBEB;
  --silver-300: #ADBFDB;
  --silver-400: #839EC9;
  --silver-500: #5F82B9;
  --silver-600: #44669C;
  --silver-700: #36517C;
  --silver-800: #273A59;
  --silver-900: #192539;
  --silver-950: #101723;
}
Generate More ShadesCreate PaletteConvert Color