Silver

#BABCCF

Blue

Color Codes

All color formats for development

HEX
#BABCCF
RGB
rgb(186, 188, 207)
HSL
hsl(234, 18%, 77%)
OKLCH
oklch(0.8 0.027 281)
CMYK
cmyk(10%, 9%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.88:1

AA AAA

On Black Background

11.18:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F6
100
#EAEB
200
#D8D9
300
#BABC
400
#9699
500
#787C
600
#5C60
700
#494C
800
#3437
900
#2123
950
#1516

Shades

Darker variations

1#A3A5BF
2#8B8FAF
3#74799F
4#61658B
5#515474
6#40435D
7#303246
8#20222E
9#101117

Tints

Lighter variations

1#C1C3D4
2#C8C9D9
3#CFD0DD
4#D5D7E2
5#DCDDE7
6#E3E4EC
7#EAEBF1
8#F1F2F5
9#F8F8FA

Tones

Muted variations

1#BBBDCE
2#BCBECD
3#BDBECC
4#BEBFCB
5#BFC0CA
6#C0C1C9
7#C1C2C8
8#C2C3C6
9#C3C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F6
#F6F6F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEB
#EAEBF0
Light backgroundsTable row hoverSkeleton loading
200
D8D9
#D8D9E4
Secondary backgroundsInput backgroundsDividers
300
BABC
#BABCCF
BordersInactive statesPlaceholder text
400
9699
#9699B6
Disabled statesSecondary iconsMuted text
500
787C
#787CA1
Primary brand colorCTAsActive elementsLinks
600
5C60
#5C6084
Hover statesFocus ringsPrimary buttons hover
700
494C
#494C69
Active/pressed statesDark mode accentsSecondary text
800
3437
#34374B
Text on light backgroundsHeadingsStrong borders
900
2123
#212330
Primary textHigh emphasis contentDark headings
950
1516
#15161E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F6F9;
  --silver-100: #EAEBF0;
  --silver-200: #D8D9E4;
  --silver-300: #BABCCF;
  --silver-400: #9699B6;
  --silver-500: #787CA1;
  --silver-600: #5C6084;
  --silver-700: #494C69;
  --silver-800: #34374B;
  --silver-900: #212330;
  --silver-950: #15161E;
}
Generate More ShadesCreate PaletteConvert Color