Silver

#AFBADA

Blue

Color Codes

All color formats for development

HEX
#AFBADA
RGB
rgb(175, 186, 218)
HSL
hsl(225, 37%, 77%)
OKLCH
oklch(0.791 0.047 270.3)
CMYK
cmyk(20%, 15%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.93:1

AA AAA

On Black Background

10.86:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F6
100
#E7EA
200
#D2D8
300
#AFB9
400
#8595
500
#6277
600
#475B
700
#3849
800
#2834
900
#1A21
950
#1015

Shades

Darker variations

1#94A2CE
2#798BC1
3#5E74B5
4#4A60A1
5#3E5086
6#31406C
7#253051
8#192036
9#0C101B

Tints

Lighter variations

1#B7C0DE
2#BFC7E1
3#C7CEE5
4#CFD5E9
5#D7DCED
6#DFE3F0
7#E7EAF4
8#EFF1F8
9#F7F8FB

Tones

Muted variations

1#B1BBD8
2#B3BCD6
3#B5BDD4
4#B7BED1
5#B9BFCF
6#BCC0CD
7#BEC1CB
8#C0C2C9
9#C2C3C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F6
#F5F6FA
BackgroundsSubtle highlightsCard backgrounds
100
E7EA
#E7EAF4
Light backgroundsTable row hoverSkeleton loading
200
D2D8
#D2D8EA
Secondary backgroundsInput backgroundsDividers
300
AFB9
#AFB9DA
BordersInactive statesPlaceholder text
400
8595
#8595C7
Disabled statesSecondary iconsMuted text
500
6277
#6277B7
Primary brand colorCTAsActive elementsLinks
600
475B
#475B9A
Hover statesFocus ringsPrimary buttons hover
700
3849
#38497A
Active/pressed statesDark mode accentsSecondary text
800
2834
#283457
Text on light backgroundsHeadingsStrong borders
900
1A21
#1A2138
Primary textHigh emphasis contentDark headings
950
1015
#101523
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F6FA;
  --silver-100: #E7EAF4;
  --silver-200: #D2D8EA;
  --silver-300: #AFB9DA;
  --silver-400: #8595C7;
  --silver-500: #6277B7;
  --silver-600: #475B9A;
  --silver-700: #38497A;
  --silver-800: #283457;
  --silver-900: #1A2138;
  --silver-950: #101523;
}
Generate More ShadesCreate PaletteConvert Color