Why is the HSL result approximate?

CMYK and HSL occupy different color gamuts. CMYK describes print pigments, while HSL is based on the RGB color model used by screens. The conversion passes through RGB as an intermediate step, so some print colors may not display identically on screen.

What is the Key (K) channel in CMYK?

K stands for Key, which represents black ink. A separate black channel produces deeper blacks and reduces overall ink cost compared to mixing equal amounts of Cyan, Magenta, and Yellow.

How is CMYK converted to HSL?

The conversion has two steps: CMYK is first converted to RGB using the formulas R = 255 × (1-C/100) × (1-K/100), and similarly for G and B. The resulting RGB values are then converted to HSL.

Are the HSL values suitable for use in CSS?

Yes. The output hsl() string can be pasted directly into CSS. Keep in mind that the color may look slightly different from a physical print because screen gamuts and print gamuts differ.

What does K=100 produce?

K=100 with any C, M, Y values produces pure black: hsl(0, 0%, 0%). Similarly, all channels at 0 produce pure white: hsl(0, 0%, 100%).

CMYK to HSL Converter

Name: CMYK to HSL Converter
Availability: InStock
Author: Nham Vu

Enter CMYK percentages and instantly get the equivalent HSL values with a live color preview swatch.

CMYK Input

Cyan (%) 0 – 100

Magenta (%) 0 – 100

Yellow (%) 0 – 100

Key / Black (%) 0 – 100

HSL Output

hsl(198, 57%, 64%)

Hue (°)

Saturation (%)

Lightness (%)

Ink Coverage 0%

Sum of all four ink channels (C+M+Y+K)

Copied!

Summary

Enter CMYK percentages and instantly get the equivalent HSL values with a live color preview swatch.

How it works

Enter Cyan, Magenta, Yellow, and Key (Black) percentages (0–100) in the input fields.
The HSL values and color preview swatch update instantly as you type.
Use the sliders for quick visual adjustment of each ink channel.
Click any Copy button to copy individual HSL channel values or the full hsl() string.
The color swatch gives you an instant visual reference of the resulting color.

Use cases

Translate print-spec CMYK colors into CSS-ready HSL values.
Cross-reference brand color specifications between print and web.
Convert CMYK values from design files into HSL for CSS stylesheets.
Validate that a print color matches the intended on-screen appearance.
Convert ink color values to HSL for use in design tools or CSS.
Quickly estimate the hue and saturation produced by a given ink mix.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu