Modello cromatico OKLCH in p5.js

  colorMode( OKLCH );   // luminosità:  0..100
                      // crominanza:  0..150
                      // tono:        0..360
                      // opacità:     0..1

background(/*1*/ 0.88 /**/);   // grigio chiaro
fill(/*2*/ 93, 100, 86 /**/);  // giallo-arancio

• livello di grigio, da 0 a 1 invece che da 0 a 100 come la luminosità
• luminosità alta,
  crominanza elevata,
  tono giallo-arancio (giallo sarebbe intorno a 110°)

Dalla versione 2 di p5.js sono disponibili nuove modalità cromatiche introdotte nelle ultime versioni dei CSS. In OKLCH i parametri sono in ordine inverso rispetto a HSL e HSB: luminosità, crominanza e tono.

    function setup() {
    colorMode( OKLCH );

    background( 0.88 );
    fill( 93, 100, 86 );
    circle( 50,50, 70 );
}
  

Modificare i parametri dell’istruzione fill() fino a ottenere questo colore:    . I valori di crominanza e tono non coincidono con quelli di saturazione e tono di HSL e HSB.

La reference di p5.js non indica i valori massimi di OKLCH. Nel codice sorgente sono gli stessi del modello LCH: 100 per la luminosità, 150 per la crominanza (il valore di riferimento di lch() nei CSS) e 360 per il tono. p5.js li riporta poi ai valori di OKLCH, in cui la crominanza di riferimento arriva a 0.4: 150 corrisponde quindi a 0.4, e i colori più vivaci dello schermo arrivano a circa 120. I colori che lo schermo non può mostrare vengono sostituiti con i più vicini, conservando luminosità e tono.