Silver

#B9C0D0

Blue

Color Codes

All color formats for development

HEX
#B9C0D0
RGB
rgb(185, 192, 208)
HSL
hsl(222, 20%, 77%)
OKLCH
oklch(0.807 0.024 266.9)
CMYK
cmyk(11%, 8%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.82:1

AA AAA

On Black Background

11.51:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F7
100
#EAEC
200
#D7DB
300
#B9C0
400
#949F
500
#7583
600
#5A67
700
#4752
800
#333B
900
#2126
950
#1417

Shades

Darker variations

1#A1AAC0
2#8995B1
3#7280A1
4#5E6C8D
5#4F5A76
6#3F485E
7#2F3647
8#1F242F
9#101218

Tints

Lighter variations

1#C0C6D5
2#C7CCD9
3#CED3DE
4#D5D9E3
5#DCDFE8
6#E3E6EC
7#EAECF1
8#F1F2F6
9#F8F9FA

Tones

Muted variations

1#BAC0CF
2#BBC1CE
3#BCC1CD
4#BDC2CB
5#BEC2CA
6#C0C2C9
7#C1C3C8
8#C2C3C7
9#C3C4C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F7
#F6F7F9
BackgroundsSubtle highlightsCard backgrounds
100
EAEC
#EAECF1
Light backgroundsTable row hoverSkeleton loading
200
D7DB
#D7DBE4
Secondary backgroundsInput backgroundsDividers
300
B9C0
#B9C0D0
BordersInactive statesPlaceholder text
400
949F
#949FB8
Disabled statesSecondary iconsMuted text
500
7583
#7583A3
Primary brand colorCTAsActive elementsLinks
600
5A67
#5A6787
Hover statesFocus ringsPrimary buttons hover
700
4752
#47526B
Active/pressed statesDark mode accentsSecondary text
800
333B
#333B4D
Text on light backgroundsHeadingsStrong borders
900
2126
#212631
Primary textHigh emphasis contentDark headings
950
1417
#14171F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F7F9;
  --silver-100: #EAECF1;
  --silver-200: #D7DBE4;
  --silver-300: #B9C0D0;
  --silver-400: #949FB8;
  --silver-500: #7583A3;
  --silver-600: #5A6787;
  --silver-700: #47526B;
  --silver-800: #333B4D;
  --silver-900: #212631;
  --silver-950: #14171F;
}
Generate More ShadesCreate PaletteConvert Color