Convert HSL to CMYK
Convert CSS hsl(...) colors into CMYK print values like cmyk(0%, 100%, 67%, 0%)—fast, private, and right in your browser.
- Paste a single HSL color or a whole palette
- Use one color per line for batch conversion
- Copy your CMYK results instantly
Quick start
- Paste your HSL color(s) into the input.
- Use one color per line.
- Copy the CMYK results.
Single color
Input:
hsl(340, 100%, 50%)Output:
cmyk(0%, 100%, 67%, 0%)Palette / batch conversion
Input:
hsl(340, 100%, 50%)
hsl(188, 86%, 53%)
hsl(221, 39%, 11%)Output (example):
cmyk(0%, 100%, 67%, 0%)
cmyk(86%, 11%, 0%, 7%)
cmyk(56%, 38%, 0%, 85%)CMYK conversions are typically approximations. Small differences are normal depending on profiles and print conditions.
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
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 colors)
Why HSL → CMYK is an approximation
HSL is a screen-oriented model (it’s effectively another view of an sRGB color).
CMYK is a print-oriented model that depends on the specific printer, paper, and profile.
That means there isn’t one universal “correct” CMYK for an HSL color. Accurate conversions usually require:
- a specific CMYK ICC profile (e.g., coated vs uncoated)
- color-managed software and proofing
This converter is still very useful when you need:
- a quick print estimate from a web palette
- rough CMYK values for brand docs
- a sanity check before proper profile conversion
For print-critical work, always confirm with the printer’s recommended profile and proofs.
How HSL → CMYK conversion works
Conceptually, the converter does this for each line:
- Interpret the HSL color (Hue + Saturation + Lightness)
- Convert to an internal RGB representation (screen color)
- Convert that RGB into CMYK percentages using a standard (profile-free) method
Because step (3) 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.
✅ hsl(340, 100%, 50%)
🚫 hsl(340, 100%, 50%)
Missing % signs for S and L
Saturation and Lightness are percentages:
✅ hsl(221, 39%, 11%)
🚫 hsl(221, 39, 11)
Hue outside 0–360
Keep Hue within a normal degree range:
✅ hsl(188, 86%, 53%)
🚫 hsl(420, 86%, 53%)
Practical uses
- Create print handoff values from HSL-based design palettes
- Build brand guidelines that show HSL (design) and CMYK (print)
- Translate theme systems into a print-friendly baseline
- Get a fast estimate before doing a proper ICC-profile export
If you design in HSL, converting to CMYK is a practical bridge for print communication—just remember that final print accuracy comes from profiles and real-world proofs.
