Silver

#B3D3D5

Cyan

Color Codes

All color formats for development

HEX
#B3D3D5
RGB
rgb(179, 211, 213)
HSL
hsl(184, 29%, 77%)
OKLCH
oklch(0.844 0.034 201.2)
CMYK
cmyk(16%, 1%, 0%, 16%)

Accessibility

WCAG contrast compliance

On White Background

1.59:1

AA AAA

On Black Background

13.20:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E8F2
200
#D4E6
300
#B3D3
400
#8CBC
500
#6BA9
600
#508C
700
#3F70
800
#2D50
900
#1D33
950
#1220

Shades

Darker variations

1#9AC4C7
2#81B6B9
3#67A7AC
4#549398
5#467B7F
6#386265
7#2A4A4C
8#1C3133
9#0E1919

Tints

Lighter variations

1#BBD7DA
2#C2DCDE
3#CAE0E2
4#D2E5E6
5#D9E9EA
6#E1EDEE
7#E8F2F3
8#F0F6F7
9#F7FBFB

Tones

Muted variations

1#B5D2D4
2#B7D0D2
3#B8CFD0
4#BACDCF
5#BCCCCD
6#BECACB
7#BFC9C9
8#C1C7C8
9#C3C6C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E8F2
#E8F2F2
Light backgroundsTable row hoverSkeleton loading
200
D4E6
#D4E6E7
Secondary backgroundsInput backgroundsDividers
300
B3D3
#B3D3D5
BordersInactive statesPlaceholder text
400
8CBC
#8CBCC0
Disabled statesSecondary iconsMuted text
500
6BA9
#6BA9AE
Primary brand colorCTAsActive elementsLinks
600
508C
#508C91
Hover statesFocus ringsPrimary buttons hover
700
3F70
#3F7073
Active/pressed statesDark mode accentsSecondary text
800
2D50
#2D5052
Text on light backgroundsHeadingsStrong borders
900
1D33
#1D3335
Primary textHigh emphasis contentDark headings
950
1220
#122021
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9FA;
  --silver-100: #E8F2F2;
  --silver-200: #D4E6E7;
  --silver-300: #B3D3D5;
  --silver-400: #8CBCC0;
  --silver-500: #6BA9AE;
  --silver-600: #508C91;
  --silver-700: #3F7073;
  --silver-800: #2D5052;
  --silver-900: #1D3335;
  --silver-950: #122021;
}
Generate More ShadesCreate PaletteConvert Color