Silver

#B9CACF

Cyan

Color Codes

All color formats for development

HEX
#B9CACF
RGB
rgb(185, 202, 207)
HSL
hsl(194, 19%, 77%)
OKLCH
oklch(0.828 0.02 217.3)
CMYK
cmyk(11%, 2%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

1.69:1

AA AAA

On Black Background

12.41: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
#95AF
500
#7698
600
#5B7C
700
#4862
800
#3446
900
#212D
950
#151C

Shades

Darker variations

1#A2B9C0
2#8AA7B0
3#7395A0
4#5F828C
5#506C75
6#40565D
7#304146
8#202B2F
9#101617

Tints

Lighter variations

1#C0D0D4
2#C7D5D9
3#CEDADE
4#D5DFE2
5#DCE5E7
6#E3EAEC
7#EAEFF1
8#F1F4F5
9#F8FAFA

Tones

Muted variations

1#BACACE
2#BBC9CD
3#BDC9CC
4#BEC8CB
5#BFC7CA
6#C0C7C9
7#C1C6C8
8#C2C6C7
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
95AF
#95AFB7
Disabled statesSecondary iconsMuted text
500
7698
#7698A2
Primary brand colorCTAsActive elementsLinks
600
5B7C
#5B7C86
Hover statesFocus ringsPrimary buttons hover
700
4862
#48626A
Active/pressed statesDark mode accentsSecondary text
800
3446
#34464C
Text on light backgroundsHeadingsStrong borders
900
212D
#212D31
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: #95AFB7;
  --silver-500: #7698A2;
  --silver-600: #5B7C86;
  --silver-700: #48626A;
  --silver-800: #34464C;
  --silver-900: #212D31;
  --silver-950: #151C1E;
}
Generate More ShadesCreate PaletteConvert Color