Silver

#9BADB0

Cyan

Color Codes

All color formats for development

HEX
#9BADB0
RGB
rgb(155, 173, 176)
HSL
hsl(189, 12%, 65%)
OKLCH
oklch(0.735 0.021 208.7)
CMYK
cmyk(12%, 2%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

2.33:1

AA AAA

On Black Background

9.00:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F8
100
#EBEF
200
#DAE1
300
#BDC9
400
#9BAD
500
#7E96
600
#637A
700
#4F61
800
#3845
900
#242C
950
#161C

Shades

Darker variations

1#889EA2
2#768F93
3#667E82
4#586C6F
5#495A5D
6#3A484A
7#2C3638
8#1D2425
9#0F1213

Tints

Lighter variations

1#A5B5B8
2#AFBEC0
3#B9C6C8
4#C3CED0
5#CDD6D8
6#D7DEE0
7#E1E6E7
8#EBEFEF
9#F5F7F7

Tones

Muted variations

1#9CACAF
2#9DACAE
3#9EABAD
4#9FAAAC
5#A0A9AB
6#A1A9AA
7#A3A8A9
8#A4A7A8
9#A5A6A7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F8
#F6F8F8
BackgroundsSubtle highlightsCard backgrounds
100
EBEF
#EBEFEF
Light backgroundsTable row hoverSkeleton loading
200
DAE1
#DAE1E2
Secondary backgroundsInput backgroundsDividers
300
BDC9
#BDC9CB
BordersInactive statesPlaceholder text
400
9BAD
#9BADB0
Disabled statesSecondary iconsMuted text
500
7E96
#7E969A
Primary brand colorCTAsActive elementsLinks
600
637A
#637A7E
Hover statesFocus ringsPrimary buttons hover
700
4F61
#4F6164
Active/pressed statesDark mode accentsSecondary text
800
3845
#384547
Text on light backgroundsHeadingsStrong borders
900
242C
#242C2E
Primary textHigh emphasis contentDark headings
950
161C
#161C1D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F6F8F8;
  --silver-100: #EBEFEF;
  --silver-200: #DAE1E2;
  --silver-300: #BDC9CB;
  --silver-400: #9BADB0;
  --silver-500: #7E969A;
  --silver-600: #637A7E;
  --silver-700: #4F6164;
  --silver-800: #384547;
  --silver-900: #242C2E;
  --silver-950: #161C1D;
}
Generate More ShadesCreate PaletteConvert Color