Silver

#B1CBD8

Blue

Color Codes

All color formats for development

HEX
#B1CBD8
RGB
rgb(177, 203, 216)
HSL
hsl(200, 33%, 77%)
OKLCH
oklch(0.827 0.033 229.3)
CMYK
cmyk(18%, 6%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.69:1

AA AAA

On Black Background

12.40:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E7EF
200
#D3E1
300
#B1CB
400
#88B0
500
#6699
600
#4B7D
700
#3C63
800
#2B47
900
#1B2D
950
#111C

Shades

Darker variations

1#97B9CB
2#7DA8BD
3#6396B0
4#4F839D
5#426D83
6#355768
7#27414E
8#1A2C34
9#0D161A

Tints

Lighter variations

1#B9D0DC
2#C1D5E0
3#C8DAE3
4#D0E0E7
5#D8E5EB
6#E0EAEF
7#E8EFF3
8#EFF5F7
9#F7FAFB

Tones

Muted variations

1#B3CAD6
2#B5CAD4
3#B7C9D2
4#B9C8D0
5#BBC8CE
6#BDC7CC
7#BFC6CA
8#C0C6C8
9#C2C5C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F8
#F5F8FA
BackgroundsSubtle highlightsCard backgrounds
100
E7EF
#E7EFF3
Light backgroundsTable row hoverSkeleton loading
200
D3E1
#D3E1E9
Secondary backgroundsInput backgroundsDividers
300
B1CB
#B1CBD8
BordersInactive statesPlaceholder text
400
88B0
#88B0C3
Disabled statesSecondary iconsMuted text
500
6699
#6699B2
Primary brand colorCTAsActive elementsLinks
600
4B7D
#4B7D95
Hover statesFocus ringsPrimary buttons hover
700
3C63
#3C6377
Active/pressed statesDark mode accentsSecondary text
800
2B47
#2B4755
Text on light backgroundsHeadingsStrong borders
900
1B2D
#1B2D36
Primary textHigh emphasis contentDark headings
950
111C
#111C22
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8FA;
  --silver-100: #E7EFF3;
  --silver-200: #D3E1E9;
  --silver-300: #B1CBD8;
  --silver-400: #88B0C3;
  --silver-500: #6699B2;
  --silver-600: #4B7D95;
  --silver-700: #3C6377;
  --silver-800: #2B4755;
  --silver-900: #1B2D36;
  --silver-950: #111C22;
}
Generate More ShadesCreate PaletteConvert Color