Silver

#AFB2DA

Blue

Color Codes

All color formats for development

HEX
#AFB2DA
RGB
rgb(175, 178, 218)
HSL
hsl(236, 37%, 77%)
OKLCH
oklch(0.775 0.057 281.6)
CMYK
cmyk(20%, 18%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

2.06:1

AA AAA

On Black Background

10.20:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F5
100
#E7E7
200
#D2D3
300
#AFB2
400
#8589
500
#6267
600
#474C
700
#383D
800
#282B
900
#1A1C
950
#1011

Shades

Darker variations

1#9498CE
2#797EC1
3#5E64B5
4#4A50A1
5#3E4386
6#31356C
7#252851
8#191B36
9#0C0D1B

Tints

Lighter variations

1#B7B9DE
2#BFC1E1
3#C7C9E5
4#CFD1E9
5#D7D8ED
6#DFE0F0
7#E7E8F4
8#EFF0F8
9#F7F7FB

Tones

Muted variations

1#B1B3D8
2#B3B5D6
3#B5B7D4
4#B7B9D1
5#B9BBCF
6#BCBDCD
7#BEBFCB
8#C0C1C9
9#C2C2C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F5
#F5F5FA
BackgroundsSubtle highlightsCard backgrounds
100
E7E7
#E7E7F4
Light backgroundsTable row hoverSkeleton loading
200
D2D3
#D2D3EA
Secondary backgroundsInput backgroundsDividers
300
AFB2
#AFB2DA
BordersInactive statesPlaceholder text
400
8589
#8589C7
Disabled statesSecondary iconsMuted text
500
6267
#6267B7
Primary brand colorCTAsActive elementsLinks
600
474C
#474C9A
Hover statesFocus ringsPrimary buttons hover
700
383D
#383D7A
Active/pressed statesDark mode accentsSecondary text
800
282B
#282B57
Text on light backgroundsHeadingsStrong borders
900
1A1C
#1A1C38
Primary textHigh emphasis contentDark headings
950
1011
#101123
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F5FA;
  --silver-100: #E7E7F4;
  --silver-200: #D2D3EA;
  --silver-300: #AFB2DA;
  --silver-400: #8589C7;
  --silver-500: #6267B7;
  --silver-600: #474C9A;
  --silver-700: #383D7A;
  --silver-800: #282B57;
  --silver-900: #1A1C38;
  --silver-950: #101123;
}
Generate More ShadesCreate PaletteConvert Color