Silver

#ABADDE

Blue

Color Codes

All color formats for development

HEX
#ABADDE
RGB
rgb(171, 173, 222)
HSL
hsl(238, 44%, 77%)
OKLCH
oklch(0.763 0.07 282.8)
CMYK
cmyk(23%, 22%, 0%, 13%)

Accessibility

WCAG contrast compliance

On White Background

2.15:1

AA AAA

On Black Background

9.76:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F4
100
#E5E6
200
#CFD0
300
#ABAC
400
#7E81
500
#5A5D
600
#3F42
700
#3235
800
#2426
900
#1718
950
#0E0F

Shades

Darker variations

1#8E91D3
2#7275C8
3#5659BD
4#4245AA
5#373A8D
6#2C2E71
7#212355
8#161739
9#0B0C1C

Tints

Lighter variations

1#B3B5E1
2#BBBDE5
3#C4C5E8
4#CCCDEB
5#D5D6EF
6#DDDEF2
7#E6E6F5
8#EEEEF8
9#F7F7FC

Tones

Muted variations

1#ADAFDC
2#B0B1D9
3#B2B3D6
4#B5B6D4
5#B7B8D1
6#BABBCF
7#BDBDCC
8#BFC0CA
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
ABAC
#ABACDE
BordersInactive statesPlaceholder text
400
7E81
#7E81CD
Disabled statesSecondary iconsMuted text
500
5A5D
#5A5DBF
Primary brand colorCTAsActive elementsLinks
600
3F42
#3F42A2
Hover statesFocus ringsPrimary buttons hover
700
3235
#323581
Active/pressed statesDark mode accentsSecondary text
800
2426
#24265C
Text on light backgroundsHeadingsStrong borders
900
1718
#17183B
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: #ABACDE;
  --silver-400: #7E81CD;
  --silver-500: #5A5DBF;
  --silver-600: #3F42A2;
  --silver-700: #323581;
  --silver-800: #24265C;
  --silver-900: #17183B;
  --silver-950: #0E0F25;
}
Generate More ShadesCreate PaletteConvert Color