Silver

#ACD0DC

Blue

Color Codes

All color formats for development

HEX
#ACD0DC
RGB
rgb(172, 208, 220)
HSL
hsl(195, 41%, 77%)
OKLCH
oklch(0.835 0.042 220)
CMYK
cmyk(22%, 5%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.64:1

AA AAA

On Black Background

12.81:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F9
100
#E6F1
200
#D0E5
300
#ACD0
400
#81B8
500
#5DA4
600
#4287
700
#356C
800
#264D
900
#1831
950
#0F1F

Shades

Darker variations

1#91C1D1
2#75B1C5
3#59A2BA
4#468EA6
5#3A768A
6#2E5F6F
7#234753
8#172F37
9#0C181C

Tints

Lighter variations

1#B5D5E0
2#BDDAE3
3#C5DEE7
4#CDE3EA
5#D6E8EE
6#DEECF1
7#E6F1F5
8#EEF6F8
9#F7FAFC

Tones

Muted variations

1#AFCFDA
2#B1CED8
3#B4CDD5
4#B6CCD3
5#B8CAD0
6#BBC9CE
7#BDC8CC
8#C0C7C9
9#C2C6C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F9
#F4F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E6F1
#E6F1F4
Light backgroundsTable row hoverSkeleton loading
200
D0E5
#D0E5EB
Secondary backgroundsInput backgroundsDividers
300
ACD0
#ACD0DC
BordersInactive statesPlaceholder text
400
81B8
#81B8CA
Disabled statesSecondary iconsMuted text
500
5DA4
#5DA4BB
Primary brand colorCTAsActive elementsLinks
600
4287
#42879E
Hover statesFocus ringsPrimary buttons hover
700
356C
#356C7E
Active/pressed statesDark mode accentsSecondary text
800
264D
#264D5A
Text on light backgroundsHeadingsStrong borders
900
1831
#18313A
Primary textHigh emphasis contentDark headings
950
0F1F
#0F1F24
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F9FA;
  --silver-100: #E6F1F4;
  --silver-200: #D0E5EB;
  --silver-300: #ACD0DC;
  --silver-400: #81B8CA;
  --silver-500: #5DA4BB;
  --silver-600: #42879E;
  --silver-700: #356C7E;
  --silver-800: #264D5A;
  --silver-900: #18313A;
  --silver-950: #0F1F24;
}
Generate More ShadesCreate PaletteConvert Color