Silver

#BBCACE

Cyan

Color Codes

All color formats for development

HEX
#BBCACE
RGB
rgb(187, 202, 206)
HSL
hsl(193, 16%, 77%)
OKLCH
oklch(0.829 0.017 215.5)
CMYK
cmyk(9%, 2%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.69:1

AA AAA

On Black Background

12.45:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#EAEF
200
#D9E1
300
#BBCA
400
#97AE
500
#7A97
600
#5E7A
700
#4B61
800
#3646
900
#222C
950
#151C

Shades

Darker variations

1#A4B8BD
2#8DA6AD
3#77949C
4#638089
5#526B72
6#42565B
7#314044
8#212B2E
9#101517

Tints

Lighter variations

1#C2CFD3
2#C9D4D8
3#CFDADD
4#D6DFE1
5#DDE4E6
6#E4EAEB
7#EBEFF0
8#F1F4F5
9#F8FAFA

Tones

Muted variations

1#BCC9CD
2#BDC9CC
3#BEC8CB
4#BFC8CA
5#C0C7C9
6#C1C6C8
7#C2C6C7
8#C2C5C6
9#C3C5C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F8
#F6F8F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEF
#EAEFF0
Light backgroundsTable row hoverSkeleton loading
200
D9E1
#D9E1E3
Secondary backgroundsInput backgroundsDividers
300
BBCA
#BBCACE
BordersInactive statesPlaceholder text
400
97AE
#97AEB4
Disabled statesSecondary iconsMuted text
500
7A97
#7A979F
Primary brand colorCTAsActive elementsLinks
600
5E7A
#5E7A82
Hover statesFocus ringsPrimary buttons hover
700
4B61
#4B6168
Active/pressed statesDark mode accentsSecondary text
800
3646
#36464A
Text on light backgroundsHeadingsStrong borders
900
222C
#222C2F
Primary textHigh emphasis contentDark headings
950
151C
#151C1E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F8F9;
  --silver-100: #EAEFF0;
  --silver-200: #D9E1E3;
  --silver-300: #BBCACE;
  --silver-400: #97AEB4;
  --silver-500: #7A979F;
  --silver-600: #5E7A82;
  --silver-700: #4B6168;
  --silver-800: #36464A;
  --silver-900: #222C2F;
  --silver-950: #151C1E;
}
Generate More ShadesCreate PaletteConvert Color