Silver

#ACB5DC

Blue

Color Codes

All color formats for development

HEX
#ACB5DC
RGB
rgb(172, 181, 220)
HSL
hsl(229, 41%, 77%)
OKLCH
oklch(0.779 0.057 274.8)
CMYK
cmyk(22%, 18%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

2.02:1

AA AAA

On Black Background

10.40:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F5
100
#E6E9
200
#D0D5
300
#ACB5
400
#818F
500
#5D6E
600
#4253
700
#3542
800
#262F
900
#181E
950
#0F13

Shades

Darker variations

1#919CD1
2#7584C5
3#596BBA
4#4657A6
5#3A498A
6#2E3A6F
7#232C53
8#171D37
9#0C0F1C

Tints

Lighter variations

1#B5BDE0
2#BDC4E3
3#C5CBE7
4#CDD3EA
5#D6DAEE
6#DEE1F1
7#E6E9F5
8#EEF0F8
9#F7F8FC

Tones

Muted variations

1#AFB7DA
2#B1B8D8
3#B4BAD5
4#B6BBD3
5#B8BDD0
6#BBBECE
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
D0D5
#D0D5EB
Secondary backgroundsInput backgroundsDividers
300
ACB5
#ACB5DC
BordersInactive statesPlaceholder text
400
818F
#818FCA
Disabled statesSecondary iconsMuted text
500
5D6E
#5D6EBB
Primary brand colorCTAsActive elementsLinks
600
4253
#42539E
Hover statesFocus ringsPrimary buttons hover
700
3542
#35427E
Active/pressed statesDark mode accentsSecondary text
800
262F
#262F5A
Text on light backgroundsHeadingsStrong borders
900
181E
#181E3A
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: #D0D5EB;
  --silver-300: #ACB5DC;
  --silver-400: #818FCA;
  --silver-500: #5D6EBB;
  --silver-600: #42539E;
  --silver-700: #35427E;
  --silver-800: #262F5A;
  --silver-900: #181E3A;
  --silver-950: #0F1324;
}
Generate More ShadesCreate PaletteConvert Color