Signatur
Beschreibung
Die Eigenschaft colorSpace spiegelt das HTML-Attribut colorspace eines <input>-Elements wider. Sie wirkt nur bei Farbwählern (type="color") und legt fest, in welchem Farbraum die gewählte Farbe in value steht. Erlaubt sind "limited-srgb" (Standard) und "display-p3".
Mit "limited-srgb" bleibt alles wie bisher: Der Farbwähler liefert eine Farbe aus dem sRGB-Farbraum mit 8 Bit pro Kanal, also etwa #ff0000, sofern das alpha-Attribut fehlt. Mit "display-p3" kann der Nutzer auch Farben aus dem größeren Display-P3-Farbraum wählen, den moderne Bildschirme darstellen können. Den Wert gibt der Browser dann in CSS-Syntax aus, zum Beispiel color(display-p3 1 0 0).
Die Eigenschaft ist eine aufgezählte, reflektierte Eigenschaft (enumerated attribute). Fehlt das Attribut oder hat es einen ungültigen Wert, liefert der Getter "limited-srgb". Wenn du einen Wert setzt, schreibt der Browser ihn unverändert in das Attribut.
Sinnvoll ist das zum Beispiel in Design- und Grafikwerkzeugen, Theme-Editoren oder Bildbearbeitungen, die kräftige Farben für Wide-Gamut-Displays erlauben sollen. Man nutzt sie meist zusammen mit HTMLInputElement.alpha.
Rückgabewert
"limited-srgb" oder "display-p3". Fehlt das Attribut oder ist es ungültig, liefert der Getter "limited-srgb". Beim Setzen wird der Wert als colorspace-Attribut geschrieben.Beispiele
Farbraum auslesen und umschalten
// HTML: <input type="color" id="picker" value="#ff0000">
const picker = document.querySelector('#picker');
console.log(picker.colorSpace); // Standardwert
picker.colorSpace = 'display-p3';
console.log(picker.colorSpace);
console.log(picker.getAttribute('colorspace'));Ungültige Werte fallen auf den Standard zurück
const input = document.createElement('input');
input.type = 'color';
input.setAttribute('colorspace', 'adobe-rgb'); // wird nicht unterstützt
console.log(input.colorSpace);
console.log(input.getAttribute('colorspace'));Mit Feature-Erkennung auf Wide-Gamut-Displays P3 aktivieren
const picker = document.querySelector('input[type="color"]');
const supportsColorSpace = 'colorSpace' in HTMLInputElement.prototype;
const hasP3Display = window.matchMedia('(color-gamut: p3)').matches;
if (supportsColorSpace && hasP3Display) {
picker.colorSpace = 'display-p3';
}
picker.addEventListener('input', () => {
// Bei display-p3 z. B. "color(display-p3 1 0 0)", sonst "#ff0000"
document.body.style.setProperty('--akzent', picker.value);
console.log(`Farbraum: ${picker.colorSpace}, Wert: ${picker.value}`);
});Zusammen mit alpha für Farben mit Transparenz
const picker = document.createElement('input');
picker.type = 'color';
picker.alpha = true;
picker.colorSpace = 'display-p3';
document.body.append(picker);
picker.addEventListener('change', () => {
// z. B. "color(display-p3 0.2 0.6 1 / 0.5)"
console.log(picker.value);
});// Wichtig · Fallstricke
- Browser-Unterstützung: Die Eigenschaft ist experimentell. Bisher unterstützt nur Safari sie (ab etwa 18.4). In Chromium und Firefox ist
colorSpaceundefined. Das Attribut wird dort ignoriert und der Farbwähler bleibt bei sRGB. Prüfe die Unterstützung vorher mit'colorSpace' in HTMLInputElement.prototype. - Wert nicht mehr im Hex-Format: Mit
"display-p3"(oder mitalpha) steht invaluekein#rrggbbmehr, sondern eine CSS-Farbe wiecolor(display-p3 …). Code, der ein Hex-Format erwartet (z. B. Regex-Prüfungen oder Serverprüfungen), kann dann fehlschlagen. - Nur für
type="color": Bei anderen Eingabetypen wird das Attribut zwar gespiegelt, hat aber keine Wirkung. - Werte sind klein geschrieben und genau festgelegt: Der Standardwert heißt
"limited-srgb", nicht"srgb". Andere Werte führen beim Lesen zum Standardwert zurück. Das Attribut selbst behält aber den gesetzten Text. - Darstellung: Ob P3-Farben wirklich kräftiger aussehen, hängt vom Bildschirm ab. Mit
@media (color-gamut: p3)lässt sich das prüfen.