Les éléments <input> de type "color" permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saissant le code hexadécimal de la couleur au format "#rrggbb".

L'apparence du contrôle de sélection des couleurs peut varier largement d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché pour saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.

<input type="color">

Valeur Une chaîne de caractères sur sept caractères qui indique la couleur (cf. <color>) en notation hexadécimale (en minuscule).
Évènements change et input.
Attributs pris en charge autocomplete et list.
Attributs IDL list et value.
Méthodes select()

Valeur

L'attribut value  d'un élément <input type="color"> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour Green en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.

Note : Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur "#000000" (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de "#000000".

Utiliser les contrôles de saisie des couleurs

Les éléments <input type="color"> sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).

Fournir une couleur par défaut

Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :

<input type="color" value="#ff0000">

Si aucune valeur n'est indiquée, c'est "#000000" qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme "#rrggbb".

Détecter le changement de couleur

Comme pour les différents éléments <input>, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : input et change. input est déclenché sur l'élément <input> à chaque fois que la couleur change. L'évènement change est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à value.

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

Sélectionner la valeur

Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode select(). Si le navigateur affiche un sélecteur de couleur, select() ne fera rien.

colorWell.select();

Différences d'aspect

Comme mentionné précédemment, lorsqu'un navigateur ne prend pas en charge l'affichage d'un sélecteur de couleur, c'est un champ texte qui sera affiché. Par exemple, sous Safari 10.1, on peut voir le résultat suivant :

Screenshot of the example taken in Safari.

Avec Firefox Firefox 55, on aura cet affichage :

Screenshot of the example taken in Firefox 55 for macOS

Pour ce deuxième cas, en cliquant sur le carré coloré, cela ouvrira le sélecteur de couleur natif du système d'exploitation :

Screenshot of the element with the color picker open in Firefox Mac.

Validation

La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS :invalid sera appliquée à l'élément.

Exemple

Créons un exemple qui utilise un sélecteur de couleur et les évènements change et input afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément <p> du document.

HTML

Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément <input> de type "color" dont l'identifiant est "colorWell" (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).

<p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p>

<label for="colorWell">Couleur :</label>
<input type="color" value="#ff0000" id="colorWell">

<p>Vous pouvez ici voir que la couleur du premier paragraphe changer
   lorsqu'on ajuste la valeur dans le sélecteur. Pour cela, on 
   utilise l'évènement <code>input</code>. Lorsqu'on ferme le 
   sélecteur, l'évènement <code>change</code> est déclenché et on 
   applique la modification est appliquée à l'ensemble des paragraphes.</p>

JavaScript

Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire load afin de lancer les actions de démarrage lorsque la page est chargée.

var colorWell
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Initialisation

Lorsque la page est chargée, l'évènement "load" est déclenché et la fonction startup() est donc appelée :

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

Dans cette fonction, on utilise la variable colorWell déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de defaultColor). Ensuite, on indique les gestionnaires d'évènements : input appellera updateFirst() et change appellera updateAll() qui seront détaillés ensuite.

Enfin, on appelle select() afin de sélectionner le texte du champ si le contrôle est un champ texte.

Réagir suite aux modifications de couleurs

On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction updateFirst() permet de répondre à l'évènement input et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements input ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement change est alors envoyé et cela déclenche alors l'appel de la fonction updateAll() :

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

Cela permet de modifier la couleur de chaque bloc <p> du document afin que la couleur (cf. color) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet event.target.

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard Standard évolutif  
HTML5 Recommendation  
HTML 4.01 Specification Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 20.0 38 29 (29) [1] Pas de support 11.01 10
list 20.0 ? Pas de support[2] Pas de support ? ?
autocomplete 20.0 ? Pas de support[3] Pas de support ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 4.4 27.0 (27.0) Pas de support (Oui) ?
list ? Pas de support[2] Pas de support ? ?
autocomplete ? Pas de support[3] Pas de support ? ?

[1] Actuellement, Firefox ne prend pas en charge <input type="color"> pour Windows Touch.

[2] Se référer à bug 960984 pour l'état de la prise en charge de l'attribut list dans Firefox.

[3] Se référer à bug 960989 pour l'état de la prise en charge de l'attribut autocomplete dans Firefox. Il est possible de modifier et d'obtenir la valeur de l'attribut mais celle-ci n'a aucun effet.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, josephcab
 Dernière mise à jour par : SphinxKnight,