Silver

#ACB2DC

Blue

Color Codes

All color formats for development

HEX
#ACB2DC
RGB
rgb(172, 178, 220)
HSL
hsl(233, 41%, 77%)
OKLCH
oklch(0.773 0.06 278.5)
CMYK
cmyk(22%, 19%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

2.07:1

AA AAA

On Black Background

10.16:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F5
100
#E6E8
200
#D0D3
300
#ACB2
400
#818A
500
#5D68
600
#424D
700
#353D
800
#262C
900
#181C
950
#0F11

Shades

Darker variations

1#9198D1
2#757EC5
3#5964BA
4#4651A6
5#3A438A
6#2E366F
7#232853
8#171B37
9#0C0D1C

Tints

Lighter variations

1#B5BAE0
2#BDC1E3
3#C5C9E7
4#CDD1EA
5#D6D8EE
6#DEE0F1
7#E6E8F5
8#EEF0F8
9#F7F7FC

Tones

Muted variations

1#AFB4DA
2#B1B6D8
3#B4B7D5
4#B6B9D3
5#B8BBD0
6#BBBDCE
7#BDBFCC
8#C0C1C9
9#C2C3C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F5
#F4F5FA
BackgroundsSubtle highlightsCard backgrounds
100
E6E8
#E6E8F4
Light backgroundsTable row hoverSkeleton loading
200
D0D3
#D0D3EB
Secondary backgroundsInput backgroundsDividers
300
ACB2
#ACB2DC
BordersInactive statesPlaceholder text
400
818A
#818ACA
Disabled statesSecondary iconsMuted text
500
5D68
#5D68BB
Primary brand colorCTAsActive elementsLinks
600
424D
#424D9E
Hover statesFocus ringsPrimary buttons hover
700
353D
#353D7E
Active/pressed statesDark mode accentsSecondary text
800
262C
#262C5A
Text on light backgroundsHeadingsStrong borders
900
181C
#181C3A
Primary textHigh emphasis contentDark headings
950
0F11
#0F1124
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F5FA;
  --silver-100: #E6E8F4;
  --silver-200: #D0D3EB;
  --silver-300: #ACB2DC;
  --silver-400: #818ACA;
  --silver-500: #5D68BB;
  --silver-600: #424D9E;
  --silver-700: #353D7E;
  --silver-800: #262C5A;
  --silver-900: #181C3A;
  --silver-950: #0F1124;
}
Generate More ShadesCreate PaletteConvert Color