DevTilt

HSL to RGB Converter

Turn HSL into RGB for tools that expect channel integers. Negative hue wraps modulo 360°.

Hue wraps past 360°. Saturation and lightness are 0–100%.

Result

Enter HSL values to get rgb() output.

How to convert HSL to RGB

  1. Paste hsl(h, s%, l%) or comma-separated hue, saturation, and lightness.
  2. rgb() and R/G/B channels update live.
  3. Copy the rgb() string.
  4. Hue wraps modulo 360°; saturation and lightness must be 0–100%.

What is HSL to RGB Converter?

CSS hsl() values are intuitive to edit but many graphics APIs, canvas contexts, and image libraries require RGB integers. Enter hue, saturation, and lightness to get the exact R, G, B values — useful when bridging CSS color math to JavaScript rendering code.

Why use DevTilt's HSL to RGB Converter?

  • Accepts H (0–360), S and L (0–100%)
  • Outputs R, G, B as integers 0–255
  • Live preview with both HSL and RGB readouts
  • Copy as rgb() CSS or comma-separated integers

Common use cases

  • Converting an HSL theme variable to RGB for a canvas draw call
  • Translating CSS hsl() colors to a charting library config
  • Computing RGB from HSL for an image processing pipeline
  • Debugging HSL-to-RGB rounding in a color animation

FAQ

Hue wraps modulo 360° (e.g. 390° becomes 30°).
Yes. Both must be between 0% and 100% or you get a specific error.
No. Conversion stays in your browser.
Values outside 0–100% return a field-level error. Percent signs are optional in some inputs but the numeric range is enforced.
Yes. Low saturation colors convert correctly — hue is ignored when saturation is 0% because the color is achromatic.