Silver

#B8CAD1

Blue

Color Codes

All color formats for development

HEX
#B8CAD1
RGB
rgb(184, 202, 209)
HSL
hsl(197, 21%, 77%)
OKLCH
oklch(0.827 0.022 223.1)
CMYK
cmyk(12%, 3%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.69:1

AA AAA

On Black Background

12.41:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#E9EF
200
#D7E1
300
#B8CA
400
#93AE
500
#7497
600
#597A
700
#4761
800
#3246
900
#202D
950
#141C

Shades

Darker variations

1#A0B8C1
2#89A6B2
3#7194A2
4#5D818F
5#4E6B77
6#3E565F
7#2F4047
8#1F2B30
9#101518

Tints

Lighter variations

1#BFCFD5
2#C6D4DA
3#CDDADF
4#D4DFE3
5#DCE4E8
6#E3EAEC
7#EAEFF1
8#F1F4F6
9#F8FAFA

Tones

Muted variations

1#B9C9CF
2#BAC9CE
3#BCC8CD
4#BDC8CC
5#BEC7CB
6#BFC6C9
7#C1C6C8
8#C2C5C7
9#C3C5C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F8
#F6F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E9EF
#E9EFF1
Light backgroundsTable row hoverSkeleton loading
200
D7E1
#D7E1E5
Secondary backgroundsInput backgroundsDividers
300
B8CA
#B8CAD1
BordersInactive statesPlaceholder text
400
93AE
#93AEB8
Disabled statesSecondary iconsMuted text
500
7497
#7497A4
Primary brand colorCTAsActive elementsLinks
600
597A
#597A88
Hover statesFocus ringsPrimary buttons hover
700
4761
#47616C
Active/pressed statesDark mode accentsSecondary text
800
3246
#32464D
Text on light backgroundsHeadingsStrong borders
900
202D
#202D31
Primary textHigh emphasis contentDark headings
950
141C
#141C1F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F8F9;
  --silver-100: #E9EFF1;
  --silver-200: #D7E1E5;
  --silver-300: #B8CAD1;
  --silver-400: #93AEB8;
  --silver-500: #7497A4;
  --silver-600: #597A88;
  --silver-700: #47616C;
  --silver-800: #32464D;
  --silver-900: #202D31;
  --silver-950: #141C1F;
}
Generate More ShadesCreate PaletteConvert Color