Silver

#8DB0BF

Blue

Color Codes

All color formats for development

HEX
#8DB0BF
RGB
rgb(141, 176, 191)
HSL
hsl(198, 28%, 65%)
OKLCH
oklch(0.736 0.044 225.9)
CMYK
cmyk(26%, 8%, 0%, 25%)

Accessibility

WCAG contrast compliance

On White Background

2.31:1

AA AAA

On Black Background

9.09:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F8
100
#E8EF
200
#D5E2
300
#B4CB
400
#8DB0
500
#6C99
600
#517D
700
#4063
800
#2E47
900
#1D2D
950
#121C

Shades

Darker variations

1#78A1B3
2#6292A7
3#548195
4#486F7F
5#3C5C6A
6#304A55
7#243740
8#18252A
9#0C1215

Tints

Lighter variations

1#98B8C5
2#A4C0CC
3#AFC8D2
4#BACFD8
5#C6D7DF
6#D1DFE5
7#DDE7EC
8#E8EFF2
9#F4F7F9

Tones

Muted variations

1#8FAFBC
2#92AEBA
3#94ADB7
4#97ACB5
5#99ABB2
6#9CAAB0
7#9EA9AD
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
B4CB
#B4CBD5
BordersInactive statesPlaceholder text
400
8DB0
#8DB0BF
Disabled statesSecondary iconsMuted text
500
6C99
#6C99AC
Primary brand colorCTAsActive elementsLinks
600
517D
#517D90
Hover statesFocus ringsPrimary buttons hover
700
4063
#406372
Active/pressed statesDark mode accentsSecondary text
800
2E47
#2E4752
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: #D5E2E7;
  --silver-300: #B4CBD5;
  --silver-400: #8DB0BF;
  --silver-500: #6C99AC;
  --silver-600: #517D90;
  --silver-700: #406372;
  --silver-800: #2E4752;
  --silver-900: #1D2D34;
  --silver-950: #121C21;
}
Generate More ShadesCreate PaletteConvert Color