ImageColorPicker.com

CMYK to HSL converter

Convert any CMYK color to HSL, instantly and for free

#754595

Paste any color value. We detect the format for you.

C
M
Y
K
HSL result
Hue
276°
Saturation
37%
Lightness
43%

CMYK profile: Coated FOGRA39 (Photoshop's default for Europe)

This color in every format

Bringing a print palette to the web is easier in HSL: once your ink mix is expressed as hue, saturation and lightness, you can build hover states, tints and shades from it in seconds.

How CMYK to HSL conversion works

  1. Convert the CMYK percentages to sRGB channels between 0 and 255 with the Coated FOGRA39 profile.
  2. Divide the channels by 255 and take their maximum and minimum.
  3. The average of maximum and minimum is the lightness L, their spread drives the saturation S.
  4. The channel holding the maximum determines the hue H in degrees on the color wheel.

Worked example

CMYK cmyk(66%, 82%, 0%, 0%)=HSL hsl(276, 37%, 43%)

The CMYK to RGB step uses the standard Coated FOGRA39 profile, so other CMYK profiles (for example from your print shop) give different numbers. HSL values are rounded to whole numbers.

CMYK and HSL explained

What is CMYK?

CMYK is the four-ink model used in printing: cyan, magenta, yellow and key (black), each as a percentage from 0 to 100. Ink subtracts light instead of emitting it, so CMYK covers fewer colors than a screen, which is why bright screen colors often look duller once they are printed.

Syntax:
cmyk(C%, M%, Y%, K%)
Range:
0–100% per ink
Best for:
print, packaging, press-ready artwork

What is HSL?

HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.

Syntax:
hsl(H, S%, L%)
Range:
0–360°, 0–100%, 0–100%
Best for:
palettes, tints and shades, theming

CMYK to HSL reference table

The most common CSS colors, converted from CMYK to HSL.

ColorCMYKHSL
blackcmyk(89%, 78%, 62%, 97%)hsl(0, 0%, 0%)
whitecmyk(0%, 0%, 0%, 0%)hsl(0, 0%, 100%)
redcmyk(0%, 95%, 92%, 0%)hsl(1, 79%, 51%)
limecmyk(64%, 0%, 100%, 0%)hsl(93, 60%, 44%)
bluecmyk(93%, 75%, 0%, 0%)hsl(224, 56%, 39%)
yellowcmyk(9%, 0%, 96%, 0%)hsl(57, 100%, 48%)
orangecmyk(0%, 43%, 94%, 0%)hsl(37, 93%, 53%)
tealcmyk(83%, 27%, 48%, 12%)hsl(180, 87%, 27%)
purplecmyk(63%, 100%, 4%, 1%)hsl(299, 58%, 31%)
graycmyk(48%, 39%, 39%, 21%)hsl(30, 1%, 50%)

More color converters

Frequently asked questions

Convert the CMYK percentages to sRGB channels between 0 and 255 with the Coated FOGRA39 profile. Divide the channels by 255 and take their maximum and minimum. The average of maximum and minimum is the lightness L, their spread drives the saturation S. The channel holding the maximum determines the hue H in degrees on the color wheel.

The CMYK to RGB step uses the standard Coated FOGRA39 profile, so other CMYK profiles (for example from your print shop) give different numbers. HSL values are rounded to whole numbers.

HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.

Yes. The swap button next to the input takes you to the HSL to CMYK converter, which works exactly the same way. Both directions use the same formula, just applied in reverse.

Once you are in HSL, keep the hue from print and adjust only the lightness for the web version. That keeps the brand color recognisable while meeting screen contrast requirements.