Silver

#BABBCF

Blue

Color Codes

All color formats for development

HEX
#BABBCF
RGB
rgb(186, 187, 207)
HSL
hsl(237, 18%, 77%)
OKLCH
oklch(0.798 0.028 283.5)
CMYK
cmyk(10%, 10%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.89:1

AA AAA

On Black Background

11.10:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F6
100
#EAEA
200
#D8D8
300
#BABB
400
#9697
500
#787A
600
#5C5E
700
#494B
800
#3435
900
#2122
950
#1515

Shades

Darker variations

1#A3A4BF
2#8B8DAF
3#74769F
4#61638B
5#515274
6#40425D
7#303146
8#20212E
9#101017

Tints

Lighter variations

1#C1C2D4
2#C8C8D9
3#CFCFDD
4#D5D6E2
5#DCDDE7
6#E3E4EC
7#EAEBF1
8#F1F1F5
9#F8F8FA

Tones

Muted variations

1#BBBCCE
2#BCBDCD
3#BDBECC
4#BEBFCB
5#BFC0CA
6#C0C1C9
7#C1C1C8
8#C2C2C6
9#C3C3C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F6
#F6F6F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEA
#EAEAF0
Light backgroundsTable row hoverSkeleton loading
200
D8D8
#D8D8E4
Secondary backgroundsInput backgroundsDividers
300
BABB
#BABBCF
BordersInactive statesPlaceholder text
400
9697
#9697B6
Disabled statesSecondary iconsMuted text
500
787A
#787AA1
Primary brand colorCTAsActive elementsLinks
600
5C5E
#5C5E84
Hover statesFocus ringsPrimary buttons hover
700
494B
#494B69
Active/pressed statesDark mode accentsSecondary text
800
3435
#34354B
Text on light backgroundsHeadingsStrong borders
900
2122
#212230
Primary textHigh emphasis contentDark headings
950
1515
#15151E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F6F9;
  --silver-100: #EAEAF0;
  --silver-200: #D8D8E4;
  --silver-300: #BABBCF;
  --silver-400: #9697B6;
  --silver-500: #787AA1;
  --silver-600: #5C5E84;
  --silver-700: #494B69;
  --silver-800: #34354B;
  --silver-900: #212230;
  --silver-950: #15151E;
}
Generate More ShadesCreate PaletteConvert Color