Silver

#B1C5D8

Blue

Color Codes

All color formats for development

HEX
#B1C5D8
RGB
rgb(177, 197, 216)
HSL
hsl(209, 33%, 77%)
OKLCH
oklch(0.814 0.035 246.9)
CMYK
cmyk(18%, 9%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.77:1

AA AAA

On Black Background

11.85:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F7
100
#E7ED
200
#D3DE
300
#B1C5
400
#88A7
500
#668E
600
#4B71
700
#3C5A
800
#2B40
900
#1B29
950
#111A

Shades

Darker variations

1#97B2CB
2#7D9EBD
3#638BB0
4#4F779D
5#426383
6#354F68
7#273C4E
8#1A2834
9#0D141A

Tints

Lighter variations

1#B9CBDC
2#C1D1E0
3#C8D6E3
4#D0DCE7
5#D8E2EB
6#E0E8EF
7#E8EEF3
8#EFF3F7
9#F7F9FB

Tones

Muted variations

1#B3C5D6
2#B5C5D4
3#B7C5D2
4#B9C5D0
5#BBC5CE
6#BDC5CC
7#BFC5CA
8#C0C4C8
9#C2C4C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F7
#F5F7FA
BackgroundsSubtle highlightsCard backgrounds
100
E7ED
#E7EDF3
Light backgroundsTable row hoverSkeleton loading
200
D3DE
#D3DEE9
Secondary backgroundsInput backgroundsDividers
300
B1C5
#B1C5D8
BordersInactive statesPlaceholder text
400
88A7
#88A7C3
Disabled statesSecondary iconsMuted text
500
668E
#668EB2
Primary brand colorCTAsActive elementsLinks
600
4B71
#4B7195
Hover statesFocus ringsPrimary buttons hover
700
3C5A
#3C5A77
Active/pressed statesDark mode accentsSecondary text
800
2B40
#2B4055
Text on light backgroundsHeadingsStrong borders
900
1B29
#1B2936
Primary textHigh emphasis contentDark headings
950
111A
#111A22
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F7FA;
  --silver-100: #E7EDF3;
  --silver-200: #D3DEE9;
  --silver-300: #B1C5D8;
  --silver-400: #88A7C3;
  --silver-500: #668EB2;
  --silver-600: #4B7195;
  --silver-700: #3C5A77;
  --silver-800: #2B4055;
  --silver-900: #1B2936;
  --silver-950: #111A22;
}
Generate More ShadesCreate PaletteConvert Color