CMYK to HSL Converter

Convert CMYK to HSL

Convert CMYK values like cmyk(0%, 66%, 80%, 0%) into CSS hsl(11, 100%, 60%)—fast, private, and right in your browser.

• Paste a single CMYK color or a whole palette
• Use one color per line for batch conversion
• Copy your HSL results instantly

---

Quick start

1. Paste your CMYK color(s) into the input.
2. Use one color per line.
3. Copy the HSL results.

Single color

Input:

cmyk(0%, 66%, 80%, 0%)

Output:

hsl(11, 100%, 60%)

Palette / batch conversion

Input:

cmyk(0%, 100%, 67%, 0%)
cmyk(86%, 11%, 0%, 7%)
cmyk(56%, 38%, 0%, 85%)

Output (example):

hsl(340, 100%, 50%)
hsl(188, 86%, 53%)
hsl(221, 39%, 11%)

CMYK conversions are typically approximations. Small differences are normal depending on profiles and print conditions.

---

What CMYK means (Cyan, Magenta, Yellow, Key/Black)

CMYK is a subtractive color model used for printing.

• C = Cyan
• M = Magenta
• Y = Yellow
• K = Key (Black)

Why “subtractive”?

• Paper reflects light.
• Inks absorb (subtract) parts of that light.
• More ink usually means a darker result.

In real print workflows, CMYK values depend on:

• the ink set
• the paper stock
• press calibration
• an ICC profile (the rules that map CMYK ↔ color)

---

What HSL means (Hue, Saturation, Lightness)

HSL describes a color using three values:

• Hue (H): the color family around a wheel (0–360°)
  • 0° = red, 120° = green, 240° = blue
• Saturation (S): vividness (0% gray → 100% vivid)
• Lightness (L): light/dark (0% black → 100% white)

HSL is popular because it’s easy to design with:

• keep Hue stable and adjust Lightness for a scale
• desaturate for muted UI states
• rotate Hue to explore different palettes

---

Why CMYK → HSL is an approximation

CMYK values don’t map to a single universal color. The same CMYK percentages can print differently across presses, papers, and profiles.

HSL is a screen-oriented model (another view of an sRGB color).

Accurate conversion between print CMYK and screen HSL usually requires:

• the correct ICC profile (coated/uncoated, specific press standard)
• color-managed software and proofing

This converter is still very useful when you need:

• a quick screen-friendly representation of print specs
• rough HSL values for web themes
• sanity checks while translating brand guidelines

For print-critical accuracy, confirm with the printer’s profile and proofs.

---

How CMYK → HSL conversion works

Conceptually, the converter does this for each line:

1. Read CMYK percentages (0–100%)
2. Convert into a screen-like RGB estimate
3. Convert that RGB into HSL (Hue + Saturation + Lightness)

Because step (2) depends on assumptions, rounding and minor differences are expected.

---

Common mistakes (and quick fixes)

Extra spaces at the start/end of a line

Leading and trailing spaces are ignored.

✅ cmyk(0%, 66%, 80%, 0%)

🚫 cmyk(0%, 66%, 80%, 0%)

Missing % signs

CMYK values are percentages:

✅ cmyk(100%, 0%, 0%, 0%)

🚫 cmyk(100, 0, 0, 0)

Values outside 0–100%

Keep all channels within range:

✅ cmyk(0%, 100%, 0%, 0%)

🚫 cmyk(0%, 120%, 0%, -10%)

---

Practical uses

• Translate print specs into HSL for UI theming and documentation
• Compare palette relationships (Hue shifts, saturation levels) on screen
• Build web themes based on print brand guidelines
• Communicate color intent (e.g., “keep hue, adjust lightness”) after conversion

If you receive brand colors as CMYK but design your UI in HSL, this conversion gives you a fast starting point—then you can fine-tune by eye on real screens and validate against official web palette values.