Silver

#B8C9D1

Blue

Color Codes

All color formats for development

HEX
#B8C9D1
RGB
rgb(184, 201, 209)
HSL
hsl(199, 21%, 77%)
OKLCH
oklch(0.825 0.022 227.6)
CMYK
cmyk(12%, 4%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.71:1

AA AAA

On Black Background

12.31:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#E9EF
200
#D7E0
300
#B8C9
400
#93AD
500
#7495
600
#5979
700
#4760
800
#3245
900
#202C
950
#141B

Shades

Darker variations

1#A0B7C1
2#89A5B2
3#7192A2
4#5D7F8F
5#4E6A77
6#3E555F
7#2F3F47
8#1F2A30
9#101518

Tints

Lighter variations

1#BFCED5
2#C6D4DA
3#CDD9DF
4#D4DFE3
5#DCE4E8
6#E3E9EC
7#EAEFF1
8#F1F4F6
9#F8FAFA

Tones

Muted variations

1#B9C8CF
2#BAC8CE
3#BCC8CD
4#BDC7CC
5#BEC7CB
6#BFC6C9
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
E9EF
#E9EFF1
Light backgroundsTable row hoverSkeleton loading
200
D7E0
#D7E0E5
Secondary backgroundsInput backgroundsDividers
300
B8C9
#B8C9D1
BordersInactive statesPlaceholder text
400
93AD
#93ADB8
Disabled statesSecondary iconsMuted text
500
7495
#7495A4
Primary brand colorCTAsActive elementsLinks
600
5979
#597988
Hover statesFocus ringsPrimary buttons hover
700
4760
#47606C
Active/pressed statesDark mode accentsSecondary text
800
3245
#32454D
Text on light backgroundsHeadingsStrong borders
900
202C
#202C31
Primary textHigh emphasis contentDark headings
950
141B
#141B1F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F8F9;
  --silver-100: #E9EFF1;
  --silver-200: #D7E0E5;
  --silver-300: #B8C9D1;
  --silver-400: #93ADB8;
  --silver-500: #7495A4;
  --silver-600: #597988;
  --silver-700: #47606C;
  --silver-800: #32454D;
  --silver-900: #202C31;
  --silver-950: #141B1F;
}
Generate More ShadesCreate PaletteConvert Color