The following RGB to HSL JavaScript code implements the conversion algorithm. This RGB to HSL JS function can be used in any web application:

// RGB to HSL Converter in JavaScript
function rgbToHsl(r, g, b) {
  // Make sure r, g, and b are in the range 0-255
  r = Math.max(0, Math.min(255, r)) / 255;
  g = Math.max(0, Math.min(255, g)) / 255;
  b = Math.max(0, Math.min(255, b)) / 255;
  
  // Find greatest and smallest values
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  
  // Calculate lightness
  let h, s, l = (max + min) / 2;
  
  // If max and min are the same, hue and saturation are 0
  if (max === min) {
    h = s = 0; // achromatic (gray)
  } else {
    // Calculate saturation
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    // Calculate hue
    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;
    }
    
    // Convert hue to degrees
    h /= 6;
  }
  
  // Convert to standard HSL format
  h = Math.round(h * 360);
  s = Math.round(s * 100);
  l = Math.round(l * 100);
  
  return { h, s, l };
}

// Usage examples
console.log(rgbToHsl(255, 0, 0));    // { h: 0, s: 100, l: 50 } (Red)
console.log(rgbToHsl(0, 255, 0));    // { h: 120, s: 100, l: 50 } (Green)
console.log(rgbToHsl(0, 0, 255));    // { h: 240, s: 100, l: 50 } (Blue)
console.log(rgbToHsl(255, 255, 0));  // { h: 60, s: 100, l: 50 } (Yellow)

Here's how to implement the RGB to HSL conversion in Python. This RGB to HSL Python function handles all edge cases correctly:

def rgb_to_hsl(r, g, b):
    """
    Convert RGB color values to HSL.
    
    Parameters:
    r, g, b (int): RGB values in the range 0-255
    
    Returns:
    tuple: (h, s, l) values where h is in degrees (0-360) and s, l are percentages (0-100)
    """
    # Normalize RGB values to 0-1 range
    r, g, b = r / 255.0, g / 255.0, b / 255.0
    
    # Find max and min values
    cmax = max(r, g, b)
    cmin = min(r, g, b)
    delta = cmax - cmin
    
    # Calculate lightness
    l = (cmax + cmin) / 2.0
    
    # Calculate saturation
    s = 0
    if delta != 0:
        if l < 0.5:
            s = delta / (cmax + cmin)
        else:
            s = delta / (2.0 - cmax - cmin)
    
    # Calculate hue
    h = 0
    if delta != 0:
        if cmax == r:
            h = ((g - b) / delta) % 6
        elif cmax == g:
            h = (b - r) / delta + 2
        else:  # cmax == b
            h = (r - g) / delta + 4
        
        h *= 60  # Convert to degrees
        
        # Make sure hue is positive
        if h < 0:
            h += 360
    
    # Round and convert s and l to percentages
    h = round(h)
    s = round(s * 100)
    l = round(l * 100)
    
    return (h, s, l)

# Usage examples
print(rgb_to_hsl(255, 0, 0))     # (0, 100, 50) - Red
print(rgb_to_hsl(0, 255, 0))     # (120, 100, 50) - Green
print(rgb_to_hsl(0, 0, 255))     # (240, 100, 50) - Blue
print(rgb_to_hsl(255, 255, 0))   # (60, 100, 50) - Yellow
print(rgb_to_hsl(128, 128, 128)) # (0, 0, 50) - Gray

In RGB to HSL CSS implementation, you can use both color formats directly. Using RGB to HSL in CSS provides more intuitive color control:

/* RGB to HSL color examples in CSS */

/* Color variables using both RGB and HSL */
:root {
  /* Primary colors */
  --red-rgb: 255, 0, 0;
  --red-hsl: 0, 100%, 50%;
  
  --green-rgb: 0, 255, 0;
  --green-hsl: 120, 100%, 50%;
  
  --blue-rgb: 0, 0, 255;
  --blue-hsl: 240, 100%, 50%;
  
  /* Secondary colors */
  --yellow-rgb: 255, 255, 0;
  --yellow-hsl: 60, 100%, 50%;
  
  --cyan-rgb: 0, 255, 255;
  --cyan-hsl: 180, 100%, 50%;
  
  --magenta-rgb: 255, 0, 255;
  --magenta-hsl: 300, 100%, 50%;
}

/* Using RGB values */
.rgb-example {
  /* Direct RGB usage */
  color: rgb(255, 0, 0);
  background-color: rgb(0, 0, 255);
  
  /* Using CSS variables */
  color: rgb(var(--red-rgb));
  border-color: rgb(var(--green-rgb));
}

/* Using HSL values - more intuitive for adjustments */
.hsl-example {
  /* Direct HSL usage */
  color: hsl(0, 100%, 50%);
  background-color: hsl(240, 100%, 50%);
  
  /* Using CSS variables */
  color: hsl(var(--red-hsl));
  border-color: hsl(var(--green-hsl));
  
  /* HSL makes it easy to adjust lightness */
  background-color: hsl(240, 100%, 80%); /* Lighter blue */
  border-color: hsl(120, 100%, 30%);     /* Darker green */
}

/* The benefit of HSL - easily creating variations */
.hsl-variations {
  /* Creating a color palette with the same hue */
  --base-hue: 220; /* Blue */
  
  color: hsl(var(--base-hue), 100%, 50%);         /* Standard saturation and lightness */
  background-color: hsl(var(--base-hue), 80%, 90%); /* Light pastel version */
  border-color: hsl(var(--base-hue), 90%, 30%);     /* Dark rich version */
  box-shadow: 0 2px 10px hsl(var(--base-hue), 50%, 50%, 0.3); /* Transparent version */
}

For C++ developers, here's a structured implementation of the RGB to HSL algorithm in C++. This RGB to HSL C++ code is optimized for performance:

#include <iostream>
#include <algorithm>
#include <cmath>
#include <tuple>

class ColorConverter {
public:
    // RGB to HSL conversion function
    static std::tuple<int, int, int> rgbToHsl(int r, int g, int b) {
        // Validate and normalize RGB values to 0-1 range
        double r_norm = std::clamp(r, 0, 255) / 255.0;
        double g_norm = std::clamp(g, 0, 255) / 255.0;
        double b_norm = std::clamp(b, 0, 255) / 255.0;
        
        // Find maximum and minimum values
        double c_max = std::max({r_norm, g_norm, b_norm});
        double c_min = std::min({r_norm, g_norm, b_norm});
        double delta = c_max - c_min;
        
        // Calculate hue
        double h = 0;
        if (delta != 0) {
            if (c_max == r_norm) {
                h = std::fmod((g_norm - b_norm) / delta, 6.0);
                if (h < 0) h += 6.0;
            } else if (c_max == g_norm) {
                h = (b_norm - r_norm) / delta + 2.0;
            } else { // c_max == b_norm
                h = (r_norm - g_norm) / delta + 4.0;
            }
            h *= 60.0;
        }
        
        // Calculate lightness
        double l = (c_max + c_min) / 2.0;
        
        // Calculate saturation
        double s = 0;
        if (delta != 0) {
            s = delta / (1 - std::abs(2 * l - 1));
        }
        
        // Return HSL values (h in degrees, s and l as percentages)
        return std::make_tuple(
            static_cast<int>(std::round(h)),
            static_cast<int>(std::round(s * 100)),
            static_cast<int>(std::round(l * 100))
        );
    }
};

int main() {
    // Test the conversion with some example colors
    auto [h1, s1, l1] = ColorConverter::rgbToHsl(255, 0, 0);   // Red
    std::cout << "Red (255,0,0) -> HSL(" << h1 << "," << s1 << "%," << l1 << "%)" << std::endl;
    
    auto [h2, s2, l2] = ColorConverter::rgbToHsl(0, 255, 0);   // Green
    std::cout << "Green (0,255,0) -> HSL(" << h2 << "," << s2 << "%," << l2 << "%)" << std::endl;
    
    auto [h3, s3, l3] = ColorConverter::rgbToHsl(0, 0, 255);   // Blue
    std::cout << "Blue (0,0,255) -> HSL(" << h3 << "," << s3 << "%," << l3 << "%)" << std::endl;
    
    auto [h4, s4, l4] = ColorConverter::rgbToHsl(255, 255, 0); // Yellow
    std::cout << "Yellow (255,255,0) -> HSL(" << h4 << "," << s4 << "%," << l4 << "%)" << std::endl;
    
    return 0;
}

// Output:
// Red (255,0,0) -> HSL(0,100%,50%)
// Green (0,255,0) -> HSL(120,100%,50%)
// Blue (0,0,255) -> HSL(240,100%,50%)
// Yellow (255,255,0) -> HSL(60,100%,50%)