Silver

#8DABBF

Blue

Color Codes

All color formats for development

HEX
#8DABBF
RGB
rgb(141, 171, 191)
HSL
hsl(204, 28%, 65%)
OKLCH
oklch(0.725 0.044 237.4)
CMYK
cmyk(26%, 10%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.41:1

AA AAA

On Black Background

8.71:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EE
200
#D5E0
300
#B4C8
400
#8DAB
500
#6C93
600
#5176
700
#405E
800
#2E43
900
#1D2B
950
#121B

Shades

Darker variations

1#789BB3
2#628BA7
3#547B95
4#48697F
5#3C586A
6#304655
7#243540
8#18232A
9#0C1215

Tints

Lighter variations

1#98B3C5
2#A4BCCC
3#AFC4D2
4#BACCD8
5#C6D5DF
6#D1DDE5
7#DDE6EC
8#E8EEF2
9#F4F7F9

Tones

Muted variations

1#8FAABC
2#92AABA
3#94A9B7
4#97A9B5
5#99A8B2
6#9CA8B0
7#9EA7AD
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
D5E0
#D5E0E7
Secondary backgroundsInput backgroundsDividers
300
B4C8
#B4C8D5
BordersInactive statesPlaceholder text
400
8DAB
#8DABBF
Disabled statesSecondary iconsMuted text
500
6C93
#6C93AC
Primary brand colorCTAsActive elementsLinks
600
5176
#517690
Hover statesFocus ringsPrimary buttons hover
700
405E
#405E72
Active/pressed statesDark mode accentsSecondary text
800
2E43
#2E4352
Text on light backgroundsHeadingsStrong borders
900
1D2B
#1D2B34
Primary textHigh emphasis contentDark headings
950
121B
#121B21
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E8EEF2;
  --silver-200: #D5E0E7;
  --silver-300: #B4C8D5;
  --silver-400: #8DABBF;
  --silver-500: #6C93AC;
  --silver-600: #517690;
  --silver-700: #405E72;
  --silver-800: #2E4352;
  --silver-900: #1D2B34;
  --silver-950: #121B21;
}
Generate More ShadesCreate PaletteConvert Color