HTML Color Picker mit JavaScript auslesen
Von Jonas Der HTML5 Color Picker kann unkompliziert mit JavaScript ausgelesen und der Wert an eine CSS Variable übergeben werden.
Die Formularelemente von HTML5 bieten zahlreichen Möglichkeiten um komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Mit Hilfe des nativen HTML Color Pickers kann beispielsweise ein Farbton ausgewählt werden, der dann wiederum dazu benutzt werden kann in Echtzeit Bereiche umzufärben. Dazu muss der gewählte Farbwert per JavaScript ausgelesen und an eine CSS Variable übergeben werden.
HTML <input type=“color“> auslesen
Die folgende Abbildung zeigt, was erreicht werden soll: Per Klick öffnet sich ein Farbwähler um die passende Farbe einzustellen. Die Farbe sowie der Farbcode in Hexadezimal werden in Echtzeit angezeigt.
Der Aufbau des Beispiels ist sehr simpel. Der <body> wird per CSS grau eingefärbt, wobei dieser Farbton in einer CSS-Variable (--kb-color) gespeichert ist. Zusätzlich befindet sich im HTML-Code ein Formular mit Color Picker (<input type="color">). Wenn hier der Wert verändert wird, liest ein JavaScript die Änderung aus und aktualisiert die CSS-Variable (--kb-color). Zusätzlich wird der Farbwert innerhalb des <span> mit der ID #hex aktualisiert.
<body>
<form>
<label for="kb_selected_color">Bitte Farbe wählen: </label>
<input type="color"id="kb_selected_color">
<span id="hex">(#000000)</span>
</form>
</body>:root {
--kb-color: silver;
}
body {
background: var(--kb-color);
}// Farbe aus ColorPicker auslesen
var theInput = document.getElementById("kb_selected_color");
var theColor = theInput.value;
theInput.addEventListener("input", function() {
// Farcode (Hex) schreiben
document.getElementById("hex").innerHTML = theInput.value;
// Farbvariable schreiben
document.documentElement.style.setProperty('--kb-color',theInput.value);
}, false);Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
[…] HTML Color Picker mit JavaScript auslesen Jonas Hellwig von der Agentur Kulturbanause zeigt dir, inwiefern die Formularelemente von HTML5 dir Möglichkeiten bieten, komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Er zeigt ein konkretes Beispiel, bei dem der native Color Picker genutzt wird, um Bereiche in der gewählten Farbe in Echtzeit umzufärben. […]