Silver

#B5C3D4

Blue

Color Codes

All color formats for development

HEX
#B5C3D4
RGB
rgb(181, 195, 212)
HSL
hsl(213, 26%, 77%)
OKLCH
oklch(0.812 0.029 253.3)
CMYK
cmyk(15%, 8%, 0%, 17%)

Accessibility

WCAG contrast compliance

On White Background

1.79:1

AA AAA

On Black Background

11.72:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F7
100
#E9ED
200
#D5DD
300
#B5C3
400
#8FA3
500
#6E89
600
#536D
700
#4257
800
#2F3E
900
#1E28
950
#1319

Shades

Darker variations

1#9CAFC5
2#849BB7
3#6B86A8
4#577394
5#49607C
6#3A4C63
7#2C394A
8#1D2631
9#0F1319

Tints

Lighter variations

1#BCC9D8
2#C4CFDC
3#CBD5E1
4#D3DBE5
5#DAE1E9
6#E1E7EE
7#E9EDF2
8#F0F3F6
9#F8F9FB

Tones

Muted variations

1#B7C3D2
2#B8C3D1
3#BAC3CF
4#BBC3CD
5#BDC4CC
6#BEC4CA
7#C0C4C9
8#C1C4C7
9#C3C4C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F7
#F5F7F9
BackgroundsSubtle highlightsCard backgrounds
100
E9ED
#E9EDF2
Light backgroundsTable row hoverSkeleton loading
200
D5DD
#D5DDE6
Secondary backgroundsInput backgroundsDividers
300
B5C3
#B5C3D4
BordersInactive statesPlaceholder text
400
8FA3
#8FA3BD
Disabled statesSecondary iconsMuted text
500
6E89
#6E89AA
Primary brand colorCTAsActive elementsLinks
600
536D
#536D8D
Hover statesFocus ringsPrimary buttons hover
700
4257
#425770
Active/pressed statesDark mode accentsSecondary text
800
2F3E
#2F3E50
Text on light backgroundsHeadingsStrong borders
900
1E28
#1E2833
Primary textHigh emphasis contentDark headings
950
1319
#131920
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F7F9;
  --silver-100: #E9EDF2;
  --silver-200: #D5DDE6;
  --silver-300: #B5C3D4;
  --silver-400: #8FA3BD;
  --silver-500: #6E89AA;
  --silver-600: #536D8D;
  --silver-700: #425770;
  --silver-800: #2F3E50;
  --silver-900: #1E2833;
  --silver-950: #131920;
}
Generate More ShadesCreate PaletteConvert Color