Silver

#8EAABE

Blue

Color Codes

All color formats for development

HEX
#8EAABE
RGB
rgb(142, 170, 190)
HSL
hsl(205, 27%, 65%)
OKLCH
oklch(0.724 0.043 239.3)
CMYK
cmyk(25%, 11%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.43:1

AA AAA

On Black Background

8.64:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EE
200
#D5DF
300
#B5C7
400
#8EAA
500
#6D91
600
#5275
700
#415D
800
#2F43
900
#1E2B
950
#131B

Shades

Darker variations

1#799AB2
2#648AA6
3#557993
4#49687E
5#3C5769
6#304554
7#24343F
8#18232A
9#0C1115

Tints

Lighter variations

1#99B2C4
2#A4BBCB
3#B0C3D1
4#BBCCD8
5#C6D4DE
6#D2DDE5
7#DDE5EB
8#E8EEF2
9#F4F6F8

Tones

Muted variations

1#90A9BB
2#92A9B9
3#95A9B7
4#97A8B4
5#9AA8B2
6#9CA7AF
7#9FA7AD
8#A1A7AB
9#A3A6A8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F8
#F5F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E8EE
#E8EEF2
Light backgroundsTable row hoverSkeleton loading
200
D5DF
#D5DFE7
Secondary backgroundsInput backgroundsDividers
300
B5C7
#B5C7D4
BordersInactive statesPlaceholder text
400
8EAA
#8EAABE
Disabled statesSecondary iconsMuted text
500
6D91
#6D91AB
Primary brand colorCTAsActive elementsLinks
600
5275
#52758E
Hover statesFocus ringsPrimary buttons hover
700
415D
#415D71
Active/pressed statesDark mode accentsSecondary text
800
2F43
#2F4351
Text on light backgroundsHeadingsStrong borders
900
1E2B
#1E2B34
Primary textHigh emphasis contentDark headings
950
131B
#131B20
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E8EEF2;
  --silver-200: #D5DFE7;
  --silver-300: #B5C7D4;
  --silver-400: #8EAABE;
  --silver-500: #6D91AB;
  --silver-600: #52758E;
  --silver-700: #415D71;
  --silver-800: #2F4351;
  --silver-900: #1E2B34;
  --silver-950: #131B20;
}
Generate More ShadesCreate PaletteConvert Color