Hex to HSL converter
Turn a hex code into values you can adjust by eye: #FF8040 is hue 20.1°, saturation 100% and lightness 62.55%, ready to paste as hsl(20.1 100% 62.55%). Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hex
- #FF8040
- Hex digits
- FF8040
- Resistance (Ω)
- 255
- G
- 128
- B
- 64
Designers, front-end developers, and brand systems often store colours as hex codes such as #FF8040 or the short form #f80, yet need hue, saturation, and lightness to adjust tone without drifting brightness, build CSS variables, or feed colour-aware design tokens. This hex to HSL converter accepts a three- or six-digit hexadecimal colour code with or without a leading hash, expands shorthand forms the same way CSS does, runs a deterministic sRGB-style conversion, and returns hue in degrees plus saturation and lightness as percentages, together with modern and legacy CSS hsl strings you can paste into stylesheets. Invalid hex codes—wrong length, non-hex characters, or a missing field—fail with a clear invalid input error so bad data never becomes a silent clamp.
Entering a hex code and what the conversion computes
Provide a string field named hex with a three-digit or six-digit hexadecimal colour code. A leading hash is optional, so both #FF8040 and FF8040 are accepted, as are short forms such as #f80 and f80. Case is ignored: lower-case, upper-case, and mixed digits all normalise to the same result.
Three-digit codes expand by doubling each digit—f80 becomes FF8800—matching the CSS colour shorthand rule used in browsers. After expansion the engine parses two hex digits per channel into red, green, and blue integers from zero to two hundred fifty-five, then normalises each channel by dividing by two hundred fifty-five so values sit on the unit interval. It finds the maximum and minimum of those three normalised components and the chroma as their difference.
Lightness is half the sum of maximum and minimum. When chroma is zero the colour is achromatic: hue is zero and saturation is zero, leaving only lightness to describe greys from black through mid-grey to white. When chroma is positive, saturation is chroma divided by one minus the absolute value of two times lightness minus one, the standard HSL saturation formula used across CSS and graphics stacks.
Hue is built from the sector of the colour wheel where the maximum channel sits: red-dominant, green-dominant, or blue-dominant, scaled to degrees in the half-open range from zero up to three hundred sixty.
What you can do with it
CSS and design tokens from hex brand colours
Convert hex swatches from design tools into HSL so themes can adjust hue or lightness while keeping saturation policies consistent across light and dark modes.
Palette and brand pipelines
Automation that starts from hex brand colours derives HSL components to generate tints, shades, and accent variants without accepting malformed codes silently.
FAQ
How do I convert a hex colour to HSL with this tool?
The response includes h, s, l, RGB channels, CSS strings, and a nested hsl object.
What happens if the hex code is invalid?
Only 3 or 6 hexadecimal digits are accepted (optional leading #). Wrong length or non-hex characters are rejected and not charged.
Are hue, saturation, and lightness percentages or 0–1 fractions?
Hue is in degrees from 0 up to 360. Saturation and lightness are percentages from 0 to 100, matching common CSS hsl() usage.
Is the hex to HSL converter free?
The browser tool runs free on your device.
Can I use short three-digit hex codes?
Yes. Codes like #f80 expand to #FF8800 by doubling each digit, matching CSS shorthand rules, then convert to HSL.
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/hex-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#FF8040"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#FF8040"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#FF8040"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#FF8040"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#FF8040"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"hex": "#FF8040"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_hsl",
"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
Entering a hex code and what the conversion computes
Aliases color, colour, value, and hex_code map to the same field when clients prefer those names. Identical inputs always produce identical JSON because the path is pure arithmetic with no network, no random seed, and no wall clock.
Reading hue, saturation, lightness, RGB echo, and CSS strings
Pure red #FF0000 yields hue zero with full saturation and mid lightness; pure green #00FF00 and pure blue #0000FF land near one hundred twenty and two hundred forty degrees respectively; equal channels such as #808080 produce greys with saturation zero. On success the response includes the normalised hex string with a leading hash and six uppercase digits, the hex_digits field without the hash, and the expanded r, g, and b channels so you can verify the parse or chain into RGB-only tools. It then exposes h, s, and l for hue in degrees, saturation in percent, and lightness in percent. The same three numbers appear again under the long names hue, saturation, and lightness, and nested inside an hsl object, so UI code, SDK demos, and graders can pick whichever shape fits without extra mapping. Two ready-to-paste strings are included: hsl_css uses the modern space-separated CSS Color Module form such as hsl(20.1 100% 62.55%), and hsl_legacy uses the classic comma form with parentheses that older parsers still expect. The method field is always hex_to_hsl so downstream routers can branch without sniffing shapes. Missing hex, empty strings, non-hex characters, and lengths other than three or six digits all fail with invalid_input and are not charged after the engine rejects the request.
API usage, pricing, design workflows, and practical limits
Call the free in-browser hex to HSL converter for palette tweaks, lecture demos, and quick checks without installing a colour library. Pair HSL outputs with contrast checkers when building accessible themes, or feed hue shifts into brand token pipelines that keep lightness fixed while rotating accent colours derived from a hex brand swatch. Authors shipping SDKs can map h, s, and l directly into form controls or CSS custom properties without reimplementing hex parsing and conversion in every language. Send a JSON body with required string hex set to a three- or six-digit colour code. Use the prepaid API when a design system, theme generator, accessibility pipeline, or e-commerce colour tool needs a stable contract under KIT balance at $0.002 per successful item; validation failures never consume balance after the engine rejects the request. Prefer this endpoint when search intent and product framing are specifically hex to HSL with strict code validation; for RGB channel triples use the dedicated RGB to HSL converter, and for multi-format conversion among HEX, RGB, HSL, LAB, and CMYK in one call use the broader colour converter elsewhere in the catalogue.
Integration use cases
Teaching and grading colour math
Courses and coding assessments check student hex→HSL answers against deterministic JSON, with a clear invalid_input when the hex code is malformed.