Silver

#8FB1BC

Blue

Color Codes

All color formats for development

HEX
#8FB1BC
RGB
rgb(143, 177, 188)
HSL
hsl(195, 25%, 65%)
OKLCH
oklch(0.739 0.04 219.5)
CMYK
cmyk(24%, 6%, 0%, 26%)

Accessibility

WCAG contrast compliance

On White Background

2.29:1

AA AAA

On Black Background

9.18:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E9EF
200
#D6E2
300
#B6CC
400
#8FB1
500
#709B
600
#547E
700
#4364
800
#3048
900
#1F2E
950
#131D

Shades

Darker variations

1#7BA2B0
2#6694A3
3#578391
4#4B707C
5#3E5D68
6#324B53
7#25383E
8#192529
9#0C1315

Tints

Lighter variations

1#9BB9C3
2#A6C1C9
3#B1C8D0
4#BCD0D7
5#C7D8DE
6#D2E0E4
7#DEE8EB
8#E9EFF2
9#F4F7F8

Tones

Muted variations

1#92B0BA
2#94AFB8
3#96AEB5
4#98ACB3
5#9BABB1
6#9DAAAF
7#9FA9AC
8#A1A8AA
9#A4A7A8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F8
#F5F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E9EF
#E9EFF2
Light backgroundsTable row hoverSkeleton loading
200
D6E2
#D6E2E6
Secondary backgroundsInput backgroundsDividers
300
B6CC
#B6CCD3
BordersInactive statesPlaceholder text
400
8FB1
#8FB1BC
Disabled statesSecondary iconsMuted text
500
709B
#709BA9
Primary brand colorCTAsActive elementsLinks
600
547E
#547E8C
Hover statesFocus ringsPrimary buttons hover
700
4364
#436470
Active/pressed statesDark mode accentsSecondary text
800
3048
#304850
Text on light backgroundsHeadingsStrong borders
900
1F2E
#1F2E33
Primary textHigh emphasis contentDark headings
950
131D
#131D20
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E9EFF2;
  --silver-200: #D6E2E6;
  --silver-300: #B6CCD3;
  --silver-400: #8FB1BC;
  --silver-500: #709BA9;
  --silver-600: #547E8C;
  --silver-700: #436470;
  --silver-800: #304850;
  --silver-900: #1F2E33;
  --silver-950: #131D20;
}
Generate More ShadesCreate PaletteConvert Color