Tool
What the RGB to HSL Converter does
RGB to HSL Converter: converts HSL from Red, Green and Blue. Example: red 37, green 99 and blue 235 gives HSL hsl(221, 83%, 53%).
HSL, derived from Red, Green and Blue. Edit a field and the answer updates in place.
Typical users are designers matching a brand colour. A value copied by eye is a value that will be slightly wrong.
There is no back end here. The calculation runs where you are sitting, not on a server somewhere.
If you want to check the arithmetic, the field table, the method and a worked example are further down.
What do the RGB to HSL Converter fields mean?
The RGB to HSL Converter uses 3 inputs. You can work from the defaults, or clear them and start fresh, both work.
| Field | What to enter | Default |
|---|---|---|
| Red | accepts 0 to 255 | 37 |
| Green | accepts 0 to 255 | 99 |
| Blue | accepts 0 to 255 | 235 |
How does the RGB to HSL Converter work?
Each output is derived from the inputs above in a single pass; there is no hidden state carried between runs, so the same inputs always give the same conversion.
Nothing is computed until the inputs pass their checks, so you will not get a confident answer built on a typo.
Worked example
These are the values the RGB to HSL Converter loads by default, and the result it produces from them. Here is the calculation as it stands the moment the page loads.
| Red | 37 |
|---|---|
| Green | 99 |
| Blue | 235 |
| HSL | hsl(221, 83%, 53%) |
|---|
How to use it
- Fill in Red (0 to 255).
- Type Green (0 to 255).
- Enter Blue (0 to 255).
- Watch the results panel as you type: it recalculates on every keystroke.
- The panel reports HSL.
- Copy Link is the quickest way to send the exact scenario to someone else.
What this tool does not do
- Conversions between colour spaces with different gamuts are approximate at the edges.
- Colours render differently across displays; the values are exact but the appearance is not guaranteed.
- The method is fixed. There is no option to substitute your own formula.
- The tool cannot tell whether a number was entered in the unit you intended, so double-check the labels.
Frequently asked questions
Just Red, Green and Blue. Nothing starts empty, letting you treat it as a what-if tool rather than a data-entry form.
Red accepts 0 to 255. If a value falls outside, the tool says which field is at fault instead of guessing.
With the values loaded when the page opens, HSL comes out as hsl(221, 83%, 53%). Any edit re-runs the calculation, so there is no stale number on screen.
Nothing is stored. The page has no back end to send data to, and holds your input only in memory.
Nothing at all. There is no registration, no paywall and no per-use quota.
The output is deterministic. The same inputs always give the same answer, and the method is documented above so you can check it.