Silver

#BEC8CA

Cyan

Color Codes

All color formats for development

HEX
#BEC8CA
RGB
rgb(190, 200, 202)
HSL
hsl(190, 10%, 77%)
OKLCH
oklch(0.826 0.011 211)
CMYK
cmyk(6%, 1%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

1.71:1

AA AAA

On Black Background

12.30:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F7F8
100
#EBEE
200
#DBE0
300
#BEC8
400
#9DAC
500
#8194
600
#6578
700
#505F
800
#3944
900
#252C
950
#171B

Shades

Darker variations

1#A9B6B9
2#93A4A7
3#7E9195
4#6A7E82
5#58696C
6#475456
7#353F41
8#232A2B
9#121516

Tints

Lighter variations

1#C5CECF
2#CBD3D5
3#D2D9DA
4#D8DEDF
5#DFE4E5
6#E5E9EA
7#ECEFEF
8#F2F4F4
9#F9FAFA

Tones

Muted variations

1#BFC8CA
2#C0C7C9
3#C0C7C8
4#C1C7C8
5#C1C6C7
6#C2C6C7
7#C3C6C6
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
DBE0
#DBE0E1
Secondary backgroundsInput backgroundsDividers
300
BEC8
#BEC8CA
BordersInactive statesPlaceholder text
400
9DAC
#9DACAF
Disabled statesSecondary iconsMuted text
500
8194
#819498
Primary brand colorCTAsActive elementsLinks
600
6578
#65787B
Hover statesFocus ringsPrimary buttons hover
700
505F
#505F62
Active/pressed statesDark mode accentsSecondary text
800
3944
#394446
Text on light backgroundsHeadingsStrong borders
900
252C
#252C2D
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: #DBE0E1;
  --silver-300: #BEC8CA;
  --silver-400: #9DACAF;
  --silver-500: #819498;
  --silver-600: #65787B;
  --silver-700: #505F62;
  --silver-800: #394446;
  --silver-900: #252C2D;
  --silver-950: #171B1C;
}
Generate More ShadesCreate PaletteConvert Color