RGB to HSL converter
See any RGB color as hue, saturation and lightness: 255, 128, 64 becomes 20.1°, 100 % and 62.55 %. Adjust tone or build light and dark themes without guessing. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Resistance (Ω)
- 255
- G
- 128
- B
- 64
- H
- 20.1047
- S
- 100
- L
- 62.549
- Hue
- 20.1047
Designers, front-end developers, and pipeline authors often hold colours as red, green, and blue integers from zero to two hundred fifty-five, yet need hue, saturation, and lightness to adjust tone without drifting brightness, build CSS variables, or feed colour-aware tools. This RGB to HSL converter accepts three channels in that standard byte range, 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. Channels outside zero to two hundred fifty-five fail with a clear invalid input error so bad data never becomes a silent clamp.
Entering RGB channels and what the conversion computes
Provide three numbers named r, g, and b for red, green, and blue. The engine first normalises each channel by dividing by two hundred fifty-five so values sit on the unit interval. It then 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, which is 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
Convert RGB 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 RGB brand colours derives HSL components to generate tints, shades, and accent variants without clamping out-of-range channels silently.
FAQ
How do I convert RGB to HSL with this tool?
The response includes h, s, l, CSS strings, and a nested hsl object.
What happens if a channel is outside 0–255?
Each of r, g, and b must be between 0 and 255 inclusive; out-of-range values 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 RGB to HSL converter free?
The browser tool runs free on your device.
How is HSL lightness calculated?
Each channel is divided by 255, then lightness is half the sum of the largest and smallest values. For 255, 128, 64 that gives 62.55 %.
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/rgb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"r":255,"g":128,"b":64}'const res = await fetch("https://api.kit.forhosting.com/color/rgb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"r": 255,
"g": 128,
"b": 64
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/rgb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"r": 255,
"g": 128,
"b": 64
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/rgb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"r":255,"g":128,"b":64}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"r":255,"g":128,"b":64}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/rgb-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
{
"r": 255,
"g": 128,
"b": 64
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.rgb_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 RGB channels and what the conversion computes
Each channel must be a finite number between zero and two hundred fifty-five inclusive; integer strings such as "128" are accepted, and aliases red, green, and blue map to the same fields when you prefer longer 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, and CSS strings
Pure red two hundred fifty-five zero zero yields hue zero with full saturation and mid lightness; pure green and pure blue land near one hundred twenty and two hundred forty degrees respectively; equal channels produce greys with saturation zero. On success the response echoes the input channels r, g, and b, 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(30 100% 50%), and hsl_legacy uses the classic comma form with parentheses that older parsers still expect. The method field is always rgb_to_hsl so downstream routers can branch without sniffing shapes. Missing any required channel, non-numeric values, and any channel outside zero to two hundred fifty-five 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 RGB 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. Authors shipping SDKs can map h, s, and l directly into form controls or CSS custom properties without reimplementing the conversion in every language. Send a JSON body with required numbers r, g, and b in the published range. 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 RGB to HSL with strict channel bounds; 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 RGB→HSL answers against deterministic JSON, with a clear invalid_input when any channel falls outside 0–255.
Technical questions
Can I use the aliases red, green, and blue?
Yes. The fields red, green, and blue are accepted as aliases for r, g, and b so clients can use either short or long channel names.