HSL to RGB Converter
Convert HSL (Hue, Saturation, Lightness) colors to RGB (Red, Green, Blue) values. RGB is the fundamental color model for digital displays and is widely supported across programming languages and design tools.
Why Convert HSL to RGB?
| Scenario | Reason |
|---|---|
| Programming | Many APIs expect RGB values |
| Canvas/Graphics | Drawing APIs often use RGB |
| Color calculations | RGB math is straightforward |
| Legacy code | Older systems only support RGB |
HSL to RGB Examples
| Color | HSL | RGB |
|---|---|---|
| Red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| Cyan | hsl(180, 100%, 50%) | rgb(0, 255, 255) |
| Orange | hsl(30, 100%, 50%) | rgb(255, 128, 0) |
| Lavender | hsl(240, 67%, 94%) | rgb(230, 230, 250) |
Conversion Algorithm
The HSL to RGB conversion involves: 1. If S = 0, color is grayscale: R = G = B = L 2. Otherwise, calculate based on hue sector (0-60°, 60-120°, etc.) 3. Apply saturation and lightness adjustments
Using RGB in Code
``javascript
// After conversion from HSL
const color = {
r: 255,
g: 128,
b: 64
};
// Use in canvas
ctx.fillStyle = rgb(${color.r}, ${color.g}, ${color.b});
``
Use this converter when working with systems that require RGB color values.