Silver

#BAC3CE

Blue

Color Codes

All color formats for development

HEX
#BAC3CE
RGB
rgb(186, 195, 206)
HSL
hsl(213, 17%, 77%)
OKLCH
oklch(0.814 0.018 253.4)
CMYK
cmyk(10%, 5%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.78:1

AA AAA

On Black Background

11.79:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAED
200
#D8DD
300
#BAC3
400
#97A4
500
#798A
600
#5D6E
700
#4A58
800
#353F
900
#2228
950
#1519

Shades

Darker variations

1#A3AFBE
2#8C9BAE
3#75879D
4#62748A
5#516173
6#414D5C
7#313A45
8#21272E
9#101317

Tints

Lighter variations

1#C1C9D3
2#C8CFD8
3#CFD5DD
4#D6DBE2
5#DDE1E7
6#E4E7EC
7#EAEDF0
8#F1F3F5
9#F8F9FA

Tones

Muted variations

1#BBC3CD
2#BCC4CC
3#BDC4CB
4#BEC4CA
5#BFC4C9
6#C0C4C8
7#C1C4C7
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
D8DD
#D8DDE3
Secondary backgroundsInput backgroundsDividers
300
BAC3
#BAC3CE
BordersInactive statesPlaceholder text
400
97A4
#97A4B5
Disabled statesSecondary iconsMuted text
500
798A
#798AA0
Primary brand colorCTAsActive elementsLinks
600
5D6E
#5D6E83
Hover statesFocus ringsPrimary buttons hover
700
4A58
#4A5868
Active/pressed statesDark mode accentsSecondary text
800
353F
#353F4B
Text on light backgroundsHeadingsStrong borders
900
2228
#222830
Primary textHigh emphasis contentDark headings
950
1519
#15191E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAEDF0;
  --silver-200: #D8DDE3;
  --silver-300: #BAC3CE;
  --silver-400: #97A4B5;
  --silver-500: #798AA0;
  --silver-600: #5D6E83;
  --silver-700: #4A5868;
  --silver-800: #353F4B;
  --silver-900: #222830;
  --silver-950: #15191E;
}
Generate More ShadesCreate PaletteConvert Color