RGB to HSL Color Converter

Understanding RGB and HSL Color Spaces

RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) are two different ways to represent colors in digital systems. While RGB is based on color addition of light, HSL provides a more intuitive way to describe colors:

RGB to HSL Conversion Formula and Algorithm

The RGB to HSL conversion process involves several mathematical steps to transform RGB color values into the HSL color space. This conversion preserves the color while representing it in a more intuitive format:

// Step 1: Normalize RGB values to [0, 1]
R' = R/255, G' = G/255, B' = B/255

// Step 2: Find maximum and minimum values
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin

// Step 3: Calculate Hue (H)
H = 60° × {
  undefined,  if Δ = 0
  (G'-B')/Δ mod 6,  if Cmax = R'
  (B'-R')/Δ + 2,   if Cmax = G'
  (R'-G')/Δ + 4,   if Cmax = B'
}

// Step 4: Calculate Saturation (S)
S = Δ/(1 - |2L - 1|)  // where L is Lightness

// Step 5: Calculate Lightness (L)
L = (Cmax + Cmin)/2

// Final Results
H = H × 360° (degrees)
S = S × 100%
L = L × 100%

This formula ensures accurate color conversion while maintaining color fidelity across different color spaces.

JavaScript Implementation

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

  if (max === min) {
    h = s = 0;
  } 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); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }

  return [
    Math.round(h * 360),
    Math.round(s * 100),
    Math.round(l * 100)
  ];
}

Python Implementation

def rgb_to_hsl(r, g, b):
    r, g, b = r/255, g/255, b/255
    
    max_val = max(r, g, b)
    min_val = min(r, g, b)
    h = s = l = (max_val + min_val) / 2
    
    if max_val == min_val:
        h = s = 0
    else:
        d = max_val - min_val
        s = d / (2 - max_val - min_val) if l > 0.5 else d / (max_val + min_val)
        
        if max_val == r:
            h = (g - b) / d + (6 if g < b else 0)
        elif max_val == g:
            h = (b - r) / d + 2
        elif max_val == b:
            h = (r - g) / d + 4
        h /= 6
    
    return [
        round(h * 360),
        round(s * 100),
        round(l * 100)
    ]