kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

HTML Color Picker mit JavaScript auslesen

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.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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);

Beispiel anzeigen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

1 Kommentar

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.