Silver

#BEC0CB

Blue

Color Codes

All color formats for development

HEX
#BEC0CB
RGB
rgb(190, 192, 203)
HSL
hsl(231, 11%, 77%)
OKLCH
oklch(0.81 0.016 277.8)
CMYK
cmyk(6%, 5%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

1.81:1

AA AAA

On Black Background

11.59:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F7
100
#EBEC
200
#DADB
300
#BEC0
400
#9C9F
500
#8083
600
#6468
700
#4F52
800
#393B
900
#2426
950
#1718

Shades

Darker variations

1#A8ABB9
2#9296A8
3#7D8096
4#696D83
5#575B6D
6#464857
7#343641
8#23242C
9#111216

Tints

Lighter variations

1#C4C6D0
2#CBCCD5
3#D1D3DA
4#D8D9E0
5#DEDFE5
6#E5E6EA
7#EBECEF
8#F2F2F5
9#F8F9FA

Tones

Muted variations

1#BFC0CA
2#BFC1CA
3#C0C1C9
4#C0C2C8
5#C1C2C8
6#C2C3C7
7#C2C3C6
8#C3C3C6
9#C4C4C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F7
#F7F7F8
BackgroundsSubtle highlightsCard backgrounds
100
EBEC
#EBECEF
Light backgroundsTable row hoverSkeleton loading
200
DADB
#DADBE1
Secondary backgroundsInput backgroundsDividers
300
BEC0
#BEC0CB
BordersInactive statesPlaceholder text
400
9C9F
#9C9FB0
Disabled statesSecondary iconsMuted text
500
8083
#808399
Primary brand colorCTAsActive elementsLinks
600
6468
#64687D
Hover statesFocus ringsPrimary buttons hover
700
4F52
#4F5263
Active/pressed statesDark mode accentsSecondary text
800
393B
#393B47
Text on light backgroundsHeadingsStrong borders
900
2426
#24262D
Primary textHigh emphasis contentDark headings
950
1718
#17181C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F7F7F8;
  --silver-100: #EBECEF;
  --silver-200: #DADBE1;
  --silver-300: #BEC0CB;
  --silver-400: #9C9FB0;
  --silver-500: #808399;
  --silver-600: #64687D;
  --silver-700: #4F5263;
  --silver-800: #393B47;
  --silver-900: #24262D;
  --silver-950: #17181C;
}
Generate More ShadesCreate PaletteConvert Color