Silver

#ACC0DC

Blue

Color Codes

All color formats for development

HEX
#ACC0DC
RGB
rgb(172, 192, 220)
HSL
hsl(215, 41%, 77%)
OKLCH
oklch(0.802 0.045 256.8)
CMYK
cmyk(22%, 13%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.85:1

AA AAA

On Black Background

11.33:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6EC
200
#D0DC
300
#ACC0
400
#81A0
500
#5D84
600
#4269
700
#3553
800
#263B
900
#1826
950
#0F18

Shades

Darker variations

1#91ABD1
2#7596C5
3#5981BA
4#466EA6
5#3A5B8A
6#2E496F
7#233753
8#172537
9#0C121C

Tints

Lighter variations

1#B5C7E0
2#BDCDE3
3#C5D3E7
4#CDD9EA
5#D6E0EE
6#DEE6F1
7#E6ECF5
8#EEF2F8
9#F7F9FC

Tones

Muted variations

1#AFC1DA
2#B1C1D8
3#B4C2D5
4#B6C2D3
5#B8C2D0
6#BBC3CE
7#BDC3CC
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
D0DC
#D0DCEB
Secondary backgroundsInput backgroundsDividers
300
ACC0
#ACC0DC
BordersInactive statesPlaceholder text
400
81A0
#81A0CA
Disabled statesSecondary iconsMuted text
500
5D84
#5D84BB
Primary brand colorCTAsActive elementsLinks
600
4269
#42699E
Hover statesFocus ringsPrimary buttons hover
700
3553
#35537E
Active/pressed statesDark mode accentsSecondary text
800
263B
#263B5A
Text on light backgroundsHeadingsStrong borders
900
1826
#18263A
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: #D0DCEB;
  --silver-300: #ACC0DC;
  --silver-400: #81A0CA;
  --silver-500: #5D84BB;
  --silver-600: #42699E;
  --silver-700: #35537E;
  --silver-800: #263B5A;
  --silver-900: #18263A;
  --silver-950: #0F1824;
}
Generate More ShadesCreate PaletteConvert Color