CMYK to HSL Converter

Convert print CMYK color percentages to CSS-ready HSL (Hue, Saturation, Lightness) values instantly.

Visual Color Picker

#14b8a6

Color Conversions

HEX

RGB

HSL

CMYK

Complementary Palette

Analogous Palette

Triadic Palette

Monochromatic Palette

Color 1

Color 2

Angle (Degrees) 135°

CSS Code

Drag & Drop Image or Click to Browse

Supported: JPEG, PNG, GIF, SVG, WebP (max 10 MB)

Extracted Details

Hover Pixel Color:

#ffffff

Selected Color:

—

Hover over the image to preview pixel colors. Click to select and load that color into the main converter fields (HEX, RGB, HSL, CMYK).

Foreground (Text) Color

Background Color

Sample Text Display

Contrast Ratio 4.5:1

Small Text (WCAG AA - 4.5:1) Pass

Large Text (WCAG AA - 3.0:1) Pass

Small Text (WCAG AAA - 7.0:1) Pass

Large Text (WCAG AAA - 4.5:1) Pass

What is the CMYK to HSL Converter?

Convert CMYK print color values to HSL format online. Free, instant browser-based CMYK to HSL converter for transitioning print designs to web-ready CSS colors.

How to use the CMYK to HSL Converter?

Enter your CMYK percentage values (Cyan, Magenta, Yellow, Key/Black from 0-100%) in the CMYK input field.
The tool will instantly calculate the matching HSL values (Hue, Saturation%, Lightness%).
Click 'Copy' to copy the formatted HSL CSS string to your clipboard.

Frequently Asked Questions

How does CMYK to HSL conversion work?

CMYK is first converted to RGB using: R = 255 × (1-C) × (1-K), G = 255 × (1-M) × (1-K), B = 255 × (1-Y) × (1-K). Then RGB is converted to HSL by calculating the hue from the dominant channel, saturation from the chroma, and lightness from the average of max and min channels.

Why convert CMYK to HSL instead of HEX?

HSL is more intuitive for creating color variations in CSS. Once you have your print brand color in HSL, you can easily create lighter, darker, or muted versions by adjusting a single value — perfect for building design systems.

Is this conversion lossless?

The mathematical conversion is precise within the RGB gamut. However, since CMYK and RGB/HSL represent different color spaces, there may be slight rounding differences at the decimal level.