JavaScript-Farb-Tool

Für alle, die es gerne bunt mögen! Nützliche Beispiele, um Farben per JavaScript zu konvertieren und zu manipulieren, die Deckkraft zu verändern oder die Helligkeit zu berechnen.

Über clientseitige Farbberechnungen lassen sich im Web chice Animations-Effekte umsetzen. Inhalte können sehr agil und flexibel aufgebaut werden, da der User jederzeit auf Events Displayeinstellungen und Systemeinstellungen wie Darkmode uvm. einstellen kann.

Die Konvertierung zwischen HEX und RGB und RGBa findet dazu häufig auch im CMS-Backend-Bereich für Redakteure Anwendung, um User-Eingaben zu prüfen und ggf. umzuwandeln, damit diese in einem einheitlichen Format gespeichert werden können.

Angenommen, in einem CMS-System können Redakteure Hintergrundfarben individuell vergeben. Ließe sich die Helligkeit der ausgewählten Hintergrundfarbe mit dem Farb-Tool einfach bestimmen, um den Text je nach Hintergrund in Schwarz oder in Weiß anzuzeigen, würde es dem User der Website dennoch eine optimale Lesbarkeit bieten.

Dasselbe lässt sich dann natürlich auch anders herum lösen, sodass aufgrund einer Text-Farbe die Farbe des Hintergrundes dynamisch berechnet wird. Weitere Funktionen wie die Sortierung von Elementen anhand der Farbe und vieles mehr ließe sich darüber realisieren.

Im nächsten Beispiel lässt sich abhängig vom Mauszeiger des Users die Deckkraft einer Hintergrund-Farbe verändern. Hierbei wird die Transparenz jedoch nicht auf den Inhalt des Elements vererbt, sodass Bilder und Texte dabei nicht ausgewaschen wirken, wie es häufig der Fall bei der Verwendung der CSS-Property "opacity" ist. Das gesamte Element behält dabei seine Deckkraft und lediglich die Hintergrundfarbe wird transparent.