<input type="color">

Exemple interactif

<p>Choisissez vos couleurs&nbsp;:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Couleur de premier plan</label>
</div>

<div>
  <input
    type="color"
    id="background"
    name="background"
    value="oklab(50% 0.1 0.1 / 0.5)"
    colorspace="display-p3"
    alpha />
  <label for="background">Couleur d'arrière-plan</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Valeur

Une valeur de couleur CSS.

Attributs supplémentaires

En plus des attributs universels et des attributs de champ communs à tous les éléments <input>, le champ de type color prend aussi en charge les attributs suivants :

alpha Expérimental

Un attribut booléen, s'il est présent, indique que la composante alpha de la couleur peut être manipulée par l'utilisateur·ice et n'a pas besoin d'être totalement opaque.

colorspace Expérimental

Définit l'espace colorimétrique pour la couleur et suggère l'interface utilisateur souhaitée pour le sélecteur de couleur. Les valeurs énumérées possibles sont :

• "limited-srgb" : La couleur est dans l'espace colorimétrique sRGB. Cela inclut les valeurs rgb(), hsl(), hwb() et <hex-color>. La valeur de couleur est limitée à 8 bits par composante r, g et b. C'est la valeur par défaut.
• "display-p3" : L'espace colorimétrique Display P3, par exemple, color(display-p3 1.84 -0.19 0.72 / 0.6)

Utiliser les contrôles de saisie des couleurs

Les champs de type color sont simples, en raison du nombre limité d'attributs qu'ils prennent en charge.

Fournir une couleur par défaut

Vous pouvez modifier l'exemple ci-dessus pour définir une valeur par défaut, afin que le sélecteur de couleur soit prérempli avec la couleur par défaut et que le sélecteur de couleur (s'il existe) utilise également cette couleur par défaut.

<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

Si vous n'indiquez pas de valeur ou si la valeur est invalide ou non prise en charge par le navigateur, la valeur par défaut sera #000000, c'est-à-dire le noir opaque.

Détecter le changement de couleur

Comme pour les autres types <input>, il existe deux évènements qui peuvent être utilisés pour détecter les changements de la valeur de 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·ice ferme le sélecteur de couleur. Dans les deux cas, vous pouvez déterminer la nouvelle valeur de l'élément en consultant sa value.

Voici un exemple qui observe les changements de la valeur de couleur au fil du temps :

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

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

Sélectionner la valeur

Lorsque le navigateur ne prend pas en charge une interface de sélection de couleur, son implémentation des contrôles de couleur sera une zone de texte qui valide automatiquement le contenu afin de s'assurer que la valeur est au bon format. Dans ce cas, vous pouvez utiliser la méthode select() pour sélectionner le texte actuellement présent dans le champ de saisie.

Si le navigateur utilise à la place un sélecteur de couleur, select() ne fait rien. Vous devez être conscient·e de ce comportement afin que votre code puisse réagir correctement dans chaque cas.

colorWell.select();

Validation

La valeur d'un contrôle de couleur est considérée comme invalide si le agent utilisateur n'est pas capable de convertir la saisie de l'utilisateur·ice en une notation hexadécimale sur sept caractères en minuscules. Si et quand cela se produit, la pseudo-classe :invalid est appliquée à l'élément.

Exemples

Créons un exemple qui va un peu plus loin avec le contrôle de couleur en suivant les évènements change et input pour récupérer la nouvelle couleur et l'appliquer à chaque élément <p> du document.

HTML

Le code HTML est assez simple — quelques paragraphes descriptifs avec un élément <input> de type color dont l'identifiant est color-picker, que nous utiliserons 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="color-picker">Couleur&nbsp;:</label>
<input type="color" value="#ff0000" id="color-picker" />

<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

Initialisation

Le code suivant initialise le contrôle de couleur :

const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

On récupère une référence à l'élément <input> de couleur dans une variable appelée colorPicker, puis on définit la valeur du contrôle de couleur sur celle de defaultColor. Ensuite, l'évènement input du contrôle de couleur est configuré pour appeler notre fonction updateFirst(), et l'évènement change est configuré pour appeler updateAll(). Ces deux éléments sont visibles ci-dessous.

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) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Lorsque le sélecteur de couleur est fermé, ce qui indique que la valeur ne changera plus (sauf si l'utilisateur·ice rouvre le sélecteur), un évènement change est envoyé à l'élément. Nous gérons cet évènement avec la fonction updateAll(), en utilisant Event.target.value pour obtenir la couleur finale sélectionnée :

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

Cela définit la couleur de chaque bloc <p> afin que son attribut color corresponde à la valeur actuelle du contrôle de couleur, qui est référencée via event.target.

Résultat

Le résultat final ressemble à ceci :

Résumé technique

Spécifications

Compatibilité des navigateurs

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Voir aussi

• La propriété API HTMLInputElement.alpha
• La propriété API HTMLInputElement.colorspace