Silver

#ACC3DC

Blue

Color Codes

All color formats for development

HEX
#ACC3DC
RGB
rgb(172, 195, 220)
HSL
hsl(211, 41%, 77%)
OKLCH
oklch(0.808 0.043 250.6)
CMYK
cmyk(22%, 11%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.81:1

AA AAA

On Black Background

11.59:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6ED
200
#D0DD
300
#ACC4
400
#81A5
500
#5D8B
600
#426F
700
#3558
800
#263F
900
#1828
950
#0F19

Shades

Darker variations

1#91B0D1
2#759CC5
3#5988BA
4#4674A6
5#3A618A
6#2E4D6F
7#233A53
8#172737
9#0C131C

Tints

Lighter variations

1#B5C9E0
2#BDCFE3
3#C5D5E7
4#CDDBEA
5#D6E1EE
6#DEE7F1
7#E6EDF5
8#EEF3F8
9#F7F9FC

Tones

Muted variations

1#AFC4DA
2#B1C4D8
3#B4C4D5
4#B6C4D3
5#B8C4D0
6#BBC4CE
7#BDC4CC
8#C0C4C9
9#C2C4C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F7
#F4F7FA
BackgroundsSubtle highlightsCard backgrounds
100
E6ED
#E6EDF4
Light backgroundsTable row hoverSkeleton loading
200
D0DD
#D0DDEB
Secondary backgroundsInput backgroundsDividers
300
ACC4
#ACC4DC
BordersInactive statesPlaceholder text
400
81A5
#81A5CA
Disabled statesSecondary iconsMuted text
500
5D8B
#5D8BBB
Primary brand colorCTAsActive elementsLinks
600
426F
#426F9E
Hover statesFocus ringsPrimary buttons hover
700
3558
#35587E
Active/pressed statesDark mode accentsSecondary text
800
263F
#263F5A
Text on light backgroundsHeadingsStrong borders
900
1828
#18283A
Primary textHigh emphasis contentDark headings
950
0F19
#0F1924
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F7FA;
  --silver-100: #E6EDF4;
  --silver-200: #D0DDEB;
  --silver-300: #ACC4DC;
  --silver-400: #81A5CA;
  --silver-500: #5D8BBB;
  --silver-600: #426F9E;
  --silver-700: #35587E;
  --silver-800: #263F5A;
  --silver-900: #18283A;
  --silver-950: #0F1924;
}
Generate More ShadesCreate PaletteConvert Color