Silver

#BAC1CE

Blue

Color Codes

All color formats for development

HEX
#BAC1CE
RGB
rgb(186, 193, 206)
HSL
hsl(219, 17%, 77%)
OKLCH
oklch(0.809 0.02 263)
CMYK
cmyk(10%, 6%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.81:1

AA AAA

On Black Background

11.61:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEC
200
#D8DC
300
#BAC1
400
#97A1
500
#7986
600
#5D6A
700
#4A55
800
#353C
900
#2227
950
#1518

Shades

Darker variations

1#A3ADBE
2#8C98AE
3#75839D
4#62708A
5#515D73
6#414B5C
7#313845
8#21252E
9#101317

Tints

Lighter variations

1#C1C8D3
2#C8CED8
3#CFD4DD
4#D6DAE2
5#DDE0E7
6#E4E6EC
7#EAEDF0
8#F1F3F5
9#F8F9FA

Tones

Muted variations

1#BBC2CD
2#BCC2CC
3#BDC2CB
4#BEC3CA
5#BFC3C9
6#C0C3C8
7#C1C3C7
8#C2C4C6
9#C3C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEC
#EAECF0
Light backgroundsTable row hoverSkeleton loading
200
D8DC
#D8DCE3
Secondary backgroundsInput backgroundsDividers
300
BAC1
#BAC1CE
BordersInactive statesPlaceholder text
400
97A1
#97A1B5
Disabled statesSecondary iconsMuted text
500
7986
#7986A0
Primary brand colorCTAsActive elementsLinks
600
5D6A
#5D6A83
Hover statesFocus ringsPrimary buttons hover
700
4A55
#4A5568
Active/pressed statesDark mode accentsSecondary text
800
353C
#353C4B
Text on light backgroundsHeadingsStrong borders
900
2227
#222730
Primary textHigh emphasis contentDark headings
950
1518
#15181E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAECF0;
  --silver-200: #D8DCE3;
  --silver-300: #BAC1CE;
  --silver-400: #97A1B5;
  --silver-500: #7986A0;
  --silver-600: #5D6A83;
  --silver-700: #4A5568;
  --silver-800: #353C4B;
  --silver-900: #222730;
  --silver-950: #15181E;
}
Generate More ShadesCreate PaletteConvert Color