Sfumature in RGB, HSL e OKLCH

    function setup() {
    createCanvas( 670, 300 );
    noStroke();

    colorMode( RGB );
    let bluRGB = color( 72, 98, 153 );
    let gialloRGB = color( 236, 224, 151 );
    colorMode( HSL );
    let bluHSL = color( 221, 36, 44 );
    let gialloHSL = color( 52, 69, 76 );
    colorMode( OKLCH );
    let bluOKLCH = color( 50, 35, 264 );
    let gialloOKLCH = color( 90, 35, 100 );

    for (let x=0;  x<width;  x++) {
        let t = x / width;
        fill( lerpColor( bluRGB, gialloRGB, t ) );
        rect( x, 0, 1, 95 );
        fill( lerpColor( bluHSL, gialloHSL, t ) );
        rect( x, 102, 1, 95 );
        fill( lerpColor( bluOKLCH, gialloOKLCH, t ) );
        rect( x, 205, 1, 95 );
    }
}

Lo stesso blu e lo stesso giallo nelle tre file, definiti con i valori di ciascun modello.

lerpColor() restituisce il colore intermedio indicato da t, che va da 0 a 1 lungo la larghezza del canvas. In p5.js 2 l’interpolazione avviene nel modello in cui i due colori sono stati definiti.

In RGB i colori intermedi si avvicinano al grigio, perché si mescolano due colori quasi complementari. In HSL il tono gira nel cerchio cromatico passando per l’azzurro e il verde, che diventano subito molto più chiari del blu di partenza. In OKLCH anche il tono gira, ma luminosità e crominanza cambiano in modo regolare.

Provare ad aumentare la crominanza dei due colori OKLCH (35) fino a 60: i colori intermedi diventano troppo vivaci per lo schermo, e la sfumatura presenta dei salti.

 

In p5.js 1 lerpColor() interpola invece nel modello attivo al momento della chiamata, e il modello OKLCH non esiste.

Approfondimenti: