Silver

#B7C9D1

Blue

Color Codes

All color formats for development

HEX
#B7C9D1
RGB
rgb(183, 201, 209)
HSL
hsl(198, 22%, 77%)
OKLCH
oklch(0.825 0.023 226.2)
CMYK
cmyk(12%, 4%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.71:1

AA AAA

On Black Background

12.29:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#E9EF
200
#D7E1
300
#B7CA
400
#92AE
500
#7396
600
#587A
700
#4661
800
#3245
900
#202C
950
#141C

Shades

Darker variations

1#9FB8C2
2#88A6B3
3#7094A3
4#5C8090
5#4D6B78
6#3D5560
7#2E4048
8#1F2B30
9#0F1518

Tints

Lighter variations

1#BFCFD6
2#C6D4DA
3#CDDADF
4#D4DFE4
5#DBE4E8
6#E2EAED
7#EAEFF1
8#F1F4F6
9#F8FAFA

Tones

Muted variations

1#B9C9D0
2#BAC8CF
3#BBC8CD
4#BDC7CC
5#BEC7CB
6#BFC6CA
7#C0C6C8
8#C2C5C7
9#C3C5C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F8
#F6F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E9EF
#E9EFF1
Light backgroundsTable row hoverSkeleton loading
200
D7E1
#D7E1E5
Secondary backgroundsInput backgroundsDividers
300
B7CA
#B7CAD1
BordersInactive statesPlaceholder text
400
92AE
#92AEB9
Disabled statesSecondary iconsMuted text
500
7396
#7396A5
Primary brand colorCTAsActive elementsLinks
600
587A
#587A89
Hover statesFocus ringsPrimary buttons hover
700
4661
#46616D
Active/pressed statesDark mode accentsSecondary text
800
3245
#32454E
Text on light backgroundsHeadingsStrong borders
900
202C
#202C32
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: #E9EFF1;
  --silver-200: #D7E1E5;
  --silver-300: #B7CAD1;
  --silver-400: #92AEB9;
  --silver-500: #7396A5;
  --silver-600: #587A89;
  --silver-700: #46616D;
  --silver-800: #32454E;
  --silver-900: #202C32;
  --silver-950: #141C1F;
}
Generate More ShadesCreate PaletteConvert Color