HSL to RGB Converter

Convert HSL to RGB Color Online

Converting hsl to rgb is a key step when translating human-friendly color definitions into the format that screens and rendering engines use natively. HSL lets you think about color in terms of hue, saturation, and lightness, but when it comes time to render pixels, RGB is the underlying model. Our free hsl to rgb color converter instantly produces accurate red, green, and blue channel values from any HSL input.

Understanding HSL Color Values

HSL is a cylindrical color model that organizes color around three intuitive axes. Hue is the color itself, expressed as an angle from 0 to 360 degrees on the color wheel. Red sits at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240, and magenta at 300. The wheel is continuous, so 360 degrees wraps back to red.

Saturation controls the vividness of the color, ranging from 0 percent (completely gray) to 100 percent (fully vivid). A highly saturated color appears rich and intense, while a low-saturation color looks washed out or muted. Lightness determines how bright or dark the color is, also on a 0 to 100 percent scale. At 0 percent lightness every color is black, at 100 percent every color is white, and at 50 percent you see the truest expression of the hue.

Designers and developers favor HSL because it maps directly to how people describe color adjustments. Phrases like "make it darker" or "tone it down" correspond to simple numeric changes in lightness or saturation. This directness makes HSL the preferred model for design tokens, CSS custom properties, and algorithmic palette generation in modern web applications.

Understanding RGB Color Values

RGB stands for Red, Green, and Blue, the three primary colors of light used by digital displays to produce the full visible color spectrum. Each channel accepts an integer value from 0 to 255, where 0 means no light from that channel and 255 means maximum intensity. By combining these three channels at different levels, screens can reproduce over 16.7 million distinct colors.

The RGB model is additive, meaning that light from each channel combines to produce brighter colors. When all three channels are at maximum (255, 255, 255), the result is white. When all are at zero (0, 0, 0), the result is black. Equal values across all channels produce neutral grays. Unequal values produce chromatic colors: rgb(255, 0, 0) is pure red, rgb(0, 255, 0) is pure green, and rgb(0, 0, 255) is pure blue.

RGB is the native color model for virtually all screen-based technologies, including web browsers, operating systems, image formats, and video codecs. While HSL is more intuitive for human color selection, RGB is what the hardware ultimately needs. This is why converting from HSL to RGB is a necessary step when implementing colors that were designed or specified in the HSL model. For converting RGB values to the compact hex notation commonly used in CSS, our RGB to hex color converter is a useful next step.

How the Conversion Works

The conversion from hsl to rgb involves mapping the cylindrical HSL color space back to the linear, additive RGB color space. The algorithm determines how much of each primary light color is needed to reproduce the hue, saturation, and lightness specified by the HSL values. This process uses chroma, an intermediate value representing colorfulness, along with the hue sector to assign initial channel values before adjusting for lightness.

Understanding this conversion is valuable when working across color models. If you need to go the other direction, our RGB to HSL color converter handles that transformation. You may also find it useful to convert HSL directly to hex codes for CSS using the HSL to hex conversion tool, which combines the HSL-to-RGB and RGB-to-hex steps into a single operation.

Conversion Formula

The HSL to RGB conversion follows these mathematical steps:

Step 1: Normalize the inputs. Express saturation and lightness as decimals between 0 and 1. Keep hue in degrees (0 to 360). For example, hsl(120, 100%, 25%) becomes H = 120, S = 1.0, L = 0.25.

Step 2: Calculate chroma. Chroma represents the colorfulness of the result. C = (1 - |2L - 1|) x S. For our example: C = (1 - |2 x 0.25 - 1|) x 1.0 = (1 - |-0.5|) x 1.0 = (1 - 0.5) x 1.0 = 0.5.

Step 3: Calculate the intermediate value X. X = C x (1 - |H/60 mod 2 - 1|). With H = 120: H/60 = 2.0, so 2.0 mod 2 = 0, and X = 0.5 x (1 - |0 - 1|) = 0.5 x (1 - 1) = 0.

