Silver

#8FB0BD

Blue

Color Codes

All color formats for development

HEX
#8FB0BD
RGB
rgb(143, 176, 189)
HSL
hsl(197, 26%, 65%)
OKLCH
oklch(0.737 0.041 223.8)
CMYK
cmyk(24%, 7%, 0%, 26%)

Accessibility

WCAG contrast compliance

On White Background

2.30:1

AA AAA

On Black Background

9.11:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E9EF
200
#D5E2
300
#B5CB
400
#8FB0
500
#6E99
600
#537D
700
#4263
800
#2F47
900
#1E2D
950
#131C

Shades

Darker variations

1#7AA1B1
2#6592A4
3#568192
4#4A6F7D
5#3D5C68
6#314A54
7#25373F
8#19252A
9#0C1215

Tints

Lighter variations

1#9AB8C4
2#A5C0CA
3#B0C8D1
4#BCCFD7
5#C7D7DE
6#D2DFE5
7#DDE7EB
8#E9EFF2
9#F4F7F8

Tones

Muted variations

1#91AFBB
2#93AEB8
3#96ADB6
4#98ACB4
5#9AABB1
6#9CAAAF
7#9FA9AD
8#A1A8AA
9#A3A7A8

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
D5E2
#D5E2E6
Secondary backgroundsInput backgroundsDividers
300
B5CB
#B5CBD4
BordersInactive statesPlaceholder text
400
8FB0
#8FB0BD
Disabled statesSecondary iconsMuted text
500
6E99
#6E99AA
Primary brand colorCTAsActive elementsLinks
600
537D
#537D8D
Hover statesFocus ringsPrimary buttons hover
700
4263
#426370
Active/pressed statesDark mode accentsSecondary text
800
2F47
#2F4750
Text on light backgroundsHeadingsStrong borders
900
1E2D
#1E2D33
Primary textHigh emphasis contentDark headings
950
131C
#131C20
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E9EFF2;
  --silver-200: #D5E2E6;
  --silver-300: #B5CBD4;
  --silver-400: #8FB0BD;
  --silver-500: #6E99AA;
  --silver-600: #537D8D;
  --silver-700: #426370;
  --silver-800: #2F4750;
  --silver-900: #1E2D33;
  --silver-950: #131C20;
}
Generate More ShadesCreate PaletteConvert Color