Silver

#ADCADB

Blue

Color Codes

All color formats for development

HEX
#ADCADB
RGB
rgb(173, 202, 219)
HSL
hsl(202, 39%, 77%)
OKLCH
oklch(0.823 0.039 233.7)
CMYK
cmyk(21%, 8%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.71:1

AA AAA

On Black Background

12.25:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F8
100
#E6EF
200
#D1E1
300
#ADCA
400
#83AF
500
#5F98
600
#447C
700
#3663
800
#2746
900
#192D
950
#101C

Shades

Darker variations

1#92B9CF
2#77A7C3
3#5C96B7
4#4882A4
5#3C6C88
6#30576D
7#244152
8#182B37
9#0C161B

Tints

Lighter variations

1#B6D0DF
2#BED5E2
3#C6DAE6
4#CEDFEA
5#D6E5ED
6#DEEAF1
7#E7EFF4
8#EFF4F8
9#F7FAFB

Tones

Muted variations

1#B0CAD9
2#B2C9D7
3#B4C9D4
4#B7C8D2
5#B9C7D0
6#BBC7CD
7#BDC6CB
8#C0C6C9
9#C2C5C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F8
#F4F8FA
BackgroundsSubtle highlightsCard backgrounds
100
E6EF
#E6EFF4
Light backgroundsTable row hoverSkeleton loading
200
D1E1
#D1E1EB
Secondary backgroundsInput backgroundsDividers
300
ADCA
#ADCADB
BordersInactive statesPlaceholder text
400
83AF
#83AFC9
Disabled statesSecondary iconsMuted text
500
5F98
#5F98B9
Primary brand colorCTAsActive elementsLinks
600
447C
#447C9C
Hover statesFocus ringsPrimary buttons hover
700
3663
#36637C
Active/pressed statesDark mode accentsSecondary text
800
2746
#274659
Text on light backgroundsHeadingsStrong borders
900
192D
#192D39
Primary textHigh emphasis contentDark headings
950
101C
#101C23
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F8FA;
  --silver-100: #E6EFF4;
  --silver-200: #D1E1EB;
  --silver-300: #ADCADB;
  --silver-400: #83AFC9;
  --silver-500: #5F98B9;
  --silver-600: #447C9C;
  --silver-700: #36637C;
  --silver-800: #274659;
  --silver-900: #192D39;
  --silver-950: #101C23;
}
Generate More ShadesCreate PaletteConvert Color