Silver

#BEC7CB

Blue

Color Codes

All color formats for development

HEX
#BEC7CB
RGB
rgb(190, 199, 203)
HSL
hsl(198, 11%, 77%)
OKLCH
oklch(0.824 0.011 226)
CMYK
cmyk(6%, 2%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

1.72:1

AA AAA

On Black Background

12.22:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F8
100
#EBEE
200
#DADF
300
#BEC7
400
#9CAA
500
#8091
600
#6475
700
#4F5D
800
#3943
900
#242B
950
#171B

Shades

Darker variations

1#A8B4B9
2#92A1A8
3#7D8F96
4#697B83
5#57666D
6#465257
7#343D41
8#23292C
9#111416

Tints

Lighter variations

1#C4CDD0
2#CBD2D5
3#D1D8DA
4#D8DDE0
5#DEE3E5
6#E5E9EA
7#EBEEEF
8#F2F4F5
9#F8F9FA

Tones

Muted variations

1#BFC7CA
2#BFC6CA
3#C0C6C9
4#C0C6C8
5#C1C6C8
6#C2C5C7
7#C2C5C6
8#C3C5C6
9#C4C5C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F7F8
#F7F8F8
BackgroundsSubtle highlightsCard backgrounds
100
EBEE
#EBEEEF
Light backgroundsTable row hoverSkeleton loading
200
DADF
#DADFE1
Secondary backgroundsInput backgroundsDividers
300
BEC7
#BEC7CB
BordersInactive statesPlaceholder text
400
9CAA
#9CAAB0
Disabled statesSecondary iconsMuted text
500
8091
#809199
Primary brand colorCTAsActive elementsLinks
600
6475
#64757D
Hover statesFocus ringsPrimary buttons hover
700
4F5D
#4F5D63
Active/pressed statesDark mode accentsSecondary text
800
3943
#394347
Text on light backgroundsHeadingsStrong borders
900
242B
#242B2D
Primary textHigh emphasis contentDark headings
950
171B
#171B1C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F7F8F8;
  --silver-100: #EBEEEF;
  --silver-200: #DADFE1;
  --silver-300: #BEC7CB;
  --silver-400: #9CAAB0;
  --silver-500: #809199;
  --silver-600: #64757D;
  --silver-700: #4F5D63;
  --silver-800: #394347;
  --silver-900: #242B2D;
  --silver-950: #171B1C;
}
Generate More ShadesCreate PaletteConvert Color