<input type="color">

Probieren Sie es aus

<p>Choose your colors:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Foreground color</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">Background color</label>
</div>

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

input {
  margin: 0.4rem;
}

Wert

Ein CSS-Farbwert.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den input-Attributen, die für alle <input>-Elemente gelten, unterstützt das color input auch die folgenden Attribute:

alpha Experimentell

Ein boolean Attribut, das, falls vorhanden, anzeigt, dass die Alphakomponente der Farbe vom Endbenutzer manipuliert werden kann und nicht vollständig undurchsichtig sein muss.

colorspace Experimentell

Definiert den Farbraum für die Farbe und gibt Hinweise auf die gewünschte Benutzeroberfläche für das Farbwähler-Widget. Mögliche enumerierte Werte sind:

• "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dies schließt rgb(), hsl(), hwb() und <hex-color>-Werte ein. Der Farbwert ist auf 8-Bit pro r, g und b Komponente begrenzt. Dies ist der Standard.
• "display-p3": Der Display P3-Farbraum, z.B. color(display-p3 1.84 -0.19 0.72 / 0.6)

Verwendung von Farbeingaben

Eingaben vom Typ color sind einfach aufgrund der begrenzten Anzahl an unterstützten Attributen.

Eine Standardfarbe vorgeben

Sie können das obige Beispiel aktualisieren, um einen Standardwert festzulegen, sodass der Farbwähler mit der Standardfarbe vorausgefüllt ist und der Farbwähler (falls vorhanden) ebenfalls auf diese Farbe voreingestellt ist.

<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 />

Wenn Sie keinen Wert angeben oder wenn der Wert ungültig oder vom Browser nicht unterstützt ist, wird der Wert auf #000000 gesetzt, was einem undurchsichtigen Schwarz entspricht.

Farbänderungen verfolgen

Wie bei anderen <input>-Typen gibt es zwei Ereignisse, die verwendet werden können, um Änderungen des Farbwerts zu erkennen: input und change. input wird bei jedem Ändern der Farbe auf dem <input>-Element ausgelöst. Das change-Ereignis wird ausgelöst, wenn der Benutzer den Farbwähler schließt. In beiden Fällen können Sie den neuen Wert des Elements ermitteln, indem Sie auf dessen value schauen.

Hier ist ein Beispiel, das Änderungen des Farbwerts im Laufe der Zeit überwacht:

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

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

Den Wert auswählen

Wenn ein Browser keine Farbwähleroberfläche unterstützt, wird seine Implementierung von Farbeingaben ein Textfeld sein, das den Inhalt automatisch validiert, um sicherzustellen, dass der Wert im korrekten Format vorliegt. In diesem Fall können Sie die Methode select() verwenden, um den im Bearbeitungsfeld aktuell befindlichen Text auszuwählen.

Falls der Browser stattdessen einen Farbwähler verwendet, macht select() nichts. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code entsprechend reagieren kann.

colorPicker.select();

Validierung

Ein Farbwert einer Farbeingabe wird als ungültig angesehen, wenn der User-Agent nicht in der Lage ist, die Benutzereingabe in eine siebenstellige, hexadezimale Notation in Kleinbuchstaben zu konvertieren. Falls und wenn dies der Fall ist, wird die :invalid Pseudoklasse auf das Element angewendet.

Beispiel

Lassen Sie uns ein Beispiel erstellen, das etwas mehr mit der Farbeingabe macht, indem wir die change und input Ereignisse verfolgen, um die neue Farbe zu nehmen und sie auf jedes <p>-Element im Dokument anzuwenden.

HTML

Das HTML ist ziemlich einfach — ein paar Absätze mit beschreibendem Material und ein <input> vom Typ color mit der ID color-picker, die wir verwenden, um die Farbe des Textes der Absätze zu ändern.

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

JavaScript

Initialisierung

Der folgende Code initialisiert die Farbeingabe:

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

Dieser Code erhält einen Verweis auf das Farbe <input>-Element in einer Variablen namens colorPicker und setzt dann den Wert der Farbeingabe auf den Wert in defaultColor. Dann wird das input-Ereignis der Farbeingabe eingerichtet, um unsere updateFirst()-Funktion aufzurufen, und das change-Ereignis wird eingerichtet, um updateAll() aufzurufen. Diese beiden werden unten gezeigt.

Schließlich rufen wir select() auf, um den Textinhalt der Farbeingabe auszuwählen, wenn das Steuerungselement als Textfeld implementiert ist (dies hat keinen Effekt, wenn stattdessen eine Farbwähleroberfläche bereitgestellt wird).

Auf Farbänderungen reagieren

Wir bieten zwei Funktionen, die mit Farbänderungen umgehen. Die updateFirst()-Funktion wird als Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatz-Elements im Dokument, damit es mit dem neuen Wert der Farbeingabe übereinstimmt. Da input-Ereignisse jedes Mal ausgelöst werden, wenn eine Anpassung am Wert vorgenommen wird (zum Beispiel, wenn die Helligkeit der Farbe erhöht wird), werden diese wiederholt ausgelöst, während der Farbwähler verwendet wird.

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Wenn der Farbwähler geschlossen wird, was darauf hinweist, dass sich der Wert nicht mehr ändern wird (es sei denn, der Benutzer öffnet den Farbwähler erneut), wird ein change-Ereignis an das Element gesendet. Wir verarbeiten dieses Ereignis mit der Funktion updateAll(), indem wir Event.target.value verwenden, um die endgültig ausgewählte Farbe zu erhalten:

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

Dies setzt die Farbe jedes <p>-Blocks, sodass sein color-Attribut mit dem aktuellen Wert des Farbeingabefelds übereinstimmt, das mit event.target referenziert wird.

Ergebnis

Das Endergebnis sieht folgendermaßen aus:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Siehe auch

• HTMLInputElement.alpha
• HTMLInputElement.colorspace