Comment créer une palette de couleurs en HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-04-11 21:12:19

Question

Comment faire pour créer une palette de couleurs, du type color picker, en HTML, de telle manière qu'on puisse sélectionner une couleur, et récupérer la couleur au format HEX et RGB ?

Réponse

Pour créer une palette de couleurs, du type color picker, en HTML, vous pouvez utiliser la balise HTML input de type color.

<input type="color">

Pour récupérer la valeur HEX de la couleur sélectionnée, vous pouvez utiliser la propriété JavaScript Event.target ; et pour récupérer la valeur RGB, il faut créer une fonction pour convertir une couleur au format HEX en RGB.

Voici un exemple pour créer une palette de couleurs en HTML, et récupérer les valeurs HEX et RGB de la couleur choisie :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment créer une palette de couleurs en HTML ?</title>
</head>
<body>
<input type="color" value="#000000" id="palette">
<br>
La couleur HEX choisie est : <span id="choix_hex"></span>
<br>
La couleur RGB choisie est : <span id="choix_rgb"></span> 
<script>
var paletteCouleurs
var couleurDefaut = "#000000";
window.addEventListener("load", chargement, false);

function chargement() {
  paletteCouleurs = document.querySelector("#palette");
  paletteCouleurs.value = couleurDefaut;
  paletteCouleurs.addEventListener("input", changementCouleur, false);
  paletteCouleurs.select();
}

function HEXversRGB(hex){
 const r = parseInt(hex.substring(1, 3), 16);
 const g = parseInt(hex.substring(3, 5), 16);
 const b = parseInt(hex.substring(5, 7), 16);
 return r + "," + g + "," + b;
}

function changementCouleur(e) {
  var choix_hex = document.getElementById("choix_hex");
  var choix_rgb = document.getElementById("choix_rgb");
  if (choix_hex) 
  {
    choix_hex.innerHTML = e.target.value;
    choix_rgb.innerHTML = HEXversRGB(e.target.value);
  }
}
</script>
</body>
</html>

Vous trouverez une démonstration de ce script via le Bac à codes.