Silver

#93ACB8

Blue

Color Codes

All color formats for development

HEX
#93ACB8
RGB
rgb(147, 172, 184)
HSL
hsl(199, 21%, 65%)
OKLCH
oklch(0.729 0.033 228.4)
CMYK
cmyk(20%, 7%, 0%, 28%)

Accessibility

WCAG contrast compliance

On White Background

2.38:1

AA AAA

On Black Background

8.83:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#E9EF
200
#D7E0
300
#B8C9
400
#93AD
500
#7495
600
#5979
700
#4760
800
#3245
900
#202C
950
#141B

Shades

Darker variations

1#7F9DAB
2#6B8E9E
3#5C7D8C
4#4F6B78
5#415964
6#344750
7#27363C
8#1A2428
9#0D1214

Tints

Lighter variations

1#9EB5C0
2#A9BDC7
3#B3C5CE
4#BECED5
5#C9D6DC
6#D4DEE3
7#DFE6EA
8#E9EFF1
9#F4F7F8

Tones

Muted variations

1#95ACB7
2#97ABB5
3#99ABB3
4#9BAAB1
5#9CA9AF
6#9EA8AD
7#A0A8AB
8#A2A7A9
9#A4A6A8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F8
#F6F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E9EF
#E9EFF1
Light backgroundsTable row hoverSkeleton loading
200
D7E0
#D7E0E5
Secondary backgroundsInput backgroundsDividers
300
B8C9
#B8C9D1
BordersInactive statesPlaceholder text
400
93AD
#93ADB8
Disabled statesSecondary iconsMuted text
500
7495
#7495A4
Primary brand colorCTAsActive elementsLinks
600
5979
#597988
Hover statesFocus ringsPrimary buttons hover
700
4760
#47606C
Active/pressed statesDark mode accentsSecondary text
800
3245
#32454D
Text on light backgroundsHeadingsStrong borders
900
202C
#202C31
Primary textHigh emphasis contentDark headings
950
141B
#141B1F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F8F9;
  --silver-100: #E9EFF1;
  --silver-200: #D7E0E5;
  --silver-300: #B8C9D1;
  --silver-400: #93ADB8;
  --silver-500: #7495A4;
  --silver-600: #597988;
  --silver-700: #47606C;
  --silver-800: #32454D;
  --silver-900: #202C31;
  --silver-950: #141B1F;
}
Generate More ShadesCreate PaletteConvert Color