Silver

#BAC5CF

Blue

Color Codes

All color formats for development

HEX
#BAC5CF
RGB
rgb(186, 197, 207)
HSL
hsl(209, 18%, 77%)
OKLCH
oklch(0.818 0.019 245.4)
CMYK
cmyk(10%, 5%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.75:1

AA AAA

On Black Background

11.98:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAED
200
#D8DE
300
#BAC5
400
#96A6
500
#788D
600
#5C71
700
#495A
800
#3440
900
#2129
950
#151A

Shades

Darker variations

1#A3B1BF
2#8B9EAF
3#748A9F
4#61778B
5#516374
6#404F5D
7#303B46
8#20282E
9#101417

Tints

Lighter variations

1#C1CBD4
2#C8D0D9
3#CFD6DD
4#D5DCE2
5#DCE2E7
6#E3E8EC
7#EAEEF1
8#F1F3F5
9#F8F9FA

Tones

Muted variations

1#BBC5CE
2#BCC5CD
3#BDC5CC
4#BEC5CB
5#BFC5CA
6#C0C4C9
7#C1C4C8
8#C2C4C6
9#C3C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F9
BackgroundsSubtle highlightsCard backgrounds
100
EAED
#EAEDF0
Light backgroundsTable row hoverSkeleton loading
200
D8DE
#D8DEE4
Secondary backgroundsInput backgroundsDividers
300
BAC5
#BAC5CF
BordersInactive statesPlaceholder text
400
96A6
#96A6B6
Disabled statesSecondary iconsMuted text
500
788D
#788DA1
Primary brand colorCTAsActive elementsLinks
600
5C71
#5C7184
Hover statesFocus ringsPrimary buttons hover
700
495A
#495A69
Active/pressed statesDark mode accentsSecondary text
800
3440
#34404B
Text on light backgroundsHeadingsStrong borders
900
2129
#212930
Primary textHigh emphasis contentDark headings
950
151A
#151A1E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAEDF0;
  --silver-200: #D8DEE4;
  --silver-300: #BAC5CF;
  --silver-400: #96A6B6;
  --silver-500: #788DA1;
  --silver-600: #5C7184;
  --silver-700: #495A69;
  --silver-800: #34404B;
  --silver-900: #212930;
  --silver-950: #151A1E;
}
Generate More ShadesCreate PaletteConvert Color