HEX Color #5F7C7C (Slategray)

About #5F7C7C

The precise color #5F7C7C is an excellent choice for modern design projects. If you're using CSS, you might find it aligns closely with Slategray. To achieve this exact tint on a monitor, you would use an RGB mix of 95, 124, and 124.

If you are designing for print, the four-color process is what matters most. To reproduce this shade on paper, a printer utilizes 23% cyan and 0% magenta inks. The HSL representation is 180.0° hue, 13.2% saturation, and 42.9% lightness.

From a UX and accessibility standpoint, contrast is paramount. Because it is a medium color, it is generally recommended to use #000000 text. Strict adherence to these ratios protects visually impaired users from unreadable interfaces.

Color Space Conversions

HEX#5F7C7C

RGB95, 124, 124

HSL180.0°, 13.2%, 42.9%

CMYK23%, 0%, 0%, 51%

HSV180.0°, 23.4%, 48.6%

LAB49.9, -10.3, -3.4

XYZ15.6, 18.3, 21.8

Decimal6257788

Color Harmonies

Complementary

#5F7C7C #7C5F5F

Analogous

#5F7C6D #5F6D7C

Triadic

#7C5F7B #7B7C5F

Tetradic

#6D5F7C #7C5F5F #6D7C5F

Tints, Shades & Tones

Tints (Adding White)

#5F7C7C

#708A8A

#829999

#94A7A7

#A6B6B6

#B7C4C4

#C9D3D3

#DBE1E1

#EDF0F0

#FFFFFF

Shades (Adding Black)

#5F7C7C

#546E6E

#496060

#3F5252

#344444

#2A3737

#1F2929

#151B1B

#0A0D0D

#000000

WCAG Contrast Accessibility

4.51:1

Text on #FFFFFF

AA

4.66:1

Text on #000000

AA

4.31:1

Text on #F8FAFC

AA Large

3.96:1

Text on #0F172A

AA Large

CSS Implementation

.bg-color { background-color: #5F7C7C; }

.text-color { color: #5F7C7C; }

.border-color { border: 2px solid #5F7C7C; }

Similar Colors

Slategray

#708090