Saturated reds are darker

[TheoHiwo]

I'm learning javascript using p5js. When I was playing with hsluv library to do a color palette and add a gray filter, I encountered darker saturated red:

function setup()
{
    createCanvas(500, 450)
    colorMode(RGB);
    noLoop();
    background(chsl(330.7,99,50));
}

function draw() {
    translate(width/2 - 105,  height/2 - 50)
    ColorPalette();
}

//Enter Hsluv Value and convert to RGBA ex:background(chsl(259.3, 62.4, 50));
function chsl(h, s, l, a = 100) {
    const rgb = hsluv.hsluvToRgb([h, s, l]);
    return "rgba("+parseInt((rgb[0] * 255))+","+parseInt((rgb[1] * 255))+","+parseInt((rgb[2] * 255))+","+((a / 100))+")";
}

function ColorPalette() {
    //  Gray
    push()
    translate(110, 0)
    for (let i = 0; i < 360; i++) {
        for (let j = 0; j < 100; j++) {
            stroke(chsl(i, j, 50));
            point(i*0.27777777777777777777777777777778, j); // *0.27__8 for 360° -> 100
        }
    }
    filter(GRAY);
    pop()
    //  Color
    translate(0, 0)
    for (let i = 0; i < 360; i++) {
        for (let j = 0; j < 100; j++) {
            stroke(chsl(i, j, 50));
            point(i*0.27777777777777777777777777777778, j);
        }
    }
}

Maybe it's parseInt() or filter(GRAY) who are wrong?

[boronine]

Hi @Hiwoyn seems that the problem is with filter(GRAY), the filter works by determining lightness of every pixel. My guess is that it's using HSL to determine lightness, but HSL is notoriously bad at that. You can implement your own filter(GRAY) using HSLuv simply by setting saturation to 0.

Feel free to reopen the issue if needed.