HSL
HSL describes a color by hue (0–360°), saturation (0–100%), and lightness (0–100%). It is the format CSS recommends for human-readable palettes because nudging the hue keeps the same lightness, unlike RGB where every channel matters.
HSL to RGB Color Converter
hsl(16, 100%, 60%) = rgb(255, 107, 53)
Convert HSL color values to RGB color values exactly, via the canonical 8-bit sRGB representation. Every result you see is the same number the W3C CSS spec would produce — no proprietary adjustments, no perceptual fudging. Try the live converter below, or scan the reference table for twenty-five named colors and their HSL ↔ RGB pairs.
hsl(H, S%, L%) with hue 0–360, saturation and lightness 0–100
rgb(R, G, B) or just R, G, B with each value 0–255
Preview
#FF6933
Try
How to convert HSL color to RGB color
Paste or type your color
Enter the HSL color above. Convertitive accepts hsl(h, s%, l%) with hue 0–360, saturation and lightness 0–100.
Read the RGB value
The result appears the moment your input parses. For example, hsl(16, 100%, 60%) (Convertitive's coral accent) becomes rgb(255, 107, 53).
Copy and share
Click the copy button to grab the result. The preview swatch lives-updates so you can sanity-check the conversion at a glance.
HSL to RGB reference table
Twenty-five well-known colors with their HSL and RGBrepresentations side by side. The swatches are rendered directly from the computed RGB, so what you see is exactly what you will ship.
| Name | HSL | RGB | |
|---|---|---|---|
| Black | hsl(0, 0%, 0%) | rgb(0, 0, 0) | |
| White | hsl(0, 0%, 100%) | rgb(255, 255, 255) | |
| Red | hsl(0, 100%, 50%) | rgb(255, 0, 0) | |
| Lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) | |
| Blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) | |
| Yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) | |
| Cyan | hsl(180, 100%, 50%) | rgb(0, 255, 255) | |
| Magenta | hsl(300, 100%, 50%) | rgb(255, 0, 255) | |
| Silver | hsl(0, 0%, 75%) | rgb(192, 192, 192) | |
| Gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) | |
| Maroon | hsl(0, 100%, 25%) | rgb(128, 0, 0) | |
| Olive | hsl(60, 100%, 25%) | rgb(128, 128, 0) | |
| Green | hsl(120, 100%, 25%) | rgb(0, 128, 0) | |
| Teal | hsl(180, 100%, 25%) | rgb(0, 128, 128) | |
| Navy | hsl(240, 100%, 25%) | rgb(0, 0, 128) | |
| Purple | hsl(300, 100%, 25%) | rgb(128, 0, 128) | |
| Orange | hsl(39, 100%, 50%) | rgb(255, 165, 0) | |
| Pink | hsl(350, 100%, 88%) | rgb(255, 192, 203) | |
| Gold | hsl(51, 100%, 50%) | rgb(255, 215, 0) | |
| Tomato | hsl(9, 100%, 64%) | rgb(255, 99, 71) | |
| Coral | hsl(16, 100%, 66%) | rgb(255, 127, 80) | |
| Salmon | hsl(6, 93%, 71%) | rgb(250, 128, 114) | |
| Indigo | hsl(275, 100%, 25%) | rgb(75, 0, 130) | |
| Chocolate | hsl(25, 75%, 47%) | rgb(210, 105, 30) | |
| Crimson | hsl(348, 83%, 47%) | rgb(220, 20, 60) |
Frequently asked questions
- How do I convert HSL color to RGB color?
- Paste your HSL value into the input above. Convertitive parses it, maps it through 8-bit sRGB, and re-emits it in RGB. For example, hsl(16, 100%, 60%) becomes rgb(255, 107, 53).
- What is the exact RGB value of hsl(16, 100%, 60%)?
- hsl(16, 100%, 60%) in HSL equals rgb(255, 107, 53) in RGB.
- Why might my HSL → RGB round-trip produce a slightly different value?
- HSL and HSV store hue/saturation/lightness as rounded percentages, which costs about ±0.5% of perceived saturation on extreme values. For most UI work the difference is invisible.
- Does this support transparency or alpha?
- Not yet. The current version handles fully opaque colors only. RGBA/HSLA inputs are silently ignored beyond the first three channels. Alpha support is on the roadmap.
- Are color names supported?
- Not directly as input — but the reference table on every page shows twenty-five common CSS named colors with their HSL and RGB equivalents. Copy the value you want into the calculator above.
- Why does the swatch sometimes look wrong on my screen?
- Browsers handle color profiles differently. On most modern displays the rendered swatch matches the stored sRGB exactly. On wide-gamut displays without an active sRGB profile, very saturated colors may render slightly more vivid than the math implies.
- Can I use these results in CSS directly?
- Yes. Every output above is a valid CSS color expression. HEX values include the # prefix; RGB/HSL/HSV outputs are in the standard function form CSS accepts.
- Are the conversions WCAG-accurate?
- The conversions are mathematically exact within IEEE 754 double precision. WCAG contrast ratios require an additional sRGB-to-linear-luminance step that is not part of HEX/RGB/HSL/HSV conversions — Convertitive will ship a dedicated contrast checker later.
About HSL and RGB
RGB
RGB describes a color by its red, green, and blue channels — each on a 0–255 scale (8 bits per channel). It is what computer monitors and most digital cameras emit, and what every other web color format ultimately maps to.