Silver

#B1D2D8

Cyan

Color Codes

All color formats for development

HEX
#B1D2D8
RGB
rgb(177, 210, 216)
HSL
hsl(189, 33%, 77%)
OKLCH
oklch(0.842 0.036 209.8)
CMYK
cmyk(18%, 3%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.61:1

AA AAA

On Black Background

13.08:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E7F1
200
#D3E6
300
#B1D2
400
#88BA
500
#66A7
600
#4B8A
700
#3C6E
800
#2B4E
900
#1B32
950
#111F

Shades

Darker variations

1#97C3CB
2#7DB4BD
3#63A5B0
4#4F919D
5#427983
6#356168
7#27494E
8#1A3034
9#0D181A

Tints

Lighter variations

1#B9D6DC
2#C1DBE0
3#C8DFE3
4#D0E4E7
5#D8E8EB
6#E0EDEF
7#E8F1F3
8#EFF6F7
9#F7FAFB

Tones

Muted variations

1#B3D1D6
2#B5CFD4
3#B7CED2
4#B9CCD0
5#BBCBCE
6#BDCACC
7#BFC8CA
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
B1D2
#B1D2D8
BordersInactive statesPlaceholder text
400
88BA
#88BAC3
Disabled statesSecondary iconsMuted text
500
66A7
#66A7B2
Primary brand colorCTAsActive elementsLinks
600
4B8A
#4B8A95
Hover statesFocus ringsPrimary buttons hover
700
3C6E
#3C6E77
Active/pressed statesDark mode accentsSecondary text
800
2B4E
#2B4E55
Text on light backgroundsHeadingsStrong borders
900
1B32
#1B3236
Primary textHigh emphasis contentDark headings
950
111F
#111F22
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: #B1D2D8;
  --silver-400: #88BAC3;
  --silver-500: #66A7B2;
  --silver-600: #4B8A95;
  --silver-700: #3C6E77;
  --silver-800: #2B4E55;
  --silver-900: #1B3236;
  --silver-950: #111F22;
}
Generate More ShadesCreate PaletteConvert Color