Silver

#8DAFBF

Blue

Color Codes

All color formats for development

HEX
#8DAFBF
RGB
rgb(141, 175, 191)
HSL
hsl(199, 28%, 65%)
OKLCH
oklch(0.734 0.044 228.2)
CMYK
cmyk(26%, 8%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.33:1

AA AAA

On Black Background

9.02:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EF
200
#D5E1
300
#B4CA
400
#8DAF
500
#6C98
600
#517C
700
#4062
800
#2E46
900
#1D2D
950
#121C

Shades

Darker variations

1#78A0B3
2#6291A7
3#548095
4#486E7F
5#3C5B6A
6#304955
7#243740
8#18252A
9#0C1215

Tints

Lighter variations

1#98B7C5
2#A4BFCC
3#AFC7D2
4#BACFD8
5#C6D7DF
6#D1DFE5
7#DDE7EC
8#E8EFF2
9#F4F7F9

Tones

Muted variations

1#8FAEBC
2#92ADBA
3#94ACB7
4#97ABB5
5#99AAB2
6#9CA9B0
7#9EA8AD
8#A1A8AB
9#A3A7A8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F8
#F5F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E8EF
#E8EFF2
Light backgroundsTable row hoverSkeleton loading
200
D5E1
#D5E1E7
Secondary backgroundsInput backgroundsDividers
300
B4CA
#B4CAD5
BordersInactive statesPlaceholder text
400
8DAF
#8DAFBF
Disabled statesSecondary iconsMuted text
500
6C98
#6C98AC
Primary brand colorCTAsActive elementsLinks
600
517C
#517C90
Hover statesFocus ringsPrimary buttons hover
700
4062
#406272
Active/pressed statesDark mode accentsSecondary text
800
2E46
#2E4652
Text on light backgroundsHeadingsStrong borders
900
1D2D
#1D2D34
Primary textHigh emphasis contentDark headings
950
121C
#121C21
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E8EFF2;
  --silver-200: #D5E1E7;
  --silver-300: #B4CAD5;
  --silver-400: #8DAFBF;
  --silver-500: #6C98AC;
  --silver-600: #517C90;
  --silver-700: #406272;
  --silver-800: #2E4652;
  --silver-900: #1D2D34;
  --silver-950: #121C21;
}
Generate More ShadesCreate PaletteConvert Color