Step 4: Determine initial RGB values based on hue sector. The color wheel is divided into six 60-degree sectors. Since H = 120 falls in the sector from 120 to 180 degrees, the assignment is R1 = 0, G1 = C = 0.5, B1 = X = 0.

Step 5: Add the lightness match value. Calculate m = L - C/2 = 0.25 - 0.25 = 0. Then R = R1 + m = 0, G = G1 + m = 0.5, B = B1 + m = 0.

Step 6: Scale to 0-255 range. Multiply each channel by 255 and round to the nearest integer. R = 0, G = 128, B = 0. The final result is rgb(0, 128, 0), which is the standard CSS named color green.

Practical Applications

Rendering Engine Integration: Graphics libraries, game engines, and image processing tools typically operate in RGB or closely related color spaces. When designers specify colors in HSL for readability and maintainability, the rendering pipeline must convert those values to RGB before the color can be displayed on screen. This conversion happens constantly behind the scenes in web browsers when CSS hsl() values are painted to pixels.

Image Processing and Manipulation: Photo editing applications and image filters often work in HSL for operations like adjusting color balance, enhancing saturation, or shifting hues. After these adjustments are made, the modified HSL values must be converted back to RGB for storage in standard image formats like PNG, JPEG, and WebP, all of which store pixel data in RGB or related color spaces.

LED and Hardware Color Control: Programmable LED strips, smart lighting systems, and embedded displays typically accept RGB values as input. Developers building lighting control applications may design their color interfaces using HSL for user-friendliness, with color pickers based on hue wheels and saturation sliders. The selected HSL values are then converted to RGB before being sent to the hardware controller.

Data Visualization Color Mapping: When mapping data values to colors in charts and heatmaps, it is common to interpolate through HSL space because it produces more perceptually uniform gradients than interpolating in RGB. After computing the interpolated HSL color for each data point, the value must be converted to RGB for rendering in the browser or graphics context. For hands-on color exploration, our visual color picker tool lets you see these conversions in real time.

HSL to RGB Reference Table

Color Name	HSL Value	RGB Value
Red	hsl(0, 100%, 50%)	rgb(255, 0, 0)
Orange	hsl(30, 100%, 50%)	rgb(255, 128, 0)
Yellow	hsl(60, 100%, 50%)	rgb(255, 255, 0)
Lime	hsl(120, 100%, 50%)	rgb(0, 255, 0)
Green	hsl(120, 100%, 25%)	rgb(0, 128, 0)
Cyan	hsl(180, 100%, 50%)	rgb(0, 255, 255)
Blue	hsl(240, 100%, 50%)	rgb(0, 0, 255)
Magenta	hsl(300, 100%, 50%)	rgb(255, 0, 255)
Teal	hsl(180, 100%, 25%)	rgb(0, 128, 128)
Navy	hsl(240, 100%, 25%)	rgb(0, 0, 128)
Coral	hsl(16, 100%, 66%)	rgb(255, 127, 80)
Gold	hsl(51, 100%, 50%)	rgb(255, 215, 0)
Tomato	hsl(9, 100%, 64%)	rgb(255, 99, 71)
Steel Blue	hsl(207, 44%, 49%)	rgb(70, 130, 180)
Salmon	hsl(6, 93%, 71%)	rgb(250, 128, 114)
Olive	hsl(60, 100%, 25%)	rgb(128, 128, 0)
Purple	hsl(300, 100%, 25%)	rgb(128, 0, 128)
Silver	hsl(0, 0%, 75%)	rgb(192, 192, 192)
White	hsl(0, 0%, 100%)	rgb(255, 255, 255)
Black	hsl(0, 0%, 0%)	rgb(0, 0, 0)

Frequently Asked Questions

Why do I need to convert HSL to RGB?

