Convert HSL to RGB
Get plain red, green and blue numbers from an HSL color: hue 210, saturation 80% and lightness 45% come out as red 23, green 115 and blue 207. Values out of range are flagged, never quietly wrapped. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hue
- 210
- Saturation
- 80
- Lightness
- 45
- Red
- 23
- Green
- 115
- Blue
- 207
Convert an HSL color into the red, green, and blue channel values required by many graphics tools, image formats, and software interfaces. Enter hue in degrees and saturation and lightness as percentages, then receive three integers from 0 to 255. The converter validates every component before calculating, so an out-of-range value produces a clear input error instead of an unexpected wrapped or clipped color. Its pure, deterministic calculation is suitable for interactive checks, documentation examples, design-token pipelines, and repeatable automated transformations.
Understanding the HSL inputs
HSL describes a color using three ideas that are often easier to adjust than individual red, green, and blue channels. Hue is an angle on a color wheel. Zero degrees represents red, 120 degrees represents green, 240 degrees represents blue, and 360 degrees returns to the same red position as zero.
Saturation controls how colorful the result is. At zero percent, hue has no visible effect and the output is a shade of gray. At 100 percent, the color reaches the maximum chroma available for the chosen hue and lightness.
Lightness places the result between black and white. Zero percent is always black, 50 percent provides the strongest form of a fully saturated hue, and 100 percent is always white. Supply hue as a finite number from 0 through 360, and supply saturation and lightness as finite percentages from 0 through 100.
The boundaries are accepted. Values outside those intervals are rejected instead of silently normalized, which helps reveal incorrect design tokens and prevents an accidental negative hue or percentage above 100 from producing a plausible but unintended color.
How the conversion produces RGB channels
The calculation first scales hue onto a unit circle and converts saturation and lightness from percentages to fractions. When saturation is zero, the color is achromatic, so all three RGB channels receive the same value derived from lightness. Otherwise, the algorithm calculates two intermediate bounds from saturation and lightness.
It samples the hue circle at three positions separated by one third of a turn: one position for red, one for green, and one for blue. A piecewise interpolation maps each position between the intermediate bounds. Finally, each channel fraction is multiplied by 255 and rounded to the nearest integer.
No input is clipped into range, so validation mistakes remain visible to the caller.
Using the result reliably
Use the returned channels wherever a system asks for eight-bit RGB values. A stylesheet can place them in an rgb() color expression, an image routine can write them into a pixel or palette record, and a design-token build can serialize them for platforms that do not consume HSL directly. For manual work, enter a known color such as hue zero, saturation 100, and lightness 50 to confirm the familiar result of red 255, green zero, and blue zero.
For automation, validate failures separately from successful responses: a missing field, a non-finite number, or any component outside its allowed range is an invalid input and should be corrected rather than retried unchanged. Keep the source HSL values if designers need to make perceptual adjustments later, because this capability performs only the forward conversion and does not infer the original HSL from RGB. Because the output uses integers, it is ready for conventional RGB consumers without an additional rounding policy that could make different applications disagree by one channel value.
What you can do with it
Compile design tokens
Turn HSL brand and theme tokens into integer RGB channels for applications and build outputs that require eight-bit color components.
Prepare graphics values
Convert an HSL choice into red, green, and blue values for canvas code, image tools, charts, palettes, and rendering APIs.
FAQ
What ranges are accepted?
Hue must be from 0 through 360. Saturation and lightness must each be from 0 through 100. All boundaries are inclusive.
Why are the RGB values integers?
The normalized channel results are multiplied by 255 and rounded to support common eight-bit RGB interfaces directly.
Which RGB numbers match hue 210, saturation 80% and lightness 45%?
Red 23, green 115 and blue 207. Each channel is a whole number between 0 and 255, so you can type it straight into a graphics program or an image setting.
What happens if a value is out of range?
It is rejected with a clear message. A negative hue or a percentage above 100 is not wrapped or clipped into a plausible color, so a wrong design value shows up instead of slipping through.
Are hue 0 and hue 360 the same color?
Yes. Both sit at the same red position on the color wheel, so they give the same result. 360 is accepted as the end of the wheel, but anything beyond it is rejected.
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-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"saturation":80,"lightness":45}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"saturation": 80,
"lightness": 45
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"saturation": 80,
"lightness": 45
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"saturation":80,"lightness":45}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"saturation":80,"lightness":45}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"hue": 210,
"saturation": 80,
"lightness": 45
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_rgb",
"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
How the conversion produces RGB channels
The response contains red, green, and blue fields, and every field is guaranteed to be an integer between 0 and 255. This is deterministic arithmetic: it uses no network access, random values, clock, locale, or stored state. Identical inputs therefore produce identical JSON results in a browser, a test suite, or an API integration. The conversion also treats hue 360 as the wheel endpoint equivalent to hue zero while still enforcing the documented closed range.
Using the result reliably
The browser calculation is useful for quick checks, while an API request costs $0.002 when the same transformation belongs in a repeatable pipeline.
Integration use cases
Check color calculations
Create deterministic reference values for documentation, unit tests, migration scripts, and comparisons between color implementations.
Technical questions
What happens when a value is outside its range?
The request fails with an invalid_input error that identifies the component and its valid interval. Values are not wrapped or clipped.
Are hue 0 and hue 360 equivalent?
Yes. Both describe the red endpoint of the hue wheel, and both are valid under the closed 0 to 360 range.
How much does the API conversion cost?
Each successful API request uses the published base price of $0.002. The browser tool can perform the same deterministic calculation locally.