Silver

#B1D5D8

Cyan

Color Codes

All color formats for development

HEX
#B1D5D8
RGB
rgb(177, 213, 216)
HSL
hsl(185, 33%, 77%)
OKLCH
oklch(0.848 0.038 202.7)
CMYK
cmyk(18%, 1%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.57:1

AA AAA

On Black Background

13.38:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E7F2
200
#D3E7
300
#B1D4
400
#88BE
500
#66AC
600
#4B8F
700
#3C72
800
#2B51
900
#1B34
950
#1121

Shades

Darker variations

1#97C6CB
2#7DB8BD
3#63AAB0
4#4F969D
5#427D83
6#356468
7#274B4E
8#1A3234
9#0D191A

Tints

Lighter variations

1#B9D9DC
2#C1DDE0
3#C8E1E3
4#D0E5E7
5#D8EAEB
6#E0EEEF
7#E8F2F3
8#EFF6F7
9#F7FBFB

Tones

Muted variations

1#B3D3D6
2#B5D1D4
3#B7D0D2
4#B9CED0
5#BBCCCE
6#BDCBCC
7#BFC9CA
8#C0C8C8
9#C2C6C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E7F2
#E7F2F3
Light backgroundsTable row hoverSkeleton loading
200
D3E7
#D3E7E9
Secondary backgroundsInput backgroundsDividers
300
B1D4
#B1D4D8
BordersInactive statesPlaceholder text
400
88BE
#88BEC3
Disabled statesSecondary iconsMuted text
500
66AC
#66ACB2
Primary brand colorCTAsActive elementsLinks
600
4B8F
#4B8F95
Hover statesFocus ringsPrimary buttons hover
700
3C72
#3C7277
Active/pressed statesDark mode accentsSecondary text
800
2B51
#2B5155
Text on light backgroundsHeadingsStrong borders
900
1B34
#1B3436
Primary textHigh emphasis contentDark headings
950
1121
#112122
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9FA;
  --silver-100: #E7F2F3;
  --silver-200: #D3E7E9;
  --silver-300: #B1D4D8;
  --silver-400: #88BEC3;
  --silver-500: #66ACB2;
  --silver-600: #4B8F95;
  --silver-700: #3C7277;
  --silver-800: #2B5155;
  --silver-900: #1B3436;
  --silver-950: #112122;
}
Generate More ShadesCreate PaletteConvert Color