Silver

#B3D1D5

Cyan

Color Codes

All color formats for development

HEX
#B3D1D5
RGB
rgb(179, 209, 213)
HSL
hsl(187, 29%, 77%)
OKLCH
oklch(0.84 0.033 206.4)
CMYK
cmyk(16%, 2%, 0%, 16%)

Accessibility

WCAG contrast compliance

On White Background

1.62:1

AA AAA

On Black Background

13.00:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E8F1
200
#D4E5
300
#B3D1
400
#8CBA
500
#6BA6
600
#5089
700
#3F6D
800
#2D4E
900
#1D32
950
#121F

Shades

Darker variations

1#9AC2C7
2#81B3B9
3#67A4AC
4#549098
5#46787F
6#386065
7#2A484C
8#1C3033
9#0E1819

Tints

Lighter variations

1#BBD6DA
2#C2DBDE
3#CADFE2
4#D2E4E6
5#D9E8EA
6#E1EDEE
7#E8F1F3
8#F0F6F7
9#F7FAFB

Tones

Muted variations

1#B5D0D4
2#B7CFD2
3#B8CDD0
4#BACCCF
5#BCCBCD
6#BECACB
7#BFC8C9
8#C1C7C8
9#C3C6C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E8F1
#E8F1F2
Light backgroundsTable row hoverSkeleton loading
200
D4E5
#D4E5E7
Secondary backgroundsInput backgroundsDividers
300
B3D1
#B3D1D5
BordersInactive statesPlaceholder text
400
8CBA
#8CBAC0
Disabled statesSecondary iconsMuted text
500
6BA6
#6BA6AE
Primary brand colorCTAsActive elementsLinks
600
5089
#508991
Hover statesFocus ringsPrimary buttons hover
700
3F6D
#3F6D73
Active/pressed statesDark mode accentsSecondary text
800
2D4E
#2D4E52
Text on light backgroundsHeadingsStrong borders
900
1D32
#1D3235
Primary textHigh emphasis contentDark headings
950
121F
#121F21
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9FA;
  --silver-100: #E8F1F2;
  --silver-200: #D4E5E7;
  --silver-300: #B3D1D5;
  --silver-400: #8CBAC0;
  --silver-500: #6BA6AE;
  --silver-600: #508991;
  --silver-700: #3F6D73;
  --silver-800: #2D4E52;
  --silver-900: #1D3235;
  --silver-950: #121F21;
}
Generate More ShadesCreate PaletteConvert Color