Translate intuitive HSL (Hue, Saturation, Lightness) colors into standard RGB values for web development, design systems, and digital graphics with this fast, free online tool.
HSL (Hue, Saturation, Lightness) is a color model designed to be more intuitive for human understanding and manipulation. It represents color using three components visualized as a cylinder:
This model makes it easy to adjust specific aspects: want a lighter blue? Increase Lightness. Want a less intense green? Decrease Saturation. This aligns well with how artists and designers often think about color modification.
RGB (Red, Green, Blue) is the foundational additive color model for digital displays. It works by combining different amounts of red, green, and blue light emitted from screen pixels. Varying the intensity of each primary color channel (typically 0-255) produces the vast spectrum visible on screens.
rgb(255, 0, 0) = Red, rgb(0, 255, 0) = Green, rgb(0, 0, 255) = Blue. Combinations like rgb(255, 255, 0) create Yellow. rgb(0, 0, 0) is Black, rgb(255, 255, 255) is White.While fundamental for screens, directly manipulating RGB values (e.g., wanting a slightly lighter red) can be less intuitive than using HSL.
Converting from the cylindrical HSL model to the cubic RGB model involves mathematical transformations. While the exact formulas can be complex (handling the circular nature of Hue and the relationships between Saturation, Lightness, and the RGB primaries), the core idea is to map the HSL coordinates to their corresponding position within the RGB color space.
This tool handles these calculations instantly, giving you the precise RGB equivalent for any HSL input.
The primary reason is compatibility. While HSL is often preferred during the design and selection phase, the vast majority of digital systems rely on RGB for final output:
color: rgb(64, 191, 191);). While CSS supports hsl() notation, converting to RGB ensures consistency and avoids potential interpretation issues.This converter acts as a crucial bridge, allowing you to leverage the intuitive nature of HSL for design while outputting the universally compatible RGB values needed for implementation.
rgb(R, G, B) (where R, G, B are integers from 0-255), are automatically calculated and shown in the output section.rgb(R, G, B) string will be copied to your clipboard, ready to paste into your CSS, code, or design documents.Implement HSL to RGB conversion directly in your projects with these code snippets:
/**
* Converts HSL color value to RGB.
* Assumes h, s, and l are contained in the set [0, 360], [0, 100], [0, 100] respectively.
* Returns an object {r, g, b} with values in the set [0, 255].
*
* @param Number h The hue
* @param Number s The saturation
* @param Number l The lightness
* @return Object The RGB representation
*/
function hslToRgb(h, s, l) {
s /= 100;
l /= 100;
let c = (1 - Math.abs(2 * l - 1)) * s;
let x = c * (1 - Math.abs((h / 60) % 2 - 1));
let m = l - c / 2;
let r = 0;
let g = 0;
let b = 0;
if (0 <= h && h < 60) {
r = c; g = x; b = 0;
} else if (60 <= h && h < 120) {
r = x; g = c; b = 0;
} else if (120 <= h && h < 180) {
r = 0; g = c; b = x;
} else if (180 <= h && h < 240) {
r = 0; g = x; b = c;
} else if (240 <= h && h < 300) {
r = x; g = 0; b = c;
} else if (300 <= h && h < 360) {
r = c; g = 0; b = x;
}
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
return { r, g, b };
}
// Example Usage:
const rgbResult = hslToRgb(180, 50, 50);
console.log(rgbResult); // Output: { r: 64, g: 191, b: 191 }
console.log(`rgb(${rgbResult.r}, ${rgbResult.g}, ${rgbResult.b})`); // Output: rgb(64, 191, 191)
import math
def hsl_to_rgb(h, s, l):
"""Converts HSL color value to RGB.
Assumes h, s, and l are contained in the set [0, 360], [0, 100], [0, 100] respectively.
Returns a tuple (r, g, b) with values in the set [0, 255]."""
s /= 100.0
l /= 100.0
c = (1 - abs(2 * l - 1)) * s
x = c * (1 - abs((h / 60) % 2 - 1))
m = l - c / 2
r, g, b = 0, 0, 0
if 0 <= h < 60:
r, g, b = c, x, 0
elif 60 <= h < 120:
r, g, b = x, c, 0
elif 120 <= h < 180:
r, g, b = 0, c, x
elif 180 <= h < 240:
r, g, b = 0, x, c
elif 240 <= h < 300:
r, g, b = x, 0, c
elif 300 <= h < 360:
r, g, b = c, 0, x
r = round((r + m) * 255)
g = round((g + m) * 255)
b = round((b + m) * 255)
return r, g, b
# Example Usage:
r_val, g_val, b_val = hsl_to_rgb(180, 50, 50)
print(f"rgb({r_val}, {g_val}, {b_val})") # Output: rgb(64, 191, 191)
Integrate this converter into your own website, blog, or documentation easily using the iframe code below. It adapts to the container width.
<iframe
src="https://rgbatohex.com/tools/hsl-to-rgb-converter?embed=true"
width="100%"
height="400"
style="border:1px solid #ccc; border-radius:8px; overflow:hidden;"
title="HSL to RGB Converter Tool"
></iframe>Pre-load the converter with a specific HSL color by adding h, s, and l parameters to the src URL (Hue: 0-360, Saturation: 0-100, Lightness: 0-100). Example below sets initial HSL(210, 70%, 60%):
<iframe
src="https://rgbatohex.com/tools/hsl-to-rgb-converter?embed=true&h=210&s=70&l=60"
width="100%"
height="400"
style="border:1px solid #ccc; border-radius:8px; overflow:hidden;"
title="HSL to RGB Converter Tool (Custom Initial Color)"
></iframe>HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) are similar cylindrical models. The primary difference is the vertical axis: HSL's Lightness ranges from black (0%) to the pure hue (50%) to white (100%). HSV/HSB's Value/Brightness ranges from black (0%) to the pure hue (100%). This means 100% Lightness is always white, while 100% Value/Brightness is the fully saturated, bright hue itself. HSL can be more intuitive for simply making a color lighter or darker.
The mathematical conversion is precise. However, RGB values are stored as integers (0-255), while HSL calculations involve floating-point numbers. Rounding during the final scaling step means that converting HSL -> RGB -> HSL might result in tiny differences (often less than 1 unit). For all practical web and screen design purposes, the conversion is considered highly accurate and visually identical.
No, this tool specifically converts opaque HSL colors to opaque RGB colors. For colors with transparency, you would typically use the HSLA (HSL + Alpha) or RGBA (RGB + Alpha) models. Look for dedicated HSLA/RGBA converters if you need alpha channel support.
This page focuses solely on HSL → RGB. We offer a separate, dedicated RGB to HSL Converter tool for the reverse conversion.
Hue (H): 0 to 360 degrees (values outside this range will typically wrap around, e.g., 370° is treated as 10°).
Saturation (S): 0% to 100%.
Lightness (L): 0% to 100%.
Use the interactive tool above to get instant RGB values, explore the HSL color space, or grab the code examples to integrate this conversion into your own applications. Bookmark this page for quick access!
Go to Full HSL to RGB Tool