Silver

#ADD4DB

Cyan

Color Codes

All color formats for development

HEX
#ADD4DB
RGB
rgb(173, 212, 219)
HSL
hsl(189, 39%, 77%)
OKLCH
oklch(0.844 0.042 209.7)
CMYK
cmyk(21%, 3%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.59:1

AA AAA

On Black Background

13.22:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F9
100
#E6F2
200
#D1E7
300
#ADD4
400
#83BE
500
#5FAC
600
#448F
700
#3672
800
#2751
900
#1934
950
#1020

Shades

Darker variations

1#92C6CF
2#77B8C3
3#5CAAB7
4#4896A4
5#3C7D88
6#30646D
7#244B52
8#183237
9#0C191B

Tints

Lighter variations

1#B6D9DF
2#BEDDE2
3#C6E1E6
4#CEE5EA
5#D6EAED
6#DEEEF1
7#E7F2F4
8#EFF6F8
9#F7FBFB

Tones

Muted variations

1#B0D3D9
2#B2D1D7
3#B4D0D4
4#B7CED2
5#B9CCD0
6#BBCBCD
7#BDC9CB
8#C0C8C9
9#C2C6C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F9
#F4F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E6F2
#E6F2F4
Light backgroundsTable row hoverSkeleton loading
200
D1E7
#D1E7EB
Secondary backgroundsInput backgroundsDividers
300
ADD4
#ADD4DB
BordersInactive statesPlaceholder text
400
83BE
#83BEC9
Disabled statesSecondary iconsMuted text
500
5FAC
#5FACB9
Primary brand colorCTAsActive elementsLinks
600
448F
#448F9C
Hover statesFocus ringsPrimary buttons hover
700
3672
#36727C
Active/pressed statesDark mode accentsSecondary text
800
2751
#275159
Text on light backgroundsHeadingsStrong borders
900
1934
#193439
Primary textHigh emphasis contentDark headings
950
1020
#102023
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F9FA;
  --silver-100: #E6F2F4;
  --silver-200: #D1E7EB;
  --silver-300: #ADD4DB;
  --silver-400: #83BEC9;
  --silver-500: #5FACB9;
  --silver-600: #448F9C;
  --silver-700: #36727C;
  --silver-800: #275159;
  --silver-900: #193439;
  --silver-950: #102023;
}
Generate More ShadesCreate PaletteConvert Color