While CSS supports hsl() natively, many other technologies require RGB values. Image processing libraries, game engines, LED controllers, and most graphics APIs work exclusively with RGB. Additionally, some older email clients and legacy web systems only understand RGB or hex color codes. Converting HSL to RGB ensures your colors are compatible with the widest range of tools and platforms.

Does the HSL to RGB conversion lose any color information?

The conversion is mathematically reversible, so no color information is lost in theory. Both HSL and RGB represent the same 24-bit color space of 16,777,216 colors. In practice, minor rounding may occur when converting between the continuous HSL values and the discrete 0-to-255 integer range of RGB, but these differences are imperceptible to the human eye and have no meaningful impact on the displayed color.

What RGB value does pure white in HSL produce?

Pure white in HSL is hsl(0, 0%, 100%), and it converts to rgb(255, 255, 255). At 100 percent lightness, the hue and saturation values become irrelevant because the color is fully lightened to white. This means hsl(0, 0%, 100%), hsl(120, 50%, 100%), and hsl(240, 100%, 100%) all produce the same result: rgb(255, 255, 255). The lightness value completely overrides the other components at the extremes of 0 percent and 100 percent.

How does the hue sector affect the RGB output?

The color wheel is divided into six 60-degree sectors, and the hue value determines which sector the color falls in. Each sector has a different mapping of the chroma and intermediate values to the red, green, and blue channels. For hues between 0 and 60 degrees, red is dominant. Between 60 and 120, green rises to match red. Between 120 and 180, green is dominant. Between 180 and 240, blue rises. Between 240 and 300, blue is dominant. Between 300 and 360, red rises again. This sectored approach is what creates the smooth color transitions around the wheel.

What happens when saturation is zero in HSL?

When saturation is 0 percent, the color has no chromatic content and the result is a shade of gray. The hue value becomes meaningless because there is no color to orient on the wheel. The RGB output will have equal values across all three channels, determined solely by the lightness. For example, hsl(0, 0%, 50%) converts to rgb(128, 128, 128), and hsl(200, 0%, 50%) also converts to rgb(128, 128, 128). The lightness directly maps to the gray level.

Can I convert HSLA to RGBA using this method?

Yes, the alpha (transparency) channel passes through unchanged. If you have hsla(210, 70%, 50%, 0.8), you convert the HSL portion to RGB using the standard formula, then append the same alpha value to get rgba(38, 119, 217, 0.8). The alpha component is independent of the color conversion and simply controls how opaque or transparent the color appears when rendered on screen.

Is HSL to RGB conversion the same as HSV to RGB?

No, HSL and HSV (also called HSB) are different color models that produce different RGB results for the same numeric inputs. HSL uses lightness, where 50 percent gives the purest color and 100 percent gives white. HSV uses value (brightness), where 100 percent gives the brightest version of the color but you cannot reach white without also reducing saturation. The conversion formulas are different, so make sure you know which model your source values use before converting to RGB.

How do I implement HSL to RGB conversion in JavaScript?

In JavaScript, you can implement the conversion by first calculating chroma, the intermediate X value, and the lightness match m, then assigning RGB channels based on the hue sector. Many libraries like chroma.js and color.js provide this conversion built in. If you are working in CSS, the browser handles the conversion automatically when you use hsl() values, so no manual JavaScript conversion is needed for styling purposes. The manual conversion is primarily useful for canvas drawing, WebGL shaders, and data processing scenarios.

What is the relationship between HSL lightness and RGB brightness?

HSL lightness and perceived brightness are related but not identical. HSL lightness is a mathematical average of the minimum and maximum RGB channel values, which provides a reasonable approximation of perceived brightness but does not account for the fact that human eyes are more sensitive to green light than red or blue. For perceptually accurate brightness calculations, you would need to use luminance formulas that weight the RGB channels differently, such as the relative luminance formula used in WCAG contrast calculations: L = 0.2126R + 0.7152G + 0.0722B.