JavaScript Color-Translator

Tranlate RGB to HSV/HSL and vice versa dynamically via JavaScript!

Eine kleine Demo: Als Beispiel für einen Farbverlauf habe ich hier die relativ dunkle Farbe "#5352A0" gewählt. Diese verläuft in 5px-Schritten. Dabei wird bei jedem Schritt die Sättigung auf 98% (S-Faktor=0.98) erniedrigt und der Grauwert auf 102% (V-Faktor=1.02) erhöht. (Beide Mal ausgehend vom Urpsrungswert). Als Änderungfarbraum habe ich HSV gewählt.


S-Faktor=1.02, V-Faktor=0.98



Und hier ein paar weitere Beispielverläufe mit anderen Sättigungs- und Graufaktoren.

S-Faktor=0.98, V-Faktor=1.0


S-Faktor=1.0, V-Faktor=0.98



Jetzt zeige ich noch zwei Verläufe, die, ausgehend vom Farbton von "#5352A0", den Sättigungswert bzw. den Grauwert in 10%-Schritten verringern. Im ersten Verlauf nähern wir uns also immer mehr der Farbe Weiß an und im zweiten immer mehr der Farbe Schwarz.

S-Value=[1.0, 0.9, ... 0.1, 0.0], V-Value=1.0


S-Value=1.0, V-Value=[1.0, 0.9, ... 0.1, 0.0]



Zu guter letzt noch der Farbkreis ausgehend von unserer gewählten Farbe "#5352A0". Farbkreis bedeutet, dass lediglich der Farbton um eine bestimmte Gradzahl (h-Width=5) erhöht wird. Die Sättigungs- und Grauwerte bleiben konstant. - Zu sehen sind drei Farbkreise, wobei ich bei den letzten Beiden mit den Sättiguns- und Grauwerten ein wenig gespielt habe.

H-Gradänderung=5, S-Value=1.0, V-Value=1.0


H-Gradänderung=5, S-Value=0.3, V-Value=0.7


H-Gradänderung=5, S-Value=0.7, V-Value=0.3
zurück