Silver

#ACB6DC

Blue

Color Codes

All color formats for development

HEX
#ACB6DC
RGB
rgb(172, 182, 220)
HSL
hsl(228, 41%, 77%)
OKLCH
oklch(0.781 0.055 273.5)
CMYK
cmyk(22%, 17%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

2.00:1

AA AAA

On Black Background

10.48:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F5
100
#E6E9
200
#D0D6
300
#ACB6
400
#8190
500
#5D70
600
#4255
700
#3543
800
#2630
900
#181F
950
#0F13

Shades

Darker variations

1#919DD1
2#7585C5
3#596DBA
4#4659A6
5#3A4A8A
6#2E3B6F
7#232C53
8#171E37
9#0C0F1C

Tints

Lighter variations

1#B5BDE0
2#BDC5E3
3#C5CCE7
4#CDD3EA
5#D6DAEE
6#DEE2F1
7#E6E9F5
8#EEF0F8
9#F7F8FC

Tones

Muted variations

1#AFB7DA
2#B1B9D8
3#B4BAD5
4#B6BCD3
5#B8BDD0
6#BBBFCE
7#BDC0CC
8#C0C1C9
9#C2C3C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F5
#F4F5FA
BackgroundsSubtle highlightsCard backgrounds
100
E6E9
#E6E9F4
Light backgroundsTable row hoverSkeleton loading
200
D0D6
#D0D6EB
Secondary backgroundsInput backgroundsDividers
300
ACB6
#ACB6DC
BordersInactive statesPlaceholder text
400
8190
#8190CA
Disabled statesSecondary iconsMuted text
500
5D70
#5D70BB
Primary brand colorCTAsActive elementsLinks
600
4255
#42559E
Hover statesFocus ringsPrimary buttons hover
700
3543
#35437E
Active/pressed statesDark mode accentsSecondary text
800
2630
#26305A
Text on light backgroundsHeadingsStrong borders
900
181F
#181F3A
Primary textHigh emphasis contentDark headings
950
0F13
#0F1324
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F5FA;
  --silver-100: #E6E9F4;
  --silver-200: #D0D6EB;
  --silver-300: #ACB6DC;
  --silver-400: #8190CA;
  --silver-500: #5D70BB;
  --silver-600: #42559E;
  --silver-700: #35437E;
  --silver-800: #26305A;
  --silver-900: #181F3A;
  --silver-950: #0F1324;
}
Generate More ShadesCreate PaletteConvert Color