Silver

#B9CAD0

Blue

Color Codes

All color formats for development

HEX
#B9CAD0
RGB
rgb(185, 202, 208)
HSL
hsl(196, 20%, 77%)
OKLCH
oklch(0.828 0.02 220.9)
CMYK
cmyk(11%, 3%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.69:1

AA AAA

On Black Background

12.42:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#EAEF
200
#D7E1
300
#B9CA
400
#94AE
500
#7597
600
#5A7B
700
#4762
800
#3346
900
#212D
950
#141C

Shades

Darker variations

1#A1B8C0
2#89A6B1
3#7294A1
4#5E818D
5#4F6B76
6#3F565E
7#2F4047
8#1F2B2F
9#101518

Tints

Lighter variations

1#C0CFD5
2#C7D4D9
3#CEDADE
4#D5DFE3
5#DCE4E8
6#E3EAEC
7#EAEFF1
8#F1F4F6
9#F8FAFA

Tones

Muted variations

1#BAC9CF
2#BBC9CE
3#BCC8CD
4#BDC8CB
5#BEC7CA
6#C0C7C9
7#C1C6C8
8#C2C5C7
9#C3C5C6

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
D7E1
#D7E1E4
Secondary backgroundsInput backgroundsDividers
300
B9CA
#B9CAD0
BordersInactive statesPlaceholder text
400
94AE
#94AEB8
Disabled statesSecondary iconsMuted text
500
7597
#7597A3
Primary brand colorCTAsActive elementsLinks
600
5A7B
#5A7B87
Hover statesFocus ringsPrimary buttons hover
700
4762
#47626B
Active/pressed statesDark mode accentsSecondary text
800
3346
#33464D
Text on light backgroundsHeadingsStrong borders
900
212D
#212D31
Primary textHigh emphasis contentDark headings
950
141C
#141C1F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F8F9;
  --silver-100: #EAEFF1;
  --silver-200: #D7E1E4;
  --silver-300: #B9CAD0;
  --silver-400: #94AEB8;
  --silver-500: #7597A3;
  --silver-600: #5A7B87;
  --silver-700: #47626B;
  --silver-800: #33464D;
  --silver-900: #212D31;
  --silver-950: #141C1F;
}
Generate More ShadesCreate PaletteConvert Color