Silver

#ADC0DC

Blue

Color Codes

All color formats for development

HEX
#ADC0DC
RGB
rgb(173, 192, 220)
HSL
hsl(216, 40%, 77%)
OKLCH
oklch(0.803 0.045 258)
CMYK
cmyk(21%, 13%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.85:1

AA AAA

On Black Background

11.35:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6EC
200
#D1DB
300
#ADC0
400
#829F
500
#5E83
600
#4367
700
#3652
800
#263B
900
#1826
950
#0F17

Shades

Darker variations

1#91AAD0
2#7695C4
3#5A80B8
4#476CA5
5#3B5A89
6#2F486E
7#233652
8#182437
9#0C121B

Tints

Lighter variations

1#B5C6DF
2#BDCCE3
3#C6D3E6
4#CED9EA
5#D6DFED
6#DEE6F1
7#E6ECF4
8#EFF2F8
9#F7F9FB

Tones

Muted variations

1#AFC0D9
2#B2C1D7
3#B4C1D5
4#B6C2D2
5#B9C2D0
6#BBC2CE
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
ADC0
#ADC0DC
BordersInactive statesPlaceholder text
400
829F
#829FC9
Disabled statesSecondary iconsMuted text
500
5E83
#5E83BA
Primary brand colorCTAsActive elementsLinks
600
4367
#43679D
Hover statesFocus ringsPrimary buttons hover
700
3652
#36527D
Active/pressed statesDark mode accentsSecondary text
800
263B
#263B59
Text on light backgroundsHeadingsStrong borders
900
1826
#182639
Primary textHigh emphasis contentDark headings
950
0F17
#0F1724
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: #ADC0DC;
  --silver-400: #829FC9;
  --silver-500: #5E83BA;
  --silver-600: #43679D;
  --silver-700: #36527D;
  --silver-800: #263B59;
  --silver-900: #182639;
  --silver-950: #0F1724;
}
Generate More ShadesCreate PaletteConvert Color