Silver

#B5B9D4

Blue

Color Codes

All color formats for development

HEX
#B5B9D4
RGB
rgb(181, 185, 212)
HSL
hsl(232, 26%, 77%)
OKLCH
oklch(0.791 0.038 278.8)
CMYK
cmyk(15%, 13%, 0%, 17%)

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
#E9EA
200
#D5D8
300
#B5B9
400
#8F95
500
#6E76
600
#535B
700
#4248
800
#2F34
900
#1E21
950
#1315

Shades

Darker variations

1#9CA2C5
2#848AB7
3#6B73A8
4#575F94
5#494F7C
6#3A4063
7#2C304A
8#1D2031
9#0F1019

Tints

Lighter variations

1#BCC0D8
2#C4C7DC
3#CBCEE1
4#D3D5E5
5#DADCE9
6#E1E3EE
7#E9EAF2
8#F0F1F6
9#F8F8FB

Tones

Muted variations

1#B7BAD2
2#B8BBD1
3#BABDCF
4#BBBECD
5#BDBFCC
6#BEC0CA
7#C0C1C9
8#C1C2C7
9#C3C3C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F6
#F5F6F9
BackgroundsSubtle highlightsCard backgrounds
100
E9EA
#E9EAF2
Light backgroundsTable row hoverSkeleton loading
200
D5D8
#D5D8E6
Secondary backgroundsInput backgroundsDividers
300
B5B9
#B5B9D4
BordersInactive statesPlaceholder text
400
8F95
#8F95BD
Disabled statesSecondary iconsMuted text
500
6E76
#6E76AA
Primary brand colorCTAsActive elementsLinks
600
535B
#535B8D
Hover statesFocus ringsPrimary buttons hover
700
4248
#424870
Active/pressed statesDark mode accentsSecondary text
800
2F34
#2F3450
Text on light backgroundsHeadingsStrong borders
900
1E21
#1E2133
Primary textHigh emphasis contentDark headings
950
1315
#131520
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F6F9;
  --silver-100: #E9EAF2;
  --silver-200: #D5D8E6;
  --silver-300: #B5B9D4;
  --silver-400: #8F95BD;
  --silver-500: #6E76AA;
  --silver-600: #535B8D;
  --silver-700: #424870;
  --silver-800: #2F3450;
  --silver-900: #1E2133;
  --silver-950: #131520;
}
Generate More ShadesCreate PaletteConvert Color