Silver

#8FB6BC

Cyan

Color Codes

All color formats for development

HEX
#8FB6BC
RGB
rgb(143, 182, 188)
HSL
hsl(188, 25%, 65%)
OKLCH
oklch(0.75 0.043 207.9)
CMYK
cmyk(24%, 3%, 0%, 26%)

Accessibility

WCAG contrast compliance

On White Background

2.19:1

AA AAA

On Black Background

9.59:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E9F0
200
#D6E4
300
#B6CF
400
#8FB6
500
#70A1
600
#5485
700
#436A
800
#304B
900
#1F30
950
#131E

Shades

Darker variations

1#7BA9B0
2#669BA3
3#578991
4#4B767C
5#3E6268
6#324E53
7#253B3E
8#192729
9#0C1415

Tints

Lighter variations

1#9BBDC3
2#A6C5C9
3#B1CCD0
4#BCD3D7
5#C7DBDE
6#D2E2E4
7#DEE9EB
8#E9F0F2
9#F4F8F8

Tones

Muted variations

1#92B4BA
2#94B3B8
3#96B1B5
4#98B0B3
5#9BAEB1
6#9DACAF
7#9FABAC
8#A1A9AA
9#A4A7A8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9F9
BackgroundsSubtle highlightsCard backgrounds
100
E9F0
#E9F0F2
Light backgroundsTable row hoverSkeleton loading
200
D6E4
#D6E4E6
Secondary backgroundsInput backgroundsDividers
300
B6CF
#B6CFD3
BordersInactive statesPlaceholder text
400
8FB6
#8FB6BC
Disabled statesSecondary iconsMuted text
500
70A1
#70A1A9
Primary brand colorCTAsActive elementsLinks
600
5485
#54858C
Hover statesFocus ringsPrimary buttons hover
700
436A
#436A70
Active/pressed statesDark mode accentsSecondary text
800
304B
#304B50
Text on light backgroundsHeadingsStrong borders
900
1F30
#1F3033
Primary textHigh emphasis contentDark headings
950
131E
#131E20
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9F9;
  --silver-100: #E9F0F2;
  --silver-200: #D6E4E6;
  --silver-300: #B6CFD3;
  --silver-400: #8FB6BC;
  --silver-500: #70A1A9;
  --silver-600: #54858C;
  --silver-700: #436A70;
  --silver-800: #304B50;
  --silver-900: #1F3033;
  --silver-950: #131E20;
}
Generate More ShadesCreate PaletteConvert Color