Le code couleur en hexadécimal

Le code hexadécimal

Maintenant que nous avons vu les bases du code hexadécimal, il est temps de se pencher sur l’une de ses applications les plus populaires : la représentation des couleurs sur le web. Quand vous voyez une notation du type #FF6600 dans une feuille de style CSS, sachez qu’il ne s’agit que de trois valeurs hexadécimales mises bout à bout, correspondant respectivement aux composantes Rouge, Vert et Bleu (RVB ou RGB en anglais).

Principe de base :

Un code hexa pour une couleur commence par un # suivi de 6 caractères (ou 3 dans sa version courte). Ces caractères sont une combinaison de chiffres (0-9) et de lettres (A-F), tirés du système en base 16. Les 6 caractères se décomposent ainsi :

  • Les 2 premiers représentent l’intensité du Rouge (R).
  • Les 2 suivants représentent l’intensité du Vert (V).
  • Les 2 derniers représentent l’intensité du Bleu (B).

Chaque paire va de 00 (aucune intensité, soit 0 en décimal) à FF (intensité maximale, soit 255 en décimal). En mélangeant ces trois composantes, on obtient une couleur précise.

Exemple simple

Rouge pur

#FF0000

RGB (255, 0, 0)

Vert pur

#00FF00

RGB (0, 255, 0)

Bleu pur

#0000FF

RGB (0, 0, 255)

Noir

000000

RGB (0, 0, 0)

Blanc

FFFFFF

RGB (255, 255, 255)

Il existe aussi une version plus courte pour simplifier les codes, par exemple :

  • #FF0000 devient #F00 (rouge).
  • #00FF00 devient #0F0 (vert).
  • #FFFFFF devient #FFF (blanc).

Cela fonctionne parce que chaque caractère est implicitement doublé par le système.

Combien de couleur possible ?

Chaque composante (R, V, B) utilise 2 chiffres hexadécimaux, soit 256 possibilités (de 0 à 255). Donc en combinant les trois, cela donne 256 × 256 × 256 = 16,7 millions de couleurs possibles.

Ce code crée une interface simple pour explorer les codes hexadécimaux des couleurs. Voici son fonctionnement en trois parties :

1. HTML : Structure

  • <div class= »container »> : Conteneur principal centré avec un fond bleu nuit (rgb(5, 30, 49)).
  • <div class= »input-container »> : Regroupe verticalement :
    • <button id= »clearButton »> : Bouton « Effacer » pour réinitialiser.
    • <input id= »hexInput »> : Champ texte pour entrer un code hexa (limité à 7 caractères, commence vide avec « Merci de saisir » en placeholder).
    • <div class= »hex-buttons »> : Grille de 16 boutons (0-9, A-F) pour ajouter des caractères au champ.
  • <div id= »colorBox »> : Boîte carrée (120x120px) affichant la couleur, noire (#000000) par défaut.

2. CSS : Style

  • .container : Largeur max 300px, marges automatiques, padding 20px.
  • .input-container : Flex vertical, centré, espacement 10px.
  • input : 120px de large, bordure cyan (#00FFFF) par défaut, magenta (#FF00FF) au survol, transition fluide.
  • .hex-buttons : Grille 4×4, espacement 5px.
  • button : Fond gris (#808080), magenta au survol, bordures arrondies, transition fluide.
  • #clearButton : Largeur 80px, marge en bas 10px.
  • #colorBox : Bordure grise, coins arrondis, transition de couleur en 0.3s.

3. JavaScript : Interactivité

  • updateColor() :
    • Lit la valeur de l’input.
    • Si elle correspond à un code hexa valide (#[0-9A-Fa-f]{6}), met à jour la couleur de #colorBox.
  • appendToInput(char) :
    • Si l’input est vide ou montre le placeholder, commence par #.
    • Ajoute le caractère cliqué (0-9, A-F) si < 7 caractères.
    • Appelle updateColor() pour actualiser.
  • clearInput() :
    • Vide l’input («  »), réaffichant le placeholder.
    • Remet #colorBox à noir (#000000).


    function updateColor() {
      let hex = document.getElementById("hexInput").value;
      let colorBox = document.getElementById("colorBox");

      if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
        colorBox.style.backgroundColor = hex;
      }
    }

    function appendToInput(char) {
      let input = document.getElementById("hexInput");
      let currentValue = input.value;

      if (currentValue === "Merci de saisir" || currentValue === "") {
        input.value = "#";
      }
      if (currentValue.length < 7) {
        input.value += char;
        updateColor();
      }
    }

    function clearInput() {
      let input = document.getElementById("hexInput");
      let colorBox = document.getElementById("colorBox");
      input.value = "";
      colorBox.style.backgroundColor = "#000000"; /* Retour à noir par défaut */
    }