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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
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, Grafik sowie Frontend- und WordPress-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.
Seminare mit Jonas Hellwig anzeigen – Jonas Hellwig bei Xing
Feedback & Ergänzungen – 1 Kommentar
Kommentar zu dieser Seite
Wir veröffentlichen regelmäßig neue Inhalte zum den Themen Design und Development.
Du willst nichts verpassen? Dann abonniere jetzt unseren Newsletter, folge uns auf Facebook und Twitter oder abonniere einen unserer RSS-Feeds.
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
[…] 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. […]