Silver

#ACC3DD

Blue

Color Codes

All color formats for development

HEX
#ACC3DD
RGB
rgb(172, 195, 221)
HSL
hsl(212, 42%, 77%)
OKLCH
oklch(0.808 0.045 251.6)
CMYK
cmyk(22%, 12%, 0%, 13%)

Accessibility

WCAG contrast compliance

On White Background

1.81:1

AA AAA

On Black Background

11.60:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6ED
200
#D0DD
300
#ACC3
400
#80A3
500
#5C89
600
#416D
700
#3457
800
#253E
900
#1828
950
#0F19

Shades

Darker variations

1#90AFD2
2#749AC6
3#5886BB
4#4473A7
5#395F8B
6#2E4C70
7#223954
8#172638
9#0B131C

Tints

Lighter variations

1#B4C9E0
2#BCCFE4
3#C5D5E7
4#CDDBEB
5#D5E1EE
6#DEE7F1
7#E6EDF5
8#EEF3F8
9#F7F9FC

Tones

Muted variations

1#AEC3DB
2#B1C3D8
3#B3C3D6
4#B6C3D3
5#B8C4D1
6#BAC4CE
7#BDC4CC
8#BFC4C9
9#C2C4C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F7
#F4F7FB
BackgroundsSubtle highlightsCard backgrounds
100
E6ED
#E6EDF5
Light backgroundsTable row hoverSkeleton loading
200
D0DD
#D0DDEC
Secondary backgroundsInput backgroundsDividers
300
ACC3
#ACC3DD
BordersInactive statesPlaceholder text
400
80A3
#80A3CB
Disabled statesSecondary iconsMuted text
500
5C89
#5C89BC
Primary brand colorCTAsActive elementsLinks
600
416D
#416D9F
Hover statesFocus ringsPrimary buttons hover
700
3457
#34577F
Active/pressed statesDark mode accentsSecondary text
800
253E
#253E5B
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: #F4F7FB;
  --silver-100: #E6EDF5;
  --silver-200: #D0DDEC;
  --silver-300: #ACC3DD;
  --silver-400: #80A3CB;
  --silver-500: #5C89BC;
  --silver-600: #416D9F;
  --silver-700: #34577F;
  --silver-800: #253E5B;
  --silver-900: #18283A;
  --silver-950: #0F1924;
}
Generate More ShadesCreate PaletteConvert Color