Silver

#ADCCDC

Blue

Color Codes

All color formats for development

HEX
#ADCCDC
RGB
rgb(173, 204, 220)
HSL
hsl(200, 40%, 77%)
OKLCH
oklch(0.828 0.04 230.3)
CMYK
cmyk(21%, 7%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.69:1

AA AAA

On Black Background

12.45:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F8
100
#E6F0
200
#D1E2
300
#ADCC
400
#82B2
500
#5E9C
600
#437F
700
#3665
800
#2648
900
#182E
950
#0F1D

Shades

Darker variations

1#91BBD0
2#76AAC4
3#5A99B8
4#4786A5
5#3B6F89
6#2F596E
7#234352
8#182D37
9#0C161B

Tints

Lighter variations

1#B5D1DF
2#BDD6E3
3#C6DBE6
4#CEE1EA
5#D6E6ED
6#DEEBF1
7#E6F0F4
8#EFF5F8
9#F7FAFB

Tones

Muted variations

1#AFCBD9
2#B2CBD7
3#B4CAD5
4#B6C9D2
5#B9C8D0
6#BBC7CE
7#BDC7CB
8#C0C6C9
9#C2C5C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F8
#F4F8FA
BackgroundsSubtle highlightsCard backgrounds
100
E6F0
#E6F0F4
Light backgroundsTable row hoverSkeleton loading
200
D1E2
#D1E2EB
Secondary backgroundsInput backgroundsDividers
300
ADCC
#ADCCDC
BordersInactive statesPlaceholder text
400
82B2
#82B2C9
Disabled statesSecondary iconsMuted text
500
5E9C
#5E9CBA
Primary brand colorCTAsActive elementsLinks
600
437F
#437F9D
Hover statesFocus ringsPrimary buttons hover
700
3665
#36657D
Active/pressed statesDark mode accentsSecondary text
800
2648
#264859
Text on light backgroundsHeadingsStrong borders
900
182E
#182E39
Primary textHigh emphasis contentDark headings
950
0F1D
#0F1D24
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F8FA;
  --silver-100: #E6F0F4;
  --silver-200: #D1E2EB;
  --silver-300: #ADCCDC;
  --silver-400: #82B2C9;
  --silver-500: #5E9CBA;
  --silver-600: #437F9D;
  --silver-700: #36657D;
  --silver-800: #264859;
  --silver-900: #182E39;
  --silver-950: #0F1D24;
}
Generate More ShadesCreate PaletteConvert Color