JavaScripts › Verschiedenes

RGB-Slider

Mischt euch mit drei Schiebereglern jede beliebige Farbe zusammen und zeigt sie als RGB- und Hexadezimalwert an.

Mit diesem Script mischt ihr euch über drei Schieberegler — sogenannte Slider — jede beliebige Bildschirmfarbe zusammen. Ein Regler steht für den Rotanteil, einer für Grün, einer für Blau. Gleichzeitig erscheint der Farbwert in beiden Schreibweisen, die man beim Bauen von Webseiten braucht: dezimal als RGB-Wert und hexadezimal als Code mit Doppelkreuz. Die Vorlage dafür ist die DHTML-Anwendung von Andrew Houser (houserdesign.com), die hier seit 2004 im Archiv liegt; die Neufassung kommt ohne Hintergrundgrafiken aus und lässt sich auch mit der Tastatur und auf dem Handy bedienen.

Zur Bedienung: Zieht an den Reglern, und die Fläche darunter zeigt sofort die gemischte Farbe. Wer einen Wert genau treffen will, tippt ihn in eines der drei Zahlenfelder; wer einen fertigen Farbcode hat, trägt ihn ins Hex-Feld ein und drückt Enter. Ganz unten liegt die Palette mit 216 Farben — ein Klick darauf übernimmt die Farbe in die Regler.

Wissenswertes zum Thema: Bildschirme mischen Farben additiv, also mit Licht statt mit Farbe aus dem Tuschkasten. Alle drei Kanäle auf 0 ergeben Schwarz, alle drei auf dem Maximum ergeben Weiß — genau andersherum als beim Malen. Jeder Kanal kennt 256 Stufen von 0 bis 255, weil er in einem Byte gespeichert wird; zusammen sind das 256 × 256 × 256 und damit 16.777.216 mögliche Farben.

Die hexadezimale Schreibweise ist nichts anderes als dieselbe Zahl im Sechzehnersystem, das neben den Ziffern 0 bis 9 noch die Buchstaben A bis F verwendet. Zwei Stellen reichen dort für Werte von 0 bis 255 — deshalb sind Farbcodes wie #336699 immer sechsstellig: zwei Stellen Rot, zwei Grün, zwei Blau. Die Palette am Ende der Seite zeigt die 216 „websicheren“ Farben, bei denen jeder Kanal nur die Werte 00, 33, 66, 99, CC und FF annimmt. Sie stammt aus der Zeit, als Grafikkarten nur 256 Farben gleichzeitig darstellen konnten und Windows und Mac sich auf diese Schnittmenge einigten. Technisch nötig ist die Beschränkung längst nicht mehr, als übersichtliche Auswahl taugt sie aber immer noch.

Eine große Nachschlagetabelle mit Farbcodes zum Kopieren findet ihr auf unserer Seite Farbcodes in Hexadezimal-Schreibweise. Wie man zwischen zwei Farben weich überblendet, zeigt das Script Farbverlauf. Und wer das Umrechnen zwischen den Zahlensystemen selbst nachvollziehen möchte, findet dafür den Rechner Hexadezimal zu Dezimal. Die Originalfassung von 2004 mit ihren fünf Hintergrundgrafiken liegt weiterhin unter rgb-slider.html im Archiv.

Verschiedenes Baujahr 2004 läuft in deinem Browser

Ein Klick in die Palette übernimmt eine der 216 Standardfarben. Die Regler lassen sich auch mit den Pfeiltasten bewegen.

Script von Andrew Houser

So funktioniert das Script

Das Script hat einen klaren Aufbau: Eine einzige Funktion namens setzen() ist für die gesamte Anzeige zuständig, und alle Bedienelemente — Regler, Zahlenfelder, Hex-Feld und Palette — rufen nur diese eine Funktion mit drei Zahlen auf. Dadurch bleiben alle Anzeigen immer im Gleichklang, egal wo man etwas verstellt. Zum Schluss baut das Script die 216 Farbfelder der Palette und ruft setzen() ein erstes Mal mit der Startfarbe auf.

<input type="range" id="rgb-rot" min="0" max="255" value="51">

Die Regler sind reines HTML: type="range" macht aus einem Eingabefeld einen Schieberegler. min und max geben den Bereich vor, hier die 256 Stufen eines Farbkanals von 0 bis 255. Früher musste man so etwas mühsam mit Grafiken und Mausereignissen nachbauen — genau das tat die Originalfassung dieses Scripts. Heute übernimmt das der Browser, samt Bedienung per Pfeiltasten und per Finger auf dem Handy.

function zweiStellen(zahl) {
  return zahl.toString(16).toUpperCase().padStart(2, "0");
}

Das ist die Umrechnung ins Sechzehnersystem. toString(16) wandelt eine Zahl in eine Zeichenkette zur Basis 16 um — aus 153 wird so 99, aus 255 wird ff. toUpperCase() macht daraus Großbuchstaben, wie sie bei Farbcodes üblich sind. Wichtig ist die letzte Anweisung: padStart(2, "0") füllt kurze Ergebnisse links mit einer Null auf, denn Werte unter 16 ergeben nur eine Stelle. Ohne diesen Schritt würde aus Rot 0, Grün 0, Blau 10 der unbrauchbare Code #00a statt #00000A.

function begrenzen(zahl) {
  if (isNaN(zahl)) {
    return 0;
  }
  return Math.min(255, Math.max(0, Math.round(zahl)));
}

Diese Funktion sorgt dafür, dass nie ein unmöglicher Farbwert weitergereicht wird. isNaN() fängt den Fall ab, dass in einem Zahlenfeld gar keine Zahl steht. Die Verschachtelung darunter ist ein verbreiteter Kniff: Math.max(0, wert) hebt alles Negative auf 0 an, und Math.min(255, …) deckelt alles darüber bei 255. Math.round() rundet zusätzlich auf ganze Zahlen, weil es halbe Farbstufen nicht gibt.

const hex = "#" + zweiStellen(r) + zweiStellen(g) + zweiStellen(b);
rot.value = r;
rotZahl.value = r;
hexFeld.value = hex;
vorschau.style.background = hex;

Der Kern von setzen(): Aus den drei Zahlen entsteht der Farbcode, und danach werden alle Anzeigen damit gefüttert. Auch die Bedienelemente selbst bekommen den Wert zugewiesen — verschiebt ihr den Regler, wandert die Zahl ins Zahlenfeld und umgekehrt. vorschau.style.background greift direkt auf die CSS-Eigenschaft des Elements zu; alles, was in einem Stylesheet stehen könnte, lässt sich auf diesem Weg auch aus JavaScript heraus setzen.

const text = hexFeld.value.trim().replace("#", "");
if (!/^[0-9a-fA-F]{6}$/.test(text)) {
  ausgabe.textContent = "Bitte einen sechsstelligen Hex-Wert eintragen, zum Beispiel #336699.";
  return;
}
setzen(parseInt(text.substring(0, 2), 16), …);

Der umgekehrte Weg: aus einem Farbcode wieder drei Zahlen machen. Zuerst fallen Leerzeichen und das Doppelkreuz weg. Dann prüft ein regulärer Ausdruck die Schreibweise — gelesen heißt er: vom Anfang (^) bis zum Ende ($) genau sechs ({6}) Zeichen aus dem Vorrat Ziffern und A bis F. Stimmt das nicht, erscheint eine Meldung statt einer falschen Farbe. Passt es, zerlegt substring() den Code in drei Zweiergruppen, und parseInt(…, 16) liest jede davon als Sechzehnersystem-Zahl ein. Die 16 als zweites Argument ist hier entscheidend — ohne sie würde FF gar nicht erkannt.

stufen.forEach(function (r) {
  stufen.forEach(function (g) {
    stufen.forEach(function (b) {
      const farbe = "#" + r + g + b;
      const feld = document.createElement("button");
      feld.style.background = farbe;

So entsteht die Palette. Drei ineinander verschachtelte Schleifen über die sechs Stufen 00, 33, 66, 99, CC und FF ergeben 6 × 6 × 6 = 216 Kombinationen. Weil die Stufen schon als Text vorliegen, genügt einfaches Aneinanderhängen für den Farbcode. Jedes Feld ist ein <button> und damit ganz nebenbei auch mit der Tabulatortaste erreichbar. Sein eigener Klick-Zuhörer merkt sich die drei Werte und gibt sie beim Anklicken an setzen() weiter.

Zum Anpassen: Die Startfarbe steckt im Aufruf setzen(51, 102, 153) in der letzten Zeile. Eine feinere Palette bekommt ihr, indem ihr die Liste stufen erweitert — bei acht Einträgen sind es allerdings schon 512 Felder, dann sollte auch die Spaltenzahl im <style>-Block angepasst werden. Und wer eine Farbe direkt in die Zwischenablage legen möchte, ergänzt im Klick-Zuhörer der Palette ein navigator.clipboard.writeText(farbe).

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Verschiedenes