Silver

#B7CAD1

Blue

Color Codes

All color formats for development

HEX
#B7CAD1
RGB
rgb(183, 202, 209)
HSL
hsl(196, 22%, 77%)
OKLCH
oklch(0.827 0.023 221.9)
CMYK
cmyk(12%, 3%, 0%, 18%)

Accessibility

WCAG contrast compliance

On White Background

1.70:1

AA AAA

On Black Background

12.38: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
#92AF
500
#7398
600
#587C
700
#4662
800
#3246
900
#202D
950
#141C

Shades

Darker variations

1#9FB9C2
2#88A7B3
3#7096A3
4#5C8290
5#4D6C78
6#3D5760
7#2E4148
8#1F2B30
9#0F1618

Tints

Lighter variations

1#BFD0D6
2#C6D5DA
3#CDDADF
4#D4DFE4
5#DBE5E8
6#E2EAED
7#EAEFF1
8#F1F4F6
9#F8FAFA

Tones

Muted variations

1#B9CAD0
2#BAC9CF
3#BBC9CD
4#BDC8CC
5#BEC7CB
6#BFC7CA
7#C0C6C8
8#C2C6C7
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
92AF
#92AFB9
Disabled statesSecondary iconsMuted text
500
7398
#7398A5
Primary brand colorCTAsActive elementsLinks
600
587C
#587C89
Hover statesFocus ringsPrimary buttons hover
700
4662
#46626D
Active/pressed statesDark mode accentsSecondary text
800
3246
#32464E
Text on light backgroundsHeadingsStrong borders
900
202D
#202D32
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: #92AFB9;
  --silver-500: #7398A5;
  --silver-600: #587C89;
  --silver-700: #46626D;
  --silver-800: #32464E;
  --silver-900: #202D32;
  --silver-950: #141C1F;
}
Generate More ShadesCreate PaletteConvert Color