Silver

#B7C8D1

Blue

Color Codes

All color formats for development

HEX
#B7C8D1
RGB
rgb(183, 200, 209)
HSL
hsl(201, 22%, 77%)
OKLCH
oklch(0.823 0.022 230.6)
CMYK
cmyk(12%, 4%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.72:1

AA AAA

On Black Background

12.20:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#E9EE
200
#D7E0
300
#B7C8
400
#92AC
500
#7394
600
#5878
700
#465F
800
#3244
900
#202B
950
#141B

Shades

Darker variations

1#9FB6C2
2#88A4B3
3#7091A3
4#5C7E90
5#4D6978
6#3D5460
7#2E3F48
8#1F2A30
9#0F1518

Tints

Lighter variations

1#BFCED6
2#C6D3DA
3#CDD9DF
4#D4DEE4
5#DBE4E8
6#E2E9ED
7#EAEFF1
8#F1F4F6
9#F8FAFA

Tones

Muted variations

1#B9C8D0
2#BAC7CF
3#BBC7CD
4#BDC7CC
5#BEC6CB
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
E9EE
#E9EEF1
Light backgroundsTable row hoverSkeleton loading
200
D7E0
#D7E0E5
Secondary backgroundsInput backgroundsDividers
300
B7C8
#B7C8D1
BordersInactive statesPlaceholder text
400
92AC
#92ACB9
Disabled statesSecondary iconsMuted text
500
7394
#7394A5
Primary brand colorCTAsActive elementsLinks
600
5878
#587889
Hover statesFocus ringsPrimary buttons hover
700
465F
#465F6D
Active/pressed statesDark mode accentsSecondary text
800
3244
#32444E
Text on light backgroundsHeadingsStrong borders
900
202B
#202B32
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: #E9EEF1;
  --silver-200: #D7E0E5;
  --silver-300: #B7C8D1;
  --silver-400: #92ACB9;
  --silver-500: #7394A5;
  --silver-600: #587889;
  --silver-700: #465F6D;
  --silver-800: #32444E;
  --silver-900: #202B32;
  --silver-950: #141B1F;
}
Generate More ShadesCreate PaletteConvert Color