Silver

#8EB1BE

Blue

Color Codes

All color formats for development

HEX
#8EB1BE
RGB
rgb(142, 177, 190)
HSL
hsl(196, 27%, 65%)
OKLCH
oklch(0.739 0.042 222.5)
CMYK
cmyk(25%, 7%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.29:1

AA AAA

On Black Background

9.18:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EF
200
#D5E2
300
#B5CC
400
#8EB1
500
#6D9B
600
#527E
700
#4164
800
#2F48
900
#1E2E
950
#131D

Shades

Darker variations

1#79A3B2
2#6494A6
3#558393
4#49707E
5#3C5D69
6#304B54
7#24383F
8#18252A
9#0C1315

Tints

Lighter variations

1#99B9C4
2#A4C1CB
3#B0C8D1
4#BBD0D8
5#C6D8DE
6#D2E0E5
7#DDE8EB
8#E8EFF2
9#F4F7F8

Tones

Muted variations

1#90B0BB
2#92AFB9
3#95AEB7
4#97ACB4
5#9AABB2
6#9CAAAF
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
E8EF
#E8EFF2
Light backgroundsTable row hoverSkeleton loading
200
D5E2
#D5E2E7
Secondary backgroundsInput backgroundsDividers
300
B5CC
#B5CCD4
BordersInactive statesPlaceholder text
400
8EB1
#8EB1BE
Disabled statesSecondary iconsMuted text
500
6D9B
#6D9BAB
Primary brand colorCTAsActive elementsLinks
600
527E
#527E8E
Hover statesFocus ringsPrimary buttons hover
700
4164
#416471
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: #E8EFF2;
  --silver-200: #D5E2E7;
  --silver-300: #B5CCD4;
  --silver-400: #8EB1BE;
  --silver-500: #6D9BAB;
  --silver-600: #527E8E;
  --silver-700: #416471;
  --silver-800: #2F4851;
  --silver-900: #1E2E34;
  --silver-950: #131D20;
}
Generate More ShadesCreate PaletteConvert Color