Zweite Farbe automatisch berechnen lassen

Für ein Projekt war ich auf der Suche entweder per PHP oder per Javascript eine zweite Farbe automatisch errechnen zu lassen. Sprich, wir geben eine Farbe in eine Funktion und erhalten ein Pendant entweder dünkler oder heller...

Meine Suche hat sich gelohnt und darum möchte ich euch hier diesen Code Snipped nicht vorenthalten. Im Forum hier konnte das Thema vor einigen Jahren bereits durch eine kleine Funktion gelöst werden.

Das Script / der Aufruf

Das Script lässt sich einfach mit den beiden Variablen lighterColor und darkerColor aufrufen:

var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};  

Als Parameter werden die Basisfarbe sowie ein Verdunkelungs- / Aufhellungs- Wert mitgegeben... Nach einbinden des Scripts kann also zB. so eine dunklere Farbe zur aktuellen berechnet werden:

So ist es nun möglich mit Hilfe von Javascript / jQuery ein DIV mit einem Farbverlauf zu füllen. In einem von mir genutzten Anwendungszenario habe ich eine DB Tabelle mit verschiedenen Teams diese haben jeweils eine Farbe zugewiesen. Damit das ganze dann im Frontent nicht so "platt" daherkommt konnte ich durch die unten aufgeführte Funktion den Gradient per JS generieren.

function createGradient(startcolor){
    	var endColor = darkerColor(startcolor, .1);
    	// console.log(endColor);
    	var gradient = "linear-gradient(to right, "+startcolor+" 0%,"+endColor+" 100%)";
    	$(".nx-TeamColorBar").css({
				"background": gradient,
	});
}

Das Ergebnis

js Farbverlauf Beispiel
Im Beispiel links sehen wir den Datenbankeintrag inkl. der Kopfzeile mit dem automatisch erstellten Farbverlauf. Der Vorteil dieser Lösung liegt ganz klar in der Flexibilität. Anders als wenn man einfach einen Farbverlauf per Bild einfügt kann durch eine Änderung der Primärfarbe automatisch der komplette Farbverlauf angepasst werden.

Testing

0%
100%

Hier wird der Gradient generiert.

 
Wie ihr sehen könnt funktioniert das ganze relativ gut bei kleinen Werten - ab ca. 50% reisst das ganze dann einfach in Weiss oder Schwarz aus. Es gibt Stimmen im Netz die behaupten das bei dem hier verwendeten Script falsch gerechnet wurde (der Fakt das ab 50% Change der Ausriss passiert untermauert das) - Es gibt da also noch alternative Ansätze welche ich vielleicht zu einem späteren Zeitpunkt anschauen und euch präsentieren werde.

Related Links

Friday, 27 July 2018 Posted in Javascript, CSS (Cascading Stylesheets), HTML

Leave a comment

You are commenting as guest.

Kontakt

Marco Rensch
Glashüttenweg 30
8887 Mels
This email address is being protected from spambots. You need JavaScript enabled to view it.

Technik

Webseite basierend auf Joomla!
Template erstellt mit uikit
Symbolbilder von unsplash.com