Silver

#AFBCD9

Blue

Color Codes

All color formats for development

HEX
#AFBCD9
RGB
rgb(175, 188, 217)
HSL
hsl(221, 36%, 77%)
OKLCH
oklch(0.795 0.044 266.3)
CMYK
cmyk(19%, 13%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.91:1

AA AAA

On Black Background

11.02:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F6
100
#E7EB
200
#D2D9
300
#AFBD
400
#869A
500
#637D
600
#4861
700
#394D
800
#2937
900
#1A23
950
#1016

Shades

Darker variations

1#95A6CD
2#7A90C0
3#5F7AB4
4#4B66A0
5#3F5586
6#32446B
7#263350
8#192235
9#0D111B

Tints

Lighter variations

1#B7C3DD
2#BFCAE1
3#C7D1E5
4#CFD7E8
5#D7DEEC
6#DFE4F0
7#E7EBF4
8#EFF2F7
9#F7F8FB

Tones

Muted variations

1#B1BDD7
2#B3BED5
3#B6BFD3
4#B8C0D1
5#BAC0CF
6#BCC1CD
7#BEC2CB
8#C0C3C9
9#C2C4C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F6
#F5F6FA
BackgroundsSubtle highlightsCard backgrounds
100
E7EB
#E7EBF4
Light backgroundsTable row hoverSkeleton loading
200
D2D9
#D2D9EA
Secondary backgroundsInput backgroundsDividers
300
AFBD
#AFBDD9
BordersInactive statesPlaceholder text
400
869A
#869AC6
Disabled statesSecondary iconsMuted text
500
637D
#637DB6
Primary brand colorCTAsActive elementsLinks
600
4861
#486199
Hover statesFocus ringsPrimary buttons hover
700
394D
#394D79
Active/pressed statesDark mode accentsSecondary text
800
2937
#293757
Text on light backgroundsHeadingsStrong borders
900
1A23
#1A2337
Primary textHigh emphasis contentDark headings
950
1016
#101623
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F6FA;
  --silver-100: #E7EBF4;
  --silver-200: #D2D9EA;
  --silver-300: #AFBDD9;
  --silver-400: #869AC6;
  --silver-500: #637DB6;
  --silver-600: #486199;
  --silver-700: #394D79;
  --silver-800: #293757;
  --silver-900: #1A2337;
  --silver-950: #101623;
}
Generate More ShadesCreate PaletteConvert Color