Grape to HSL — Color Code

#6c3461
Format Value
HEX #6c3461
RGB rgb(108, 52, 97)
HSL hsl(311.8, 35%, 31.4%)
CMYK cmyk(0%, 51.9%, 10.2%, 57.6%)
HSV hsv(311.8, 51.9%, 42.4%)

grape color harmonies

Tints & shades of grape

Tints (lighter)

#79466f #87597e #946b8c #a17e9a #af90a9 #bca3b7 #cab5c6 #d7c8d4 #e4dae2 #f2edf1

Shades (darker)

#622f58 #582b4f #4f2647 #45213e #3b1c35 #31182c #271323 #1d0e1a #140912 #0a0509

Contrast & accessibility

The quick brown fox

On white · 9.12:1 · AAA

The quick brown fox

On black · 2.3:1 · Fail

Recommended text color: #ffffff

Use grape in code

CSS color: #6c3461;
SCSS $color: #6c3461;
Tailwind bg-[#6c3461]
Swift UIColor(red: 0.424, green: 0.204, blue: 0.380, alpha: 1)
Android Color.parseColor("#6c3461")
Flutter Color(0xFF6C3461)

Colors similar to grape

Browse all Pink colors →

What is the HSL code for grape?

The CSS color grape in HSL format is hsl(311.8, 35%, 31.4%). Use this value directly in CSS, SVG, and most design tools.

How do I use grape in CSS?

To apply grape in CSS:

  • Text color: color: hsl(311.8, 35%, 31.4%);
  • Background: background-color: hsl(311.8, 35%, 31.4%);
  • Border: border-color: hsl(311.8, 35%, 31.4%);

What are all the color format values for grape?

FormatValue
HEX#6c3461
RGBrgb(108, 52, 97)
HSLhsl(311.8, 35%, 31.4%)
CMYKcmyk(0%, 51.9%, 10.2%, 57.6%)

How do I convert grape to HSL?

Select grape from the color name list in our color converter. The HSL value — hsl(311.8, 35%, 31.4%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does grape belong to?

grape belongs to the pink color family. It is a medium, moderately saturated color with HSL values: hue 311.8°, saturation 35%, lightness 31.4%.

How do I create lighter and darker shades of grape?

Lighter variant (lightness 46.4%): #a04d8f. Darker variant (lightness 16.4%): #381b33. 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.