Purplish grey to HSL — Color Code

#7a687f
Format Value
HEX #7a687f
RGB rgb(122, 104, 127)
HSL hsl(287, 10%, 45.3%)
CMYK cmyk(3.9%, 18.1%, 0%, 50.2%)
HSV hsv(287, 18.1%, 49.8%)

purplish grey color harmonies

Tints & shades of purplish grey

Tints (lighter)

#86768b #928396 #9e91a2 #aa9fae #b6adb9 #c3bac5 #cfc8d0 #dbd6dc #e7e4e8 #f3f1f3

Shades (darker)

#6f5f73 #645568 #594c5c #4e4251 #433945 #372f3a #2c262e #211c23 #161317 #0b090c

Contrast & accessibility

The quick brown fox

On white · 5.1:1 · AA

The quick brown fox

On black · 4.11:1 · AA Large

Recommended text color: #ffffff

Use purplish grey in code

CSS color: #7a687f;
SCSS $color: #7a687f;
Tailwind bg-[#7a687f]
Swift UIColor(red: 0.478, green: 0.408, blue: 0.498, alpha: 1)
Android Color.parseColor("#7a687f")
Flutter Color(0xFF7A687F)

Colors similar to purplish grey

Browse all Purple colors →

What is the HSL code for purplish grey?

The CSS color purplish grey in HSL format is hsl(287, 10%, 45.3%). Use this value directly in CSS, SVG, and most design tools.

How do I use purplish grey in CSS?

To apply purplish grey in CSS:

  • Text color: color: hsl(287, 10%, 45.3%);
  • Background: background-color: hsl(287, 10%, 45.3%);
  • Border: border-color: hsl(287, 10%, 45.3%);

What are all the color format values for purplish grey?

FormatValue
HEX#7a687f
RGBrgb(122, 104, 127)
HSLhsl(287, 10%, 45.3%)
CMYKcmyk(3.9%, 18.1%, 0%, 50.2%)

How do I convert purplish grey to HSL?

Select purplish grey from the color name list in our color converter. The HSL value — hsl(287, 10%, 45.3%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does purplish grey belong to?

purplish grey belongs to the purple color family. It is a medium, muted color with HSL values: hue 287°, saturation 10%, lightness 45.3%.

How do I create lighter and darker shades of purplish grey?

Lighter variant (lightness 60.3%): #a090a4. Darker variant (lightness 30.299999999999997%): #524655. These values are computed by adjusting HSL lightness ±15% while keeping the same hue and saturation.

What is HSL used for?

HSL describes colors by hue (0–360°), saturation (0–100%) and lightness (0–100%). It is more intuitive for designers — easy to create lighter, darker or less saturated variants of any color.