Silver

#8EB2BE

Blue

Color Codes

All color formats for development

HEX
#8EB2BE
RGB
rgb(142, 178, 190)
HSL
hsl(195, 27%, 65%)
OKLCH
oklch(0.741 0.043 220.1)
CMYK
cmyk(25%, 6%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.27:1

AA AAA

On Black Background

9.26:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8F0
200
#D5E2
300
#B5CC
400
#8EB2
500
#6D9C
600
#527F
700
#4165
800
#2F48
900
#1E2E
950
#131D

Shades

Darker variations

1#79A3B2
2#6495A6
3#558493
4#49717E
5#3C5E69
6#304B54
7#24383F
8#18262A
9#0C1315

Tints

Lighter variations

1#99BAC4
2#A4C1CB
3#B0C9D1
4#BBD1D8
5#C6D8DE
6#D2E0E5
7#DDE8EB
8#E8F0F2
9#F4F7F8

Tones

Muted variations

1#90B1BB
2#92AFB9
3#95AEB7
4#97ADB4
5#9AACB2
6#9CABAF
7#9FA9AD
8#A1A8AB
9#A3A7A8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F8
#F5F8F9
BackgroundsSubtle highlightsCard backgrounds
100
E8F0
#E8F0F2
Light backgroundsTable row hoverSkeleton loading
200
D5E2
#D5E2E7
Secondary backgroundsInput backgroundsDividers
300
B5CC
#B5CCD4
BordersInactive statesPlaceholder text
400
8EB2
#8EB2BE
Disabled statesSecondary iconsMuted text
500
6D9C
#6D9CAB
Primary brand colorCTAsActive elementsLinks
600
527F
#527F8E
Hover statesFocus ringsPrimary buttons hover
700
4165
#416571
Active/pressed statesDark mode accentsSecondary text
800
2F48
#2F4851
Text on light backgroundsHeadingsStrong borders
900
1E2E
#1E2E34
Primary textHigh emphasis contentDark headings
950
131D
#131D20
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F8F9;
  --silver-100: #E8F0F2;
  --silver-200: #D5E2E7;
  --silver-300: #B5CCD4;
  --silver-400: #8EB2BE;
  --silver-500: #6D9CAB;
  --silver-600: #527F8E;
  --silver-700: #416571;
  --silver-800: #2F4851;
  --silver-900: #1E2E34;
  --silver-950: #131D20;
}
Generate More ShadesCreate PaletteConvert Color