HSL to CMYK converter
Go from an HSL swatch to process inks in one step: hue 210, saturation 80% and lightness 45% become cyan 89%, magenta 44%, yellow 0% and key 19%, by way of RGB 23, 115, 207. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- H
- 210
- S
- 80
- L
- 45
- Resistance (Ω)
- 23
- G
- 115
- B
- 207
- Cyan
- 89
Designers often pick colors in HSL because hue, saturation, and lightness map cleanly to how people talk about a swatch: which color on the wheel, how vivid it is, and how close it sits to black or white. Print shops, packaging vendors, and press tickets still ask for cyan, magenta, yellow, and key as percentages. This HSL to CMYK converter takes those three HSL numbers, maps them through sRGB using the same closed-form CSS path browsers use for hsl(), then applies the textbook subtractive formula so you can preview process-ink values without opening a full color-management suite. Invalid saturation or lightness is rejected with a clear error instead of being clamped in silence, so a mistyped percentage never becomes a wrong press ticket.
How HSL becomes CMYK by going through RGB
HSL is a cylindrical model built for people: hue is an angle on the color wheel, saturation is how far the color sits from gray, and lightness is how close it sits to black or white. CMYK is a subtractive model built for ink on paper: cyan, magenta, and yellow absorb light, and key (black) deepens shadows and text without dumping three colored inks on top of each other.
There is no single closed formula that jumps from hue-saturation-lightness straight into process inks while still matching what a screen shows, so this converter uses a two-step path that print-preview tools have used for decades. First it converts HSL into eight-bit sRGB with the CSS Color Module algorithm: scale saturation and lightness into the unit interval, compute intermediate bounds p and q, then sample three shifted positions on the unit circle with the classic hue2rgb helper. When saturation is zero the three channels collapse to the same lightness-derived gray.
Each unit-interval channel is multiplied by two hundred fifty-five and rounded to the nearest integer so the RGB triple matches browser hsl() rendering and the sibling HSL to RGB converter. Second it treats those integers as additive light, divides each by two hundred fifty-five, sets key to one minus the maximum of the three normalized channels, and derives cyan, magenta, and yellow from the leftover. Pure black becomes one hundred percent key with zero colored ink.
What you send, what you get back, and why saturation or lightness can fail
Send three finite numbers under the fields h, s, and l. The field h is hue in degrees and must sit between zero and three hundred sixty inclusive. The fields s and l are saturation and lightness as percentages from zero to one hundred.
Saturation outside the closed range zero to one hundred is rejected with a message that names the field s, so a client can highlight the saturation control instead of guessing. Lightness outside that same band fails the same way for the field l. The converter does not clamp one hundred and twenty percent down to one hundred, and it does not wrap a negative lightness: a print preview that silently repaired a typo would be worse than an error, because the operator would think the ticket matched the design token.
Hue outside zero to three hundred sixty is also rejected rather than wrapped modulo three hundred sixty. Classic checks include pure red as hue zero, saturation one hundred, lightness fifty yielding cyan zero, magenta one hundred, yellow one hundred, key zero; black as any hue with lightness zero yielding key one hundred; and white as lightness one hundred yielding all zeros.
Wire the free browser form for a single swatch review, then call the identical contract from scripts when you need a table of design-system HSL tokens turned into process-ink columns.
Where an HSL to CMYK print preview earns its keep
Brand systems often store ramps and semantic tokens in HSL so product teams can rotate hue for seasonal themes while keeping lightness steps that still pass contrast checks. Those same tokens later appear on packaging, stationery, vehicle wraps, and point-of-sale prints, where a vendor form wants cyan, magenta, yellow, and key. A dedicated HSL to CMYK converter lets a design-ops pipeline fill those columns without asking every designer to open a desktop color picker and copy four numbers by hand.
Marketing teams that live in HSL-friendly tools still need a first-look process-ink preview before a file leaves for the press; this page is that first look, not a replacement for an ICC-profiled soft-proof of photography. Curriculum and print-production classes teach additive and subtractive models side by side and need a single oracle that matches CSS rendering on the RGB step and the textbook key formula on the CMYK step.
Game and product configurators expose a hue wheel to the shopper and must dump CMYK into a merchandising sheet when the same color is printed on a box. Treat a later need for CMYK back to RGB, a general multi-format converter, or a contrast checker as a different search intent and a different landing. This page exists so the query hsl to cmyk converter has one honest, deterministic answer that never pretends to be a press profile.
What you can do with it
Design tokens to press tickets
Turn HSL brand ramps into cyan, magenta, yellow and key percentages for packaging specs, stationery and vendor forms.
Print-preview QA before handoff
Check that an HSL mockup maps to expected process-ink values before a file leaves for the press, without silent clamping.
FAQ
How does this converter turn HSL into CMYK?
It first maps hue, saturation and lightness to 8-bit sRGB with the CSS / W3C hue2rgb path, then applies the textbook subtractive formula: key is one minus the brightest normalized channel, and cyan, magenta and yellow fill the remainder.
What happens if saturation or lightness is out of range?
Saturation s and lightness l must each sit between 0 and 100 percent inclusive. Values are not clamped or wrapped, so a mistyped percentage cannot become a wrong print ticket.
Is this the same as an ICC press profile?
No. This is a deterministic sRGB-relative print preview using the classic RGB-to-CMYK key formula. Soft-proofing photography against a named press profile is a different workflow and a different tool.
Why does the result include RGB channels as well as CMYK?
The conversion goes through sRGB on purpose. Echoing r, g and b lets you confirm the intermediate matches a browser hsl() swatch before you copy the cmyk() string into a press note.
What does the HSL to CMYK converter cost?
The browser tool is free and runs locally.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/hsl-cmyk \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"h":210,"s":80,"l":45}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-cmyk", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"h": 210,
"s": 80,
"l": 45
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-cmyk",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"h": 210,
"s": 80,
"l": 45
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-cmyk", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"h":210,"s":80,"l":45}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"h":210,"s":80,"l":45}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-cmyk", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"h": 210,
"s": 80,
"l": 45
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_cmyk",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
The free browser tool and the API share one deterministic function, so a design review and an automation pipeline never disagree on the same HSL triple.
How HSL becomes CMYK by going through RGB
The whole pipeline is pure floating-point arithmetic with no random seeds, no wall-clock timestamps, and no network calls, so identical HSL inputs always produce identical JSON.
What you send, what you get back, and why saturation or lightness can fail
Missing fields, empty strings, non-numeric tokens, NaN, and Infinity fail with invalid_input and are not charged. On success the response echoes the cleaned h, s, and l values, the intermediate integer channels r, g, and b each from zero through two hundred fifty-five, the four print percentages cyan, magenta, yellow, and key, a printable cmyk string of the form cmyk(C%, M%, Y%, K%), and a short formula note that names both steps. Pricing for successful API calls is the published base of $0.002 per item; validation failures do not consume prepaid balance.
Where an HSL to CMYK print preview earns its keep
Because this capability is a pure parse engine, API pricing is the published base of $0.002 per successful item and failed validation does not consume balance.
Integration use cases
Bulk token pipelines
Script design-system HSL specs into CMYK columns for catalogs, merchandising sheets and regression fixtures with one deterministic API.