Silver

#ABACDE

Blue

Color Codes

All color formats for development

HEX
#ABACDE
RGB
rgb(171, 172, 222)
HSL
hsl(239, 44%, 77%)
OKLCH
oklch(0.761 0.071 283.7)
CMYK
cmyk(23%, 23%, 0%, 13%)

Accessibility

WCAG contrast compliance

On White Background

2.17:1

AA AAA

On Black Background

9.69:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F4
100
#E5E6
200
#CFD0
300
#ABAB
400
#7E80
500
#5A5B
600
#3F40
700
#3233
800
#2425
900
#1717
950
#0E0F

Shades

Darker variations

1#8E8FD3
2#7273C8
3#5657BD
4#4244AA
5#37388D
6#2C2D71
7#212255
8#161739
9#0B0B1C

Tints

Lighter variations

1#B3B4E1
2#BBBCE5
3#C4C4E8
4#CCCDEB
5#D5D5EF
6#DDDEF2
7#E6E6F5
8#EEEEF8
9#F7F7FC

Tones

Muted variations

1#ADAEDC
2#B0B0D9
3#B2B3D6
4#B5B5D4
5#B7B8D1
6#BABACF
7#BDBDCC
8#BFBFCA
9#C2C2C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F4
#F4F4FB
BackgroundsSubtle highlightsCard backgrounds
100
E5E6
#E5E6F5
Light backgroundsTable row hoverSkeleton loading
200
CFD0
#CFD0EC
Secondary backgroundsInput backgroundsDividers
300
ABAB
#ABABDE
BordersInactive statesPlaceholder text
400
7E80
#7E80CD
Disabled statesSecondary iconsMuted text
500
5A5B
#5A5BBF
Primary brand colorCTAsActive elementsLinks
600
3F40
#3F40A2
Hover statesFocus ringsPrimary buttons hover
700
3233
#323381
Active/pressed statesDark mode accentsSecondary text
800
2425
#24255C
Text on light backgroundsHeadingsStrong borders
900
1717
#17173B
Primary textHigh emphasis contentDark headings
950
0E0F
#0E0F25
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F4FB;
  --silver-100: #E5E6F5;
  --silver-200: #CFD0EC;
  --silver-300: #ABABDE;
  --silver-400: #7E80CD;
  --silver-500: #5A5BBF;
  --silver-600: #3F40A2;
  --silver-700: #323381;
  --silver-800: #24255C;
  --silver-900: #17173B;
  --silver-950: #0E0F25;
}
Generate More ShadesCreate PaletteConvert Color