<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 für alle <input>-Elemente gemeinsamen Input-Attributen, unterstützt das color Input auch folgende Attribute:

alpha Experimentell

Ein boolean-Attribut. Wenn vorhanden, zeigt es an, 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 Farbwahl-Widget. Mögliche aufgezählte Werte sind:

• "limited-srgb": Die Farbe befindet sich im sRGB-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 Standardwert.
• "display-p3": Der Display P3-Farbraum, z. B. color(display-p3 1.84 -0.19 0.72 / 0.6)

Verwenden von Farbeingaben

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

Standardfarbe angeben

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 (sofern vorhanden) ebenfalls auf diese Farbe voreingestellt wird.

<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 der Wert ungültig oder vom Browser nicht unterstützt ist, wird der Wert standardmäßig auf #000000 gesetzt, was einem undurchsichtigen Schwarz entspricht.

Verfolgen von Farbänderungen

Wie bei anderen <input>-Typen gibt es zwei Ereignisse, die verwendet werden können, um Änderungen am Farbwert 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 Farbwähler schließt. In beiden Fällen können Sie den neuen Wert des Elements ermitteln, indem Sie seinen value ansehen.

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

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

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

Auswählen des Wertes

Wenn ein Browser keine Farbwähler-Schnittstelle unterstützt, ist seine Implementierung von Farbeingaben ein Textfeld, 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 aktuell im Bearbeitungsfeld befindlichen Text auszuwählen.

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

colorPicker.select();

Validierung

Ein Farbwert einer Eingabe wird als ungültig betrachtet, wenn der Benutzer-Agent die Benutzereingabe nicht in eine siebenstellige Kleinschrift-Hexadezimal-Notation umwandeln kann. Falls dies der Fall ist, wird die :invalid-Pseudoklasse auf das Element angewendet.

Beispiel

Erstellen wir ein Beispiel, das etwas mehr mit der Farbeingabe macht, indem es die change und input Ereignisse verfolgt, 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 mit einem <input> vom Typ color mit der ID color-picker, den 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);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

Dies erfasst eine Referenz zum Farbeingabeelement in einer Variablen namens colorPicker und setzt den Wert der Farbeingabe auf den Wert in defaultColor. Dann wird das input-Ereignis der Farbeingabe so eingerichtet, dass unsere Funktion updateFirst() aufgerufen wird, und das change-Ereignis wird so eingerichtet, dass updateAll() aufgerufen wird. Diese sind beide unten zu sehen.

Schließlich rufen wir select() auf, um den Textinhalt der Farbeingabe auszuwählen, falls das Steuerelement als Textfeld implementiert ist (dies hat keine Wirkung, wenn stattdessen eine Farbauswahl-Schnittstelle bereitgestellt wird).

Reaktion auf Farbänderungen

Wir stellen zwei Funktionen bereit, 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 so, dass sie 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), geschieht dies wiederholt, 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 der Wert nicht mehr geändert wird (es sei denn, der Benutzer öffnet den Farbwähler erneut), wird ein change-Ereignis an das Element gesendet. Wir bearbeiten dieses Ereignis mit der Funktion updateAll(), wobei 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 so, dass das color-Attribut mit dem aktuellen Wert der Farbeingabe übereinstimmt, auf die mit event.target verwiesen wird.

Ergebnis

Das endgültige Ergebnis sieht so 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