Silver

#ADC2DC

Blue

Color Codes

All color formats for development

HEX
#ADC2DC
RGB
rgb(173, 194, 220)
HSL
hsl(213, 40%, 77%)
OKLCH
oklch(0.807 0.043 253.8)
CMYK
cmyk(21%, 12%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.82:1

AA AAA

On Black Background

11.53:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6EC
200
#D1DD
300
#ADC2
400
#82A2
500
#5E88
600
#436C
700
#3656
800
#263D
900
#1827
950
#0F18

Shades

Darker variations

1#91AED0
2#7699C4
3#5A85B8
4#4771A5
5#3B5E89
6#2F4B6E
7#233952
8#182637
9#0C131B

Tints

Lighter variations

1#B5C8DF
2#BDCEE3
3#C6D4E6
4#CEDAEA
5#D6E1ED
6#DEE7F1
7#E6EDF4
8#EFF3F8
9#F7F9FB

Tones

Muted variations

1#AFC2D9
2#B2C2D7
3#B4C3D5
4#B6C3D2
5#B9C3D0
6#BBC3CE
7#BDC4CB
8#C0C4C9
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
D1DD
#D1DDEB
Secondary backgroundsInput backgroundsDividers
300
ADC2
#ADC2DC
BordersInactive statesPlaceholder text
400
82A2
#82A2C9
Disabled statesSecondary iconsMuted text
500
5E88
#5E88BA
Primary brand colorCTAsActive elementsLinks
600
436C
#436C9D
Hover statesFocus ringsPrimary buttons hover
700
3656
#36567D
Active/pressed statesDark mode accentsSecondary text
800
263D
#263D59
Text on light backgroundsHeadingsStrong borders
900
1827
#182739
Primary textHigh emphasis contentDark headings
950
0F18
#0F1824
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F7FA;
  --silver-100: #E6ECF4;
  --silver-200: #D1DDEB;
  --silver-300: #ADC2DC;
  --silver-400: #82A2C9;
  --silver-500: #5E88BA;
  --silver-600: #436C9D;
  --silver-700: #36567D;
  --silver-800: #263D59;
  --silver-900: #182739;
  --silver-950: #0F1824;
}
Generate More ShadesCreate PaletteConvert Color