JavaScript Color-Translator

Tranlate RGB to HSV/HSL and vice versa dynamically via JavaScript!
Ein Wort zur Performance: Die Umrechnung einer RGB-Farbe (in Hex-Code oder als Integer-Angabe) in die Farbräume HSV bzw. HSL unterliegt einem "einfachen" Algorithmus, ist also nicht rechenintensiv. Trotzdem kann es, je nach Intensität der Nutzung dieses Algorithmus, zu Verzögerungen im Aufbau der Seite kommen.

Als Beispiel möchte ich den Farbverlauf als Farbkreis nutzen. Der Farbkreis besteht an sich aus 360 Farbtönen (ein runder Kreis mißt ja immer 360 Grad :-)). Wird für jeden Farbton/Grad genau eine Farbe berechnet, sieht der Farbkreis ziemlich schick aus. Allerdings benötigt es auch für jeden Farbton eine Berechnung in den HSV/HSL-Farbraum, der Änderung des Farbtones und der Rückberechnung in den RGB-Farbraum. Also 3 Schritte - und das 360 Mal.

Wie man auf der Demo-Seite erkennen kann, benötigt Ihr PC bereits bei der Erstellung dreier Farbverläufte und dreier Farbkreise, bei denen nur für jeden 5. Farbton/Grad eine entsprechende Farbe berechnet wird, eine merkliche Verzögerung.

Um der ständigen (Neu-) Berechnung entgegenzuwirken, rate ich dazu, die berechneten Farben (Farbverläufe, Farbkreise, Komplementärfarben,...) zu speichern (wenn sie nicht so dynamisch sind, dass sie immer neu berechnet werden müssen). Ich habe dies einmal für die Demoseite getan. Das Resultat der Performance-Steigerung können Sie sich anhand der statisch gespeicherten Seite selbst anschauen. Die statische Datei ist zwar 48 kb statt der ursprünglichen 10 kb groß, dennoch lädt die Seite (mit einem entsprechenden Downstream) wesentlich schneller.
zurück