HSL to RGB Converter

Convert HSL (hue, saturation, lightness) values to RGB channel integers instantly. Essential for canvas drawing, WebGL, data visualization and any API that expects RGB triplets.

Format: hue (0–360), saturation (0–100), lightness (0–100). Example: 215, 84, 51

Converted Values

HEX#155EEF
RGBrgb(21, 94, 239)
HSLhsl(215, 84%, 51%)
HSVhsv(215, 84%, 94%)
CMYKcmyk(91%, 61%, 0%, 6%)

What Is HSL to RGB Conversion?

HSL to RGB conversion turns hue-saturation-lightness coordinates into three integer channel values (0–255). HSL is intuitive for humans; RGB is what graphics APIs and devices actually consume. This conversion is the bridge between designing a palette in HSL and using those colors in canvas, WebGL or chart libraries that require RGB or normalized RGB.

How HSL to RGB Works

hsl(215, 84%, 51%)

Normalize: H=215/360=0.597, S=0.84, L=0.51

Use the HSL-to-RGB hue-sector formula:
  q = L < 0.5 ? L × (1+S) : L + S - L×S = 0.583
  p = 2L - q = 0.437

  R = hue2rgb(p, q, H + 1/3) = 0.082 → 21
  G = hue2rgb(p, q, H)       = 0.369 → 94
  B = hue2rgb(p, q, H - 1/3) = 0.937 → 239

Result: rgb(21, 94, 239)

Example Conversions

  • hsl(0, 100%, 50%) → rgb(255, 0, 0) — red
  • hsl(120, 100%, 25%) → rgb(0, 128, 0) — green
  • hsl(240, 100%, 50%) → rgb(0, 0, 255) — blue
  • hsl(215, 84%, 51%) → rgb(21, 94, 239) — OmniColor blue

When to Use HSL to RGB

  • Canvas API: ctx.fillStyle = 'rgb(21, 94, 239)' works reliably; HSL is supported but RGB is more predictable in complex canvas pipelines.
  • WebGL and Three.js: Requires normalized RGB (0–1), so RGB values are just divided by 255.
  • Data visualization: Chart libraries usually accept RGB or arrays of three integer channels.
  • Animation: Interpolating RGB values produces smooth color transitions.

Frequently Asked Questions