Silver

#AFD4D9

Cyan

Color Codes

All color formats for development

HEX

#AFD4D9

RGB

rgb(175, 212, 217)

HSL

hsl(187, 36%, 77%)

OKLCH

oklch(0.845 0.04 206.5)

CMYK

cmyk(19%, 2%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

1.59:1

AA ✗AAA ✗

On Black Background

13.24:1

AA ✓AAA ✓

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F5F9

100

#E7F2

200

#D2E7

300

#AFD5

400

#86BE

500

#63AC

600

#488F

700

#3972

800

#2951

900

#1A34

950

#1021

Shades

Darker variations

1#95C6CD

2#7AB8C0

3#5FAAB4

4#4B96A0

5#3F7D86

6#32646B

7#264B50

8#193235

9#0D191B

Tints

Lighter variations

1#B7D9DD

2#BFDDE1

3#C7E1E5

4#CFE6E8

5#D7EAEC

6#DFEEF0

7#E7F2F4

8#EFF7F7

9#F7FBFB

Tones

Muted variations

1#B1D3D7

2#B3D1D5

3#B6D0D3

4#B8CED1

5#BACCCF

6#BCCBCD

7#BEC9CB

8#C0C8C9

9#C2C6C6

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F5F9 `#F5F9FA`	BackgroundsSubtle highlightsCard backgrounds
100	E7F2 `#E7F2F4`	Light backgroundsTable row hoverSkeleton loading
200	D2E7 `#D2E7EA`	Secondary backgroundsInput backgroundsDividers
300	AFD5 `#AFD5D9`	BordersInactive statesPlaceholder text
400	86BE `#86BEC6`	Disabled statesSecondary iconsMuted text
500	63AC `#63ACB6`	Primary brand colorCTAsActive elementsLinks
600	488F `#488F99`	Hover statesFocus ringsPrimary buttons hover
700	3972 `#397279`	Active/pressed statesDark mode accentsSecondary text
800	2951 `#295157`	Text on light backgroundsHeadingsStrong borders
900	1A34 `#1A3437`	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: #F5F9FA;
  --silver-100: #E7F2F4;
  --silver-200: #D2E7EA;
  --silver-300: #AFD5D9;
  --silver-400: #86BEC6;
  --silver-500: #63ACB6;
  --silver-600: #488F99;
  --silver-700: #397279;
  --silver-800: #295157;
  --silver-900: #1A3437;
  --silver-950: #102123;
}

Generate More Shades Create Palette Convert Color