HSL to RGB converter
Turn three HSL numbers into the channels a screen uses: hue 210, saturation 80% and lightness 45% give rgb(23, 115, 207), which is #1773cf in hex, using the same method browsers use for hsl(). 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
- Rgb
- rgb(23, 115, 207)
HSL describes a color by hue on the wheel, saturation as how vivid the color is, and lightness as how close it sits to black or white. Designers and front-end engineers often pick colors in HSL because rotating the hue keeps saturation and lightness steady, yet browsers, canvases, image buffers, and most graphics APIs ultimately need red, green, and blue channels on a zero-to-two-hundred-fifty-five scale. This converter takes three numbers—hue in degrees from zero through three hundred sixty, saturation and lightness as percentages from zero through one hundred—and returns integer RGB channels, a CSS rgb() string, and a lowercase hex code using the same closed-form path browsers use for hsl() in CSS. Hue outside the closed range zero to three hundred sixty is rejected with a clear validation error so bad tokens never silently wrap.
How HSL maps to red, green, and blue
Hue is an angle on the color wheel: zero degrees is pure red, one hundred twenty is pure green, two hundred forty is pure blue, and three hundred sixty closes the circle back at red. Saturation stretches a gray of the chosen lightness toward the fully chromatic color at that hue; zero percent saturation is always achromatic gray, black, or white depending only on lightness. Lightness runs from black at zero percent through the pure mid-tone near fifty percent up to white at one hundred percent.
The conversion algorithm used here follows the CSS Color Module and W3C formulation: scale saturation and lightness into the unit interval, compute intermediate chroma bounds p and q from lightness and saturation, then sample three shifted positions on the unit circle with the classic hue2rgb helper for the red, green, and blue channels. When saturation is zero the three channels collapse to the same lightness-derived gray, which is both a performance shortcut and a numerical stability win.
Each unit-interval channel is multiplied by two hundred fifty-five and rounded to the nearest integer so the result matches eight-bit framebuffer and CSS rgb() expectations. Saturation and lightness must each lie between zero and one hundred percent inclusive, matching the percentages designers type in stylesheets.
What you send and what you get back
Send three finite numbers under the fields h, s, and l. The field h is hue in degrees and is required; it 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.
When hue is outside the legal band the response explains that h must be between zero and three hundred sixty degrees so clients can clamp or fix the token before retrying. Classic checks include pure red as hue zero, saturation one hundred, lightness fifty yielding two hundred fifty-five, zero, zero; mid gray as any hue with saturation zero and lightness fifty yielding one hundred twenty-eight on every channel; and deep greens near hue one hundred twenty with high saturation and modest lightness.
Where HSL to RGB conversion shows up in real work
Design systems store brand ramps and semantic tokens in HSL so product teams can rotate hue for themes while keeping contrast-friendly lightness steps; shipping to CSS custom properties, mobile native colors, and canvas fill styles still requires reliable RGB and hex. Data visualization libraries generate categorical palettes by stepping hue at fixed saturation and lightness, then convert each step to RGB for SVG, WebGL, and charting engines.
Email templates and PDF generators often accept only hex or rgb(), so marketing automation pipelines convert HSL brand specs once and cache the channel triple. Game tools and level editors expose hue wheels to artists and must dump integer RGB into material definitions and texture tints without browser-only APIs. Accessibility workflows compute contrast ratios on RGB or relative luminance; starting from HSL for perceptual lightness adjustments still ends in channel values this converter provides.
Curriculum and bootcamp lessons teach color models side by side and need a single trusted oracle that matches CSS rendering for homework keys. If you later need multi-format conversion across HEX, LAB, and CMYK, reverse RGB to HSL, or WCAG contrast checks, treat those as separate search intents and landings rather than overloading this dedicated HSL to RGB converter page.
What you can do with it
Design tokens to CSS and hex
Convert HSL brand ramps into integer RGB channels and #rrggbb codes for stylesheets, design tokens, and documentation tables that must match browser hsl() rendering.
Palette generators and charts
Step hue at fixed saturation and lightness for categorical palettes, then obtain stable 0–255 RGB for SVG, canvas, and data-visualization libraries.
FAQ
What ranges do hue, saturation, and lightness accept?
Hue h must be between 0 and 360 degrees inclusive. Saturation s and lightness l are percentages from 0 to 100.
Which algorithm converts HSL to RGB?
The CSS / W3C Color Module path: unit-interval saturation and lightness, intermediate p and q, hue2rgb samples for red, green, and blue, then Math.round to 0–255 integers.
Does the response include hex as well as RGB?
Yes. Successful responses include integer r, g, b, a css rgb() string, and a lowercase #rrggbb hex code so you can paste into stylesheets or design tools.
What does it cost?
The browser tool is free and runs locally.
What is hsl(210, 80%, 45%) in RGB?
It is red 23, green 115 and blue 207, written as rgb(23, 115, 207). The same color is also given as the lowercase hex code #1773cf.
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-rgb \
-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-rgb", {
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-rgb",
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-rgb", 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-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
{
"h": 210,
"s": 80,
"l": 45
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_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 HSL maps to red, green, and blue
The 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. Hue must lie in the closed interval from zero to three hundred sixty; values such as negative one or four hundred fail with invalid_input instead of modular wrap-around.
What you send and what you get back
Missing fields, non-numeric strings, NaN, and Infinity fail with invalid_input and are not charged. On success the response echoes the cleaned h, s, and l values, integer channels r, g, and b each from zero through two hundred fifty-five, a printable rgb string of the form rgb(R, G, B), a lowercase hex string of the form #rrggbb, and a short formula note naming the CSS and W3C path. Pricing for successful API calls is the published base of $0.002 per item; validation failures do not consume prepaid balance.
Where HSL to RGB conversion shows up in real work
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 RGB and hex fixtures for mobile themes, email templates, and regression tests with one deterministic API.
Technical questions
What happens if hue is outside 0–360?
The request fails with invalid_input. This converter does not wrap hue modulo 360; fix or clamp the angle before retrying.