Silver

#ABABDE

Blue

Color Codes

All color formats for development

HEX
#ABABDE
RGB
rgb(171, 171, 222)
HSL
hsl(240, 44%, 77%)
OKLCH
oklch(0.759 0.073 284.5)
CMYK
cmyk(23%, 23%, 0%, 13%)

Accessibility

WCAG contrast compliance

On White Background

2.18:1

AA AAA

On Black Background

9.61:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F4
100
#E5E5
200
#CFCF
300
#ABAB
400
#7E7E
500
#5A5A
600
#3F3F
700
#3232
800
#2424
900
#1717
950
#0E0E

Shades

Darker variations

1#8E8ED3
2#7272C8
3#5656BD
4#4242AA
5#37378D
6#2C2C71
7#212155
8#161639
9#0B0B1C

Tints

Lighter variations

1#B3B3E1
2#BBBBE5
3#C4C4E8
4#CCCCEB
5#D5D5EF
6#DDDDF2
7#E6E6F5
8#EEEEF8
9#F7F7FC

Tones

Muted variations

1#ADADDC
2#B0B0D9
3#B2B2D6
4#B5B5D4
5#B7B7D1
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
E5E5
#E5E5F5
Light backgroundsTable row hoverSkeleton loading
200
CFCF
#CFCFEC
Secondary backgroundsInput backgroundsDividers
300
ABAB
#ABABDE
BordersInactive statesPlaceholder text
400
7E7E
#7E7ECD
Disabled statesSecondary iconsMuted text
500
5A5A
#5A5ABF
Primary brand colorCTAsActive elementsLinks
600
3F3F
#3F3FA2
Hover statesFocus ringsPrimary buttons hover
700
3232
#323281
Active/pressed statesDark mode accentsSecondary text
800
2424
#24245C
Text on light backgroundsHeadingsStrong borders
900
1717
#17173B
Primary textHigh emphasis contentDark headings
950
0E0E
#0E0E25
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F4FB;
  --silver-100: #E5E5F5;
  --silver-200: #CFCFEC;
  --silver-300: #ABABDE;
  --silver-400: #7E7ECD;
  --silver-500: #5A5ABF;
  --silver-600: #3F3FA2;
  --silver-700: #323281;
  --silver-800: #24245C;
  --silver-900: #17173B;
  --silver-950: #0E0E25;
}
Generate More ShadesCreate PaletteConvert Color