Silver

#B1D3D8

Cyan

Color Codes

All color formats for development

HEX
#B1D3D8
RGB
rgb(177, 211, 216)
HSL
hsl(188, 33%, 77%)
OKLCH
oklch(0.844 0.037 207.3)
CMYK
cmyk(18%, 2%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.59:1

AA AAA

On Black Background

13.18:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E7F1
200
#D3E6
300
#B1D3
400
#88BB
500
#66A8
600
#4B8B
700
#3C6F
800
#2B4F
900
#1B33
950
#1120

Shades

Darker variations

1#97C4CB
2#7DB5BD
3#63A6B0
4#4F929D
5#427A83
6#356268
7#27494E
8#1A3134
9#0D181A

Tints

Lighter variations

1#B9D7DC
2#C1DBE0
3#C8E0E3
4#D0E4E7
5#D8E9EB
6#E0EDEF
7#E8F2F3
8#EFF6F7
9#F7FBFB

Tones

Muted variations

1#B3D1D6
2#B5D0D4
3#B7CED2
4#B9CDD0
5#BBCBCE
6#BDCACC
7#BFC9CA
8#C0C7C8
9#C2C6C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E7F1
#E7F1F3
Light backgroundsTable row hoverSkeleton loading
200
D3E6
#D3E6E9
Secondary backgroundsInput backgroundsDividers
300
B1D3
#B1D3D8
BordersInactive statesPlaceholder text
400
88BB
#88BBC3
Disabled statesSecondary iconsMuted text
500
66A8
#66A8B2
Primary brand colorCTAsActive elementsLinks
600
4B8B
#4B8B95
Hover statesFocus ringsPrimary buttons hover
700
3C6F
#3C6F77
Active/pressed statesDark mode accentsSecondary text
800
2B4F
#2B4F55
Text on light backgroundsHeadingsStrong borders
900
1B33
#1B3336
Primary textHigh emphasis contentDark headings
950
1120
#112022
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9FA;
  --silver-100: #E7F1F3;
  --silver-200: #D3E6E9;
  --silver-300: #B1D3D8;
  --silver-400: #88BBC3;
  --silver-500: #66A8B2;
  --silver-600: #4B8B95;
  --silver-700: #3C6F77;
  --silver-800: #2B4F55;
  --silver-900: #1B3336;
  --silver-950: #112022;
}
Generate More ShadesCreate PaletteConvert Color