Silver

#B9C9CF

Blue

Color Codes

All color formats for development

HEX
#B9C9CF
RGB
rgb(185, 201, 207)
HSL
hsl(196, 19%, 77%)
OKLCH
oklch(0.826 0.019 222.2)
CMYK
cmyk(11%, 3%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.70:1

AA AAA

On Black Background

12.32:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#EAEF
200
#D8E1
300
#B9CA
400
#95AE
500
#7696
600
#5B7A
700
#4861
800
#3445
900
#212C
950
#151C

Shades

Darker variations

1#A2B8C0
2#8AA6B0
3#7394A0
4#5F808C
5#506B75
6#40565D
7#304046
8#202B2F
9#101517

Tints

Lighter variations

1#C0CFD4
2#C7D4D9
3#CEDADE
4#D5DFE2
5#DCE4E7
6#E3EAEC
7#EAEFF1
8#F1F4F5
9#F8FAFA

Tones

Muted variations

1#BAC9CE
2#BBC9CD
3#BDC8CC
4#BEC7CB
5#BFC7CA
6#C0C6C9
7#C1C6C8
8#C2C5C7
9#C3C5C5

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F8
#F6F8F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEF
#EAEFF1
Light backgroundsTable row hoverSkeleton loading
200
D8E1
#D8E1E4
Secondary backgroundsInput backgroundsDividers
300
B9CA
#B9CACF
BordersInactive statesPlaceholder text
400
95AE
#95AEB7
Disabled statesSecondary iconsMuted text
500
7696
#7696A2
Primary brand colorCTAsActive elementsLinks
600
5B7A
#5B7A86
Hover statesFocus ringsPrimary buttons hover
700
4861
#48616A
Active/pressed statesDark mode accentsSecondary text
800
3445
#34454C
Text on light backgroundsHeadingsStrong borders
900
212C
#212C31
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: #EAEFF1;
  --silver-200: #D8E1E4;
  --silver-300: #B9CACF;
  --silver-400: #95AEB7;
  --silver-500: #7696A2;
  --silver-600: #5B7A86;
  --silver-700: #48616A;
  --silver-800: #34454C;
  --silver-900: #212C31;
  --silver-950: #151C1E;
}
Generate More ShadesCreate PaletteConvert Color