Farbverlauf

So funktioniert das Script

Das Script hat drei Bestandteile: eine kleine Hilfsfunktion, die eine Zahl in einen Hexadezimal-Code umrechnet, die eigentliche Farbumrechnung von Farbton nach Rot-Grün-Blau, und eine Schleife, die 360 Streifen zusammenbaut und in die Seite schreibt. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

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

Farben schreibt man in HTML als Hexadezimal-Code, etwa #FF8000. Hexadezimal heißt: gezählt wird nicht bis 10, sondern bis 16, wobei die Ziffern ab 10 als A bis F geschrieben werden. toString(16) übernimmt genau diese Umrechnung. Weil einstellige Ergebnisse (aus 5 wird "5") den Code durcheinanderbringen würden, füllt padStart(2, "0") vorne eine Null auf — aus "5" wird "05". Im Original von 2007 stand hier noch eine handgeschriebene Tabelle mit allen 16 Ziffern; die eingebaute Umrechnung ist kürzer und tut dasselbe.

const winkel = farbton % 360;
const sechstel = Math.floor(winkel / 60);
const f = winkel / 60 - sechstel;

Hier beginnt die Umrechnung vom Farbkreis in RGB-Werte. Der Farbkreis hat 360 Grad und wird in sechs gleich große Abschnitte zu 60 Grad zerlegt — je einer für den Übergang Rot→Gelb, Gelb→Grün, Grün→Cyan und so weiter. sechstel merkt sich, in welchem dieser Abschnitte der Farbton liegt, und f ist der Bruchteil dazu: 0 am Anfang des Abschnitts, knapp 1 am Ende. Das Prozentzeichen % ist übrigens kein Prozentrechnen, sondern der Rest einer Division — so bleibt der Winkel immer im Bereich 0 bis 359.

let r = helligkeit, g = t, b = p;
if (sechstel === 1) { r = q; g = helligkeit; b = p; }
if (sechstel === 2) { r = p; g = helligkeit; b = t; }

Für jeden der sechs Abschnitte steht fest, welcher Farbkanal auf voller Stärke liegt, welcher gerade ansteigt und welcher am Boden bleibt. Im ersten Abschnitt (Rot nach Gelb) ist Rot voll aufgedreht, Grün steigt mit t an und Blau bleibt bei p. Weil das Script mit Sättigung 1 und Helligkeit 1 arbeitet, ist p immer 0 und die Farben sind maximal satt. Am Ende werden die drei Werte mit Math.floor(… * 255) auf den in HTML üblichen Bereich 0 bis 255 gebracht.

for (let grad = 0; grad < 360; grad++) {
  const rgb = hsv2rgb(grad, 1, 1);
  const farbe = "#" + hexwert(rgb[0]) + hexwert(rgb[1]) + hexwert(rgb[2]);
  streifen += '<div style="background-color: ' + farbe + '; height: ' + hoehe + 'px;"></div>';
}

Das ist das Herz des Scripts: Für jeden ganzen Grad des Farbkreises wird eine Farbe berechnet, in einen Hex-Code verwandelt und als kleiner <div> an eine Textkette angehängt. Erst ganz am Ende landet die fertige Kette per innerHTML in der Seite. Das ist deutlich schneller, als 360-mal einzeln ins Dokument zu schreiben — und ersetzt das document.write des Originals, das auf modernen Seiten den kompletten Inhalt überschreiben würde, wenn es nach dem Laden aufgerufen wird.

buehne.innerHTML = '<div style="position: absolute; top: 0; ' + seite +
  ': 0; width: ' + breite + 'px; max-width: 100%;">' + streifen + '</div>';

Die 360 Streifen kommen in einen Rahmen, der per position: absolute aus dem normalen Textfluss genommen und an den oberen linken oder rechten Rand gesetzt wird. Die Variable seite enthält dafür entweder "left" oder "right" — das ist der ganze Unterschied zwischen den beiden Ausrichtungen.

Zum Anpassen: Die Streifenhöhe und die Breite ändert ihr im eingebauten Code oben in den Konstanten. Wollt ihr keinen vollen Regenbogen, sondern nur einen Ausschnitt — etwa den Bereich von Blau nach Violett —, ändert die Grenzen der Schleife, zum Beispiel for (let grad = 240; grad < 300; grad++). Und wer blassere Farben möchte, ruft hsv2rgb(grad, 0.4, 1) auf: Der zweite Wert ist die Sättigung, der dritte die Helligkeit.