Silver

#90AFBB

Blue

Color Codes

All color formats for development

HEX
#90AFBB
RGB
rgb(144, 175, 187)
HSL
hsl(197, 24%, 65%)
OKLCH
oklch(0.735 0.038 223.3)
CMYK
cmyk(23%, 6%, 0%, 27%)

Accessibility

WCAG contrast compliance

On White Background

2.32:1

AA AAA

On Black Background

9.04:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#E9EF
200
#D6E1
300
#B6CA
400
#90AF
500
#7198
600
#557C
700
#4463
800
#3046
900
#1F2D
950
#131C

Shades

Darker variations

1#7CA0AF
2#6791A2
3#588090
4#4C6E7B
5#3F5B67
6#324952
7#26373E
8#192529
9#0D1215

Tints

Lighter variations

1#9BB7C2
2#A6BFC9
3#B2C7D0
4#BDCFD6
5#C8D7DD
6#D3DFE4
7#DEE7EB
8#E9EFF1
9#F4F7F8

Tones

Muted variations

1#92AEB9
2#95ADB7
3#97ACB5
4#99ABB3
5#9BAAB0
6#9DA9AE
7#9FA9AC
8#A1A8AA
9#A4A7A8

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
D6E1
#D6E1E6
Secondary backgroundsInput backgroundsDividers
300
B6CA
#B6CAD2
BordersInactive statesPlaceholder text
400
90AF
#90AFBB
Disabled statesSecondary iconsMuted text
500
7198
#7198A8
Primary brand colorCTAsActive elementsLinks
600
557C
#557C8B
Hover statesFocus ringsPrimary buttons hover
700
4463
#44636F
Active/pressed statesDark mode accentsSecondary text
800
3046
#30464F
Text on light backgroundsHeadingsStrong borders
900
1F2D
#1F2D33
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: #F6F8F9;
  --silver-100: #E9EFF1;
  --silver-200: #D6E1E6;
  --silver-300: #B6CAD2;
  --silver-400: #90AFBB;
  --silver-500: #7198A8;
  --silver-600: #557C8B;
  --silver-700: #44636F;
  --silver-800: #30464F;
  --silver-900: #1F2D33;
  --silver-950: #131C20;
}
Generate More ShadesCreate PaletteConvert Color