Colormap en css / javascript

Palette de couleurs avec un paramètre

On a souvent besoin de faire correspondre une grandeur avec une couleur, associer l'intensité d'un phénomène avec une échelle colorée, ou encore, en d'autres termes, associer un résultat numérique à une couleur en vu d'une représentation graphique pertinente et esthétique.
Si on veut balayer toute une palette de couleurs, il s'agit donc de faire correspondre un unique nombre avec un triplet d'entiers pour une couleur définie en rgb

Ci-dessous les éléments de programmation html et javascript qui permettent d'obtenir ce balayage d'une palette de couleurs.
La fonction principale est ColorMap qui associe à un entier une couleur au format rgb.

html et javascript

Le nombre de couleurs est accessible via un formulaire form puis la zone graphique définie avec canvas

<form onchange="DrawColorMap()" onsubmit="DrawColorMap();return false;" >
<label>Nombre de couleurs: P=</label>
<input type="number" id="N" min="1" value="20" max="256" step="1" size="3">
</form>
<canvas id="cnv" width="400" height="30" style="border:1px solid black"></canvas>
</div>

Enfin, en javascript, on récupère la référence au canvas et ses dimensions, puis on définit la fonction ColorMap qui convertit un entier en une couleur au format rgb, soit trois entiers (r,g,b) désignant respectivement les intensités en rouge (red), vert (green) et bleu (blue).
On utilise ici ensuite simplement cette fonction pour dessiner un dégradé des couleurs successives de la palette, ici de 256 couleurs.

<script>
canvash = document.getElementById("cnv");
ctxh = canvash.getContext("2d");
Width=document.getElementById("cnv").width;
Height=document.getElementById("cnv").height;

function ColorMap(p) {
    sr=0 ; sg=0 ; sb=0;
    if (p < 64) {
        sr=0 ; sg=p*4 ; sb=255;
    } else if (p < 128) {
        sr=0 ; sg=255 ; sb=(255-(p-64)*4);
    } else if (p < 192) {
        sr=(p-128)*4 ; sg=255  ;sb = 0;
    } else if (p < 256) {
        sr=255 ; sg=(256-(p-191)*4) ; sb=0;
    }
  return "rgb("+sr+","+sg+","+sb+")";
}

function DrawColorMap() {
N=document.getElementById("N").value;
  dw=Width/N
  ctxh.clearRect(0,0,Width,Height);
  for (i=0;i<N;i++) {
    s=ColorMap(Math.floor(i*255/N));
    ctxh.fillStyle=s;//"blue";
    ctxh.fillRect(i*dw,0,dw,Height) 
   }
}
DrawColorMap()
</script>