Silver
#ADD3DC
CyanColor Codes
All color formats for development
HEX
#ADD3DCRGB
rgb(173, 211, 220)HSL
hsl(191, 40%, 77%)OKLCH
oklch(0.842 0.042 213.7)CMYK
cmyk(21%, 4%, 0%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#91C5D0
2#76B6C4
3#5AA7B8
4#4794A5
5#3B7B89
6#2F626E
7#234A52
8#183137
9#0C191B
Tints
Lighter variations
1#B5D8DF
2#BDDCE3
3#C6E0E6
4#CEE5EA
5#D6E9ED
6#DEEDF1
7#E6F2F4
8#EFF6F8
9#F7FBFB
Tones
Muted variations
1#AFD2D9
2#B2D0D7
3#B4CFD5
4#B6CDD2
5#B9CCD0
6#BBCACE
7#BDC9CB
8#C0C7C9
9#C2C6C7
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F9 #F4F9FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E6F2 #E6F2F4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D1E6 #D1E6EB | Secondary backgroundsInput backgroundsDividers |
| 300 | ADD3 #ADD3DC | BordersInactive statesPlaceholder text |
| 400 | 82BC #82BCC9 | Disabled statesSecondary iconsMuted text |
| 500 | 5EA9 #5EA9BA | Primary brand colorCTAsActive elementsLinks |
| 600 | 438D #438D9D | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3670 #36707D | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2650 #265059 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1833 #183339 | Primary textHigh emphasis contentDark headings |
| 950 | 0F20 #0F2024 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--silver-50: #F4F9FA;
--silver-100: #E6F2F4;
--silver-200: #D1E6EB;
--silver-300: #ADD3DC;
--silver-400: #82BCC9;
--silver-500: #5EA9BA;
--silver-600: #438D9D;
--silver-700: #36707D;
--silver-800: #265059;
--silver-900: #183339;
--silver-950: #0F2024;
}