The upper half region is filled with rgb color.
The lower half region is filled with hsl color equivalent.

This is javascript implementation of wikipedia.

function rgb2hsl(r, g, b) {
    // Convert to range [0, 1]
    r = r / 255;
    g = g / 255;
    b = b / 255;

    let xmax = Math.max(r, g, b);
    let xmin = Math.min(r, g, b);
    let c = xmax - xmin;
    let l = (xmax + xmin) / 2;

    let h;
    if (c == 0)
        h = 0;
    else if (xmax == r)
        h = (((g-b)/c + 6) % 6) * 60;
    else if (xmax == g)
        h = ((b-r)/c + 2) * 60;
    else
        h = ((r-g)/c + 4) * 60;

    let s;
    if (l == 0 || l == 1)
        s = 0;
    else
        s = c / (1 - Math.abs(2*xmax-c-1));
    
    return {h, s: s*100, l: l*100};
}