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 Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
[…] 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. […]