RGB to HSL Converter – Free, Instant & Accurate

Convert RGB to HSL in One Click

Type in any RGB colour value and get its HSL equivalent instantly – no install, no sign-up, and nothing leaves your browser. The tool also shows you a live colour swatch plus the same colour expressed in HEX, HSV, and CMYK, so you can grab whichever format you need.

Everything runs locally on your device. Your colour values are never uploaded to a server, which is useful when you're working with brand colours or client palettes you'd rather keep private.

How to Use the RGB to HSL Tool

1. Enter your RGB values – type the Red, Green, and Blue numbers (each between 0 and 255) into the input fields above.
2. Read the HSL output – the Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) values update immediately.
3. Check the live swatch – confirm the colour looks right before you copy.
4. Copy the result – click the copy button next to the HSL value to grab it for your code or design file.

Worked Example: RGB to HSL Conversion

Say you have the vivid orange used in many warning UI components: rgb(255, 140, 0).

So rgb(255, 140, 0) becomes hsl(33, 100%, 50%). The hue of 33° places it firmly in the orange slice of the colour wheel, 100% saturation means it is a pure, vivid tone, and 50% lightness is right in the middle – neither washed out nor darkened.

What do those HSL channels actually mean? Hue is the angle on the colour wheel (0° = red, 120° = green, 240° = blue). Saturation is how vivid the colour is – 0% is grey, 100% is the purest possible tone. Lightness is brightness – 0% is black, 100% is white, 50% is the full colour.

How to Convert RGB to HSL in Code

If you need to do this conversion programmatically rather than by hand, here are minimal, copy-pasteable snippets for the two most common languages.

JavaScript

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

console.log(rgbToHsl(255, 140, 0)); // [33, 100, 50]

Python

import colorsys

def rgb_to_hsl(r, g, b):
    h, l, s = colorsys.rgb_hls_to_hls(r / 255, g / 255, b / 255)
    # colorsys uses rgb_to_hls (note the HLS order)
    h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
    return round(h * 360), round(s * 100), round(l * 100)

print(rgb_to_hsl(255, 140, 0))  # (33, 100, 50)

The Python standard library's colorsys.rgb_to_hls() function returns channels in HLS order (Hue, Lightness, Saturation), so swap the last two values to get the conventional HSL order.

How the Conversion Works

The maths normalises each RGB channel to a 0–1 scale, then finds the highest (max) and lowest (min) of the three values. Lightness is simply the average of max and min. Saturation depends on lightness – the formula adjusts slightly above and below the 50% midpoint to keep colours perceptually consistent. Hue is calculated from whichever channel is the dominant (max) one, turning the result into a 0–360° angle.

The algorithm is defined in the W3C CSS Color Level 4 specification, which is the authoritative reference for how browsers handle colour conversions. MDN also documents the hsl() CSS function with worked examples.

When to Use HSL (and When to Stick with RGB)

Use HSL when you need to adjust a colour programmatically – for example, making a button 20% lighter or generating a palette of shades by stepping the lightness value. CSS hsl() makes this trivial and human-readable.

Stick with RGB when you are working with image processing libraries, WebGL shaders, or canvas APIs, which typically expect 0–255 integer channels. Also use RGB when you already have pixel data from a camera or scanner – converting to HSL and back can introduce small rounding errors.

• Tinting and shading → HSL wins (just change L)
• Colour-matching across screen and print → consider CMYK or a calibrated colour space instead
• Accessibility contrast checks → use relative luminance (WCAG formula), not HSL lightness

Paste your RGB value into the tool above and the hsl() string is ready to drop straight into your CSS. Simple as that.