Silver

#AAB5DF

Blue

Color Codes

All color formats for development

HEX
#AAB5DF
RGB
rgb(170, 181, 223)
HSL
hsl(228, 45%, 77%)
OKLCH
oklch(0.779 0.061 273.4)
CMYK
cmyk(24%, 19%, 0%, 13%)

Accessibility

WCAG contrast compliance

On White Background

2.02:1

AA AAA

On Black Background

10.38:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F5
100
#E5E8
200
#CFD5
300
#AAB5
400
#7E8E
500
#596D
600
#3E52
700
#3141
800
#232F
900
#161E
950
#0E13

Shades

Darker variations

1#8D9CD4
2#7183C9
3#556ABE
4#4156AB
5#36488E
6#2B3972
7#202B55
8#161D39
9#0B0E1C

Tints

Lighter variations

1#B2BCE2
2#BBC3E5
3#C3CBE8
4#CCD2EC
5#D4DAEF
6#DDE1F2
7#E5E9F5
8#EEF0F9
9#F6F8FC

Tones

Muted variations

1#ADB6DC
2#AFB8D9
3#B2B9D7
4#B5BBD4
5#B7BCD2
6#BABECF
7#BCC0CC
8#BFC1CA
9#C2C3C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F5
#F4F5FB
BackgroundsSubtle highlightsCard backgrounds
100
E5E8
#E5E8F5
Light backgroundsTable row hoverSkeleton loading
200
CFD5
#CFD5ED
Secondary backgroundsInput backgroundsDividers
300
AAB5
#AAB5DF
BordersInactive statesPlaceholder text
400
7E8E
#7E8ECE
Disabled statesSecondary iconsMuted text
500
596D
#596DC0
Primary brand colorCTAsActive elementsLinks
600
3E52
#3E52A3
Hover statesFocus ringsPrimary buttons hover
700
3141
#314181
Active/pressed statesDark mode accentsSecondary text
800
232F
#232F5C
Text on light backgroundsHeadingsStrong borders
900
161E
#161E3B
Primary textHigh emphasis contentDark headings
950
0E13
#0E1325
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F5FB;
  --silver-100: #E5E8F5;
  --silver-200: #CFD5ED;
  --silver-300: #AAB5DF;
  --silver-400: #7E8ECE;
  --silver-500: #596DC0;
  --silver-600: #3E52A3;
  --silver-700: #314181;
  --silver-800: #232F5C;
  --silver-900: #161E3B;
  --silver-950: #0E1325;
}
Generate More ShadesCreate PaletteConvert Color