Silver

#8EB0BE

Blue

Color Codes

All color formats for development

HEX
#8EB0BE
RGB
rgb(142, 176, 190)
HSL
hsl(198, 27%, 65%)
OKLCH
oklch(0.737 0.042 224.9)
CMYK
cmyk(25%, 7%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.31:1

AA AAA

On Black Background

9.10:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EF
200
#D5E1
300
#B5CB
400
#8EAF
500
#6D99
600
#527C
700
#4163
800
#2F47
900
#1E2D
950
#131C

Shades

Darker variations

1#79A1B2
2#6492A6
3#558193
4#496E7E
5#3C5C69
6#304954
7#24373F
8#18252A
9#0C1215

Tints

Lighter variations

1#99B7C4
2#A4BFCB
3#B0C7D1
4#BBCFD8
5#C6D7DE
6#D2DFE5
7#DDE7EB
8#E8EFF2
9#F4F7F8

Tones

Muted variations

1#90AEBB
2#92ADB9
3#95ACB7
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
D5E1
#D5E1E7
Secondary backgroundsInput backgroundsDividers
300
B5CB
#B5CBD4
BordersInactive statesPlaceholder text
400
8EAF
#8EAFBE
Disabled statesSecondary iconsMuted text
500
6D99
#6D99AB
Primary brand colorCTAsActive elementsLinks
600
527C
#527C8E
Hover statesFocus ringsPrimary buttons hover
700
4163
#416371
Active/pressed statesDark mode accentsSecondary text
800
2F47
#2F4751
Text on light backgroundsHeadingsStrong borders
900
1E2D
#1E2D34
Primary textHigh emphasis contentDark headings
950
131C
#131C20
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: #B5CBD4;
  --silver-400: #8EAFBE;
  --silver-500: #6D99AB;
  --silver-600: #527C8E;
  --silver-700: #416371;
  --silver-800: #2F4751;
  --silver-900: #1E2D34;
  --silver-950: #131C20;
}
Generate More ShadesCreate PaletteConvert Color