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

This is javascript implementation of wikipedia.

function hsl2rgb(h, s, l) {
    s = s / 100;
    l = l / 100;
    let c = (1 - Math.abs(2*l-1)) * s; // chroma
    h = h / 60;
    let x = c * (1 - Math.abs((h % 2) - 1));

    let r = 0, g = 0, b = 0;
    if (h < 1)
        r = c, g = x;
    else if (h < 2)
        r = x, g = c;
    else if (h < 3)
        g = c, b = x;
    else if (h < 4)
        g = x, b = c;
    else if (h < 5)
        r = x, b = c;
    else
        r = c, b = x;

    let m = l - c/2;
    return {r: (r+m)*255, g: (g+m)*255, b: (b+m)*255};
}