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.

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

Geschrieben von Jonas

Benutzerbild

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.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. WP-News: Fluch und Segen von Avada & Rückblick auf’s WCEU 2019
    schrieb am 28.06.2019 um 10:00 Uhr:

    […] 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. […]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →