© saicle/Shutterstock.com
PHP Magazin
Mit einer Farbbibliothek Farben berechnen und manipulieren

Node.js-Module: Color

Die Farbgestaltung einer Webseite ist keine einfache Angelegenheit. Die Wirkung einzelner Farben sollte nicht unterschätzt werden. Es gibt Farbbibliotheken, die mithilfe einiger Funktionen die Komplexität bei der Arbeit mit Farben reduzieren und so Ihre Arbeit erleichtern können. Doch ist der Einsatz einer solchen Bibliothek wirklich immer sinnvoll?

Sebastian Springer


In der Webentwicklung haben Sie immer wieder mit Farben zu tun. Das gilt nicht nur für die Frontend-Entwicklung, obwohl der Fokus hier liegt. Auch serverseitig mit Node.js kommen Sie immer wieder in Berührung mit Farben. Sei es, weil Sie sie als Bestandteil eines Konfigurationsobjekts an ein Frontend ausliefern oder die Kommandozeile einfärben wollen, um den Benutzer besser leiten zu können. Nutzen Sie das RGB-Farbmodell, haben Sie die Auswahl aus 16 777 216 Farben, die sich aus einer Kombination aus Werten für rot, grün und blau zusammensetzen. Für einige Farben existieren Namen, über die Sie direkt auf sie zugreifen können. Andere können Sie nur über ihren Farbwert ansprechen. Diese Vielfalt an Möglichkeiten hat jedoch nicht nur Vorteile. Haben Sie beispielsweise die Auswahl aus nur 16 Farben, fällt die Entscheidung wesentlich leichter. Glücklicherweise gibt es Bibliotheken, die die Komplexität bei der Arbeit mit Farben reduzieren und Ihnen eine Reihe von Funktionen zur Verfügung stellen, mit deren Hilfe Sie mit Farben arbeiten können.

Farben in den unterschiedlichen Umgebungen

Bevor wir auf die eigentliche Arbeit mit Farben eingehen, kümmern wir uns zunächst um eine Testumgebung, mit der Sie die Auswirkungen der Farbauswahl direkt sehen können. Die im Folgenden vorgestellten Bibliotheken funktionieren sowohl clientseitig im Browser als auch serverseitig mit Node.js. Im Browser ist die Arbeit mit solchen Bibliotheken einfach. Sie benötigen lediglich ein HTML-Element, dessen Hintergrundfarbe Sie beeinflussen können – schon lässt sich die Auswirkung von verschiedenen Funktionsaufrufen testen. In Listing 1 sehen Sie eine einfache Testumgebung, bei der der erforderliche CSS-Code direkt in die HTML-Struktur integriert ist. Die JavaScript-Datei wird separat eingebunden, da die Farbbibliothek, die wir noch einbinden werden, vor ihrer Verwendung gebaut werden muss. Der Quellcode in Listing 1 sorgt dafür, dass ein 200 x 200 Pixel großes Quadrat mit grüner Hintergrundfarbe dargestellt wird.

Listing 1

Colors div { margin: 50px auto; height: 200px; width: 200px; border: 1px solid black; }

Für den Build-Prozess des Beispiels kommt webpack zum Einsatz. Dieses Werkzeug können Sie mit dem Kommando npm install webpack-cli installieren. Anschließend legen Sie eine Datei ...

PHP Magazin
Mit einer Farbbibliothek Farben berechnen und manipulieren

Node.js-Module: Color

Die Farbgestaltung einer Webseite ist keine einfache Angelegenheit. Die Wirkung einzelner Farben sollte nicht unterschätzt werden. Es gibt Farbbibliotheken, die mithilfe einiger Funktionen die Komplexität bei der Arbeit mit Farben reduzieren und so Ihre Arbeit erleichtern können. Doch ist der Einsatz einer solchen Bibliothek wirklich immer sinnvoll?

Sebastian Springer


In der Webentwicklung haben Sie immer wieder mit Farben zu tun. Das gilt nicht nur für die Frontend-Entwicklung, obwohl der Fokus hier liegt. Auch serverseitig mit Node.js kommen Sie immer wieder in Berührung mit Farben. Sei es, weil Sie sie als Bestandteil eines Konfigurationsobjekts an ein Frontend ausliefern oder die Kommandozeile einfärben wollen, um den Benutzer besser leiten zu können. Nutzen Sie das RGB-Farbmodell, haben Sie die Auswahl aus 16 777 216 Farben, die sich aus einer Kombination aus Werten für rot, grün und blau zusammensetzen. Für einige Farben existieren Namen, über die Sie direkt auf sie zugreifen können. Andere können Sie nur über ihren Farbwert ansprechen. Diese Vielfalt an Möglichkeiten hat jedoch nicht nur Vorteile. Haben Sie beispielsweise die Auswahl aus nur 16 Farben, fällt die Entscheidung wesentlich leichter. Glücklicherweise gibt es Bibliotheken, die die Komplexität bei der Arbeit mit Farben reduzieren und Ihnen eine Reihe von Funktionen zur Verfügung stellen, mit deren Hilfe Sie mit Farben arbeiten können.

Farben in den unterschiedlichen Umgebungen

Bevor wir auf die eigentliche Arbeit mit Farben eingehen, kümmern wir uns zunächst um eine Testumgebung, mit der Sie die Auswirkungen der Farbauswahl direkt sehen können. Die im Folgenden vorgestellten Bibliotheken funktionieren sowohl clientseitig im Browser als auch serverseitig mit Node.js. Im Browser ist die Arbeit mit solchen Bibliotheken einfach. Sie benötigen lediglich ein HTML-Element, dessen Hintergrundfarbe Sie beeinflussen können – schon lässt sich die Auswirkung von verschiedenen Funktionsaufrufen testen. In Listing 1 sehen Sie eine einfache Testumgebung, bei der der erforderliche CSS-Code direkt in die HTML-Struktur integriert ist. Die JavaScript-Datei wird separat eingebunden, da die Farbbibliothek, die wir noch einbinden werden, vor ihrer Verwendung gebaut werden muss. Der Quellcode in Listing 1 sorgt dafür, dass ein 200 x 200 Pixel großes Quadrat mit grüner Hintergrundfarbe dargestellt wird.

Listing 1

Colors div { margin: 50px auto; height: 200px; width: 200px; border: 1px solid black; }

Für den Build-Prozess des Beispiels kommt webpack zum Einsatz. Dieses Werkzeug können Sie mit dem Kommando npm install webpack-cli installieren. Anschließend legen Sie eine Datei ...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang