Silver

#AFD1DA

Cyan

Color Codes

All color formats for development

HEX
#AFD1DA
RGB
rgb(175, 209, 218)
HSL
hsl(193, 37%, 77%)
OKLCH
oklch(0.839 0.038 215.5)
CMYK
cmyk(20%, 4%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.62:1

AA AAA

On Black Background

12.96:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E7F1
200
#D2E5
300
#AFD1
400
#85B8
500
#62A4
600
#4788
700
#386C
800
#284D
900
#1A31
950
#101F

Shades

Darker variations

1#94C1CE
2#79B2C1
3#5EA2B5
4#4A8FA1
5#3E7786
6#315F6C
7#254751
8#193036
9#0C181B

Tints

Lighter variations

1#B7D5DE
2#BFDAE1
3#C7DFE5
4#CFE3E9
5#D7E8ED
6#DFECF0
7#E7F1F4
8#EFF6F8
9#F7FAFB

Tones

Muted variations

1#B1CFD8
2#B3CED6
3#B5CDD4
4#B7CCD1
5#B9CACF
6#BCC9CD
7#BEC8CB
8#C0C7C9
9#C2C6C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9FA
BackgroundsSubtle highlightsCard backgrounds
100
E7F1
#E7F1F4
Light backgroundsTable row hoverSkeleton loading
200
D2E5
#D2E5EA
Secondary backgroundsInput backgroundsDividers
300
AFD1
#AFD1DA
BordersInactive statesPlaceholder text
400
85B8
#85B8C7
Disabled statesSecondary iconsMuted text
500
62A4
#62A4B7
Primary brand colorCTAsActive elementsLinks
600
4788
#47889A
Hover statesFocus ringsPrimary buttons hover
700
386C
#386C7A
Active/pressed statesDark mode accentsSecondary text
800
284D
#284D57
Text on light backgroundsHeadingsStrong borders
900
1A31
#1A3138
Primary textHigh emphasis contentDark headings
950
101F
#101F23
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9FA;
  --silver-100: #E7F1F4;
  --silver-200: #D2E5EA;
  --silver-300: #AFD1DA;
  --silver-400: #85B8C7;
  --silver-500: #62A4B7;
  --silver-600: #47889A;
  --silver-700: #386C7A;
  --silver-800: #284D57;
  --silver-900: #1A3138;
  --silver-950: #101F23;
}
Generate More ShadesCreate PaletteConvert Color