<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 Eingabeattributen, die allen <input>-Elementen gemeinsam sind, unterstützt die color-Eingabe auch die folgenden Attribute:

alpha Experimentell

Ein boolean-Attribut, das, wenn es vorhanden ist, angibt, dass der Alphakanal der Farbe vom Endbenutzer bearbeitet werden kann und nicht vollständig deckend 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 aufzählende Werte sind:

• "limited-srgb": Die Farbe befindet sich im must be provided-Farbraum. Dies umfasst rgb(), hsl(), hwb() und <hex-color> Werte. 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, da sie nur eine begrenzte Anzahl von Attributen unterstützen.

Bereitstellung einer Standardfarbe

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

<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 standardmäßig auf #000000 gesetzt, was ein opakes Schwarz ist.

Verfolgen von Farbänderungen

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 auf dem <input>-Element jedes Mal ausgelöst, wenn sich die Farbe ändert. Das change-Ereignis wird ausgelöst, wenn der Benutzer den Farbauswähler schließt. In beiden Fällen können Sie den neuen Wert des Elements ermitteln, indem Sie dessen value betrachten.

Hier ist ein Beispiel, das die Änderungen des Farbwerts im Zeitverlauf überwacht:

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

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

Auswahl des Werts

Wenn ein Browser keine Farbauswahl-Oberfläche unterstützt, wird die Implementierung von Farbeingaben ein Textfeld sein, das den Inhalt automatisch validiert, um sicherzustellen, dass der Wert im richtigen Format vorliegt. In diesem Fall können Sie die select()-Methode verwenden, um den Text auszuwählen, der sich derzeit im Bearbeitungsfeld befindet.

Wenn der Browser stattdessen einen Farbauswähler verwendet, bewirkt select() nichts. Sie sollten sich dieses Verhaltens bewusst sein, damit Ihr Code in jedem Fall angemessen reagieren kann.

colorPicker.select();

Validierung

Ein Farb-Eingabewert gilt als ungültig, wenn der User Agent nicht in der Lage ist, die Benutzereingabe in eine siebenstellige, kleingeschriebene Hexadezimalnotation zu konvertieren. In diesem Fall wird die :invalid-Pseudoklasse auf das Element angewendet.

Beispiel

Lassen Sie uns ein Beispiel erstellen, das ein wenig mehr mit der Farbeingabe macht, indem es die change und input-Ereignisse nachverfolgt, um die neue Farbe zu verwenden und auf jeden <p>-Element im Dokument anzuwenden.

HTML

Das HTML ist ziemlich einfach – ein paar beschreibende Absätze mit einem <input> vom Typ color mit der ID color-picker, das wir verwenden werden, um die Farbe des Absatztexts 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, false);
colorPicker.addEventListener("change", updateAll, false);
colorPicker.select();

Dies holt eine Referenz zum 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 so eingerichtet, dass unsere updateFirst()-Funktion aufgerufen wird, und das change-Ereignis wird so eingerichtet, dass updateAll() aufgerufen wird. Beide sind unten zu sehen.

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

Reaktion auf Farbänderungen

Wir stellen zwei Funktionen bereit, die sich mit Farbänderungen befassen. Die Funktion updateFirst() wird als Reaktion auf das input-Ereignis aufgerufen. Sie ändert die Farbe des ersten Absatz-Elements im Dokument so, dass sie mit dem neuen Wert der Farbeingabe übereinstimmt. Da input-Ereignisse jedes Mal ausgelöst werden, wenn eine Anpassung des Werts gemacht wird (zum Beispiel, wenn die Helligkeit der Farbe erhöht wird), werden diese wiederholt auftreten, 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 behandeln dieses Ereignis mit der Funktion updateAll(), indem wir Event.target.value verwenden, um die letztendlich 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 so, dass sein color-Attribut mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf die mit event.target verwiesen wird.

Ergebnis

Das Endergebnis sieht so aus:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität