Silver

#B4C8D5

Blue

Color Codes

All color formats for development

HEX
#B4C8D5
RGB
rgb(180, 200, 213)
HSL
hsl(204, 28%, 77%)
OKLCH
oklch(0.822 0.028 236.3)
CMYK
cmyk(15%, 6%, 0%, 16%)

Accessibility

WCAG contrast compliance

On White Background

1.73:1

AA AAA

On Black Background

12.16:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EE
200
#D5E0
300
#B4C8
400
#8DAB
500
#6C93
600
#5176
700
#405E
800
#2E43
900
#1D2B
950
#121B

Shades

Darker variations

1#9BB5C7
2#82A3B8
3#6990AA
4#557C97
5#47687E
6#395365
7#2A3E4B
8#1C2932
9#0E1519

Tints

Lighter variations

1#BBCDD9
2#C3D3DD
3#CAD8E1
4#D2DEE6
5#D9E3EA
6#E1E9EE
7#E8EEF2
8#F0F4F7
9#F7F9FB

Tones

Muted variations

1#B6C7D3
2#B7C7D1
3#B9C7D0
4#BAC6CE
5#BCC6CD
6#BEC6CB
7#BFC5C9
8#C1C5C8
9#C3C5C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F8
#F5F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E8EE
#E8EEF2
Light backgroundsTable row hoverSkeleton loading
200
D5E0
#D5E0E7
Secondary backgroundsInput backgroundsDividers
300
B4C8
#B4C8D5
BordersInactive statesPlaceholder text
400
8DAB
#8DABBF
Disabled statesSecondary iconsMuted text
500
6C93
#6C93AC
Primary brand colorCTAsActive elementsLinks
600
5176
#517690
Hover statesFocus ringsPrimary buttons hover
700
405E
#405E72
Active/pressed statesDark mode accentsSecondary text
800
2E43
#2E4352
Text on light backgroundsHeadingsStrong borders
900
1D2B
#1D2B34
Primary textHigh emphasis contentDark headings
950
121B
#121B21
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E8EEF2;
  --silver-200: #D5E0E7;
  --silver-300: #B4C8D5;
  --silver-400: #8DABBF;
  --silver-500: #6C93AC;
  --silver-600: #517690;
  --silver-700: #405E72;
  --silver-800: #2E4352;
  --silver-900: #1D2B34;
  --silver-950: #121B21;
}
Generate More ShadesCreate PaletteConvert Color