CMYK to HSL Converter

Convert CMYK color values to HSL with live, two-way sliders.

Enter a color

%
%
%
%
#3B82F6
 
  • HEX
  • RGB
  • HSL
  • HSB
  • HSV
  • CMYK
Copy HSL Copy Link

Contrast & Accessibility WCAG ratio of this color used as text

Aa ——on white
Aa ——on black

Shades & Tints click any swatch to load it

Shades (toward black)
Tints (toward white)

Color Harmonies based on the current Hue

Complementary
 
Analogous
  
Triadic
  
Split Complementary
  
Tetradic
   

About the CMYK to HSL Converter

What is CMYK to HSL conversion?

CMYK is the four-ink print model — Cyan, Magenta, Yellow, and Key (black). HSL describes a color by Hue, Saturation, and Lightness, the screen-friendly form CSS understands. This converter takes your CMYK percentages and returns the matching HSL, along with HEX, RGB, and HSB and a live preview.

You'll reach for this when a color is defined for print but you need it on screen — turning a CMYK brand color into an hsl() you can use in CSS, where it's easy to make lighter or darker variants. Drag the C, M, Y, and K sliders and the HSL value updates instantly. It all runs in your browser.

How to Use This Tool

  1. Set your CMYK color. Drag the Cyan, Magenta, Yellow, and Key sliders, or type 0–100% values.
  2. Read the HSL value. The matching hsl() appears at the top and updates live.
  3. Or start from HEX. Paste a HEX code and the CMYK sliders snap to match.
  4. Take what you need. Copy HSL, HEX, RGB, or HSB, and explore the shades and harmonies.

Common Use Cases

  • Print color on the web: Convert a CMYK value to an HSL one you can style with.
  • Building variants: Once in HSL, change only the Lightness for related shades.
  • Style guides: Document a color in CMYK for print and HSL for the web.
  • Checking contrast: See how the color scores as text on white and black.

Need the reverse or another model? Use our HSL to CMYK converter, the CMYK to RGB converter, or browse all our free color tools.

Frequently Asked Questions

How do I convert CMYK to HSL?

Enter your Cyan, Magenta, Yellow, and Key percentages and the HSL result appears instantly. The tool converts CMYK to RGB first, then derives the Hue, Saturation, and Lightness.

Can I use the HSL value in CSS?

Yes. HSL is native to CSS, so you can paste the hsl() value straight into a stylesheet, optionally with an alpha channel for opacity.

Is the conversion exact?

It's a standard mathematical conversion that's accurate for on-screen use. Because CMYK and screen color don't cover identical ranges, it isn't a color-managed print proof, but for everyday digital work it's spot-on.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, so your colors are never uploaded or logged, and it works offline once loaded.