Silver

#ACD5DC

Cyan

Color Codes

All color formats for development

HEX
#ACD5DC
RGB
rgb(172, 213, 220)
HSL
hsl(189, 41%, 77%)
OKLCH
oklch(0.846 0.044 209.1)
CMYK
cmyk(22%, 3%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.58:1

AA AAA

On Black Background

13.31:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4FA
100
#E6F2
200
#D0E7
300
#ACD5
400
#81BF
500
#5DAD
600
#4290
700
#3573
800
#2652
900
#1835
950
#0F21

Shades

Darker variations

1#91C7D1
2#75B9C5
3#59ABBA
4#4698A6
5#3A7E8A
6#2E656F
7#234C53
8#173337
9#0C191C

Tints

Lighter variations

1#B5D9E0
2#BDDEE3
3#C5E2E7
4#CDE6EA
5#D6EAEE
6#DEEEF1
7#E6F2F5
8#EEF7F8
9#F7FBFC

Tones

Muted variations

1#AFD3DA
2#B1D2D8
3#B4D0D5
4#B6CED3
5#B8CDD0
6#BBCBCE
7#BDC9CC
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
D0E7
#D0E7EB
Secondary backgroundsInput backgroundsDividers
300
ACD5
#ACD5DC
BordersInactive statesPlaceholder text
400
81BF
#81BFCA
Disabled statesSecondary iconsMuted text
500
5DAD
#5DADBB
Primary brand colorCTAsActive elementsLinks
600
4290
#42909E
Hover statesFocus ringsPrimary buttons hover
700
3573
#35737E
Active/pressed statesDark mode accentsSecondary text
800
2652
#26525A
Text on light backgroundsHeadingsStrong borders
900
1835
#18353A
Primary textHigh emphasis contentDark headings
950
0F21
#0F2124
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4FAFA;
  --silver-100: #E6F2F4;
  --silver-200: #D0E7EB;
  --silver-300: #ACD5DC;
  --silver-400: #81BFCA;
  --silver-500: #5DADBB;
  --silver-600: #42909E;
  --silver-700: #35737E;
  --silver-800: #26525A;
  --silver-900: #18353A;
  --silver-950: #0F2124;
}
Generate More ShadesCreate PaletteConvert Color