Silver

#ADD5DB

Cyan

Color Codes

All color formats for development

HEX
#ADD5DB
RGB
rgb(173, 213, 219)
HSL
hsl(188, 39%, 77%)
OKLCH
oklch(0.846 0.043 207.6)
CMYK
cmyk(21%, 3%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.58:1

AA AAA

On Black Background

13.32:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4FA
100
#E6F2
200
#D1E7
300
#ADD5
400
#83BF
500
#5FAD
600
#4490
700
#3673
800
#2752
900
#1934
950
#1021

Shades

Darker variations

1#92C7CF
2#77B9C3
3#5CABB7
4#4898A4
5#3C7E88
6#30656D
7#244C52
8#183337
9#0C191B

Tints

Lighter variations

1#B6D9DF
2#BEDDE2
3#C6E2E6
4#CEE6EA
5#D6EAED
6#DEEEF1
7#E7F2F4
8#EFF7F8
9#F7FBFB

Tones

Muted variations

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

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4FA
#F4FAFA
BackgroundsSubtle highlightsCard backgrounds
100
E6F2
#E6F2F4
Light backgroundsTable row hoverSkeleton loading
200
D1E7
#D1E7EB
Secondary backgroundsInput backgroundsDividers
300
ADD5
#ADD5DB
BordersInactive statesPlaceholder text
400
83BF
#83BFC9
Disabled statesSecondary iconsMuted text
500
5FAD
#5FADB9
Primary brand colorCTAsActive elementsLinks
600
4490
#44909C
Hover statesFocus ringsPrimary buttons hover
700
3673
#36737C
Active/pressed statesDark mode accentsSecondary text
800
2752
#275259
Text on light backgroundsHeadingsStrong borders
900
1934
#193439
Primary textHigh emphasis contentDark headings
950
1021
#102123
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4FAFA;
  --silver-100: #E6F2F4;
  --silver-200: #D1E7EB;
  --silver-300: #ADD5DB;
  --silver-400: #83BFC9;
  --silver-500: #5FADB9;
  --silver-600: #44909C;
  --silver-700: #36737C;
  --silver-800: #275259;
  --silver-900: #193439;
  --silver-950: #102123;
}
Generate More ShadesCreate PaletteConvert Color