JavaScript

Mit einer Farbbibliothek Farben berechnen und manipulieren

Node.js-Module: Bibliothek color für den Umgang mit Farben
Keine Kommentare

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?

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Colors</title>
    <style>
      div {
        margin: 50px auto;
        height: 200px;
        width: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script src="dist/main.js"></script>
  </body>
</html>

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 mit dem Namen frontend.js an und integrieren den folgenden Quellcode:

document.querySelector('div').style.backgroundColor = 'green';

Führen Sie anschließend das Kommando npx webpack frontend.js aus, wird der JavaScript-Quellcode für das Frontend gebaut und optimiert. Sie können die Datei, die den HTML-Quellcode enthält, direkt im Browser öffnen.

International PHP Conference

Entwickler – das verlorene Handbuch

by Stefan Priebsch (thePHP.cc)

My browser does what?

by Joel Lord (Red Hat OpenShift)

JavaScript Days 2019

Einführung in Node.js

mit Golo Roden (the native web)

Concepts of the modern Web

mit Sven Kölpin (OPEN KNOWLEDGE)


Serverseitig mit Node.js ist das Setup etwas einfacher, da Sie keinen separaten Build-Prozess aufsetzen müssen. Allerdings können Sie unter Node.js nicht einfach einen div-Container auf der Konsole rendern, sondern müssen sich auf die Färbung der Konsolenausgabe beschränken. Hier können Sie aus mehreren Ansätzen wählen. Die unflexiblere Variante, die ohne eine zusätzliche Bibliothek auskommt setzt auf die Verwendung von Steuerzeichen wie beispielsweise \x1b[32m für grüne Schriftfarbe. Alternativ dazu können Sie Bibliotheken wie Chalk einsetzen, die Ihnen auch hier die Arbeit erleichtern. In Listing 2 finden Sie je ein Beispiel für die Verwendung von Steuerzeichen und den Einsatz von Chalk. Damit der Beispielcode funktioniert, müssen Sie zunächst Chalk mit dem Kommando npm install chalk installieren.

const chalk = require('chalk');

const green = '\x1b[32m';
const reset = '\x1b[0m';

console.log(`${green}Green String${reset}`);
console.log('Default color');
console.log(chalk.green('Green String'));

Bibliotheken für den Umgang mit Farben

Wie schon erwähnt, ist die Arbeit mit Farbe ein Standardproblem, mit dem viele Entwickler tagtäglich konfrontiert werden. So ist auch die Vielzahl von Lösungen nicht verwunderlich. Beispiele für Pakete, die Sie in Ihre Applikation integrieren können, sind: TinyColor, color oder chroma.js, um nur einige zu nennen. Nun stellt sich die Frage, wie Sie die passende Bibliothek finden. Die einfachste Variante ist Ausprobieren. Bevor Sie sich jedoch in den Quellcode stürzen, sollten Sie einen Blick auf die Paketstatistiken und die Dokumentation werfen. In Abbildung 1 sehen Sie die Downloadstatistiken für die drei erwähnten Pakete von Januar bis Mai 2019. Solche Auswertungen stellt Ihnen die Webseite unter npm-stat.com zur Verfügung.

Abb. 1: Downloadstatistiken (Stand: Mai 2019)

Abb. 1: Downloadstatistiken (Stand: Mai 2019)

Wie sie an diesem Beispiel sehen können, unterscheiden sich die Statistiken pro Projekt deutlich voneinander. Bevor Sie sich anhand der Statistik für eine Lösung entscheiden, sollten Sie zusätzlich prüfen, ob das Projekt noch aktiv weiterentwickelt wird. Der letzte Commit im Repository gibt Aufschluss hierüber. Liegt der letzte Commit über ein Jahr in der Vergangenheit, sollte die Bibliothek mit Vorsicht behandelt werden, da es fraglich ist, ob sie noch aktiv weiterentwickelt wird. Diese Probleme gibt sich bei unserer potenziellen Lösung, dem color-Paket, nicht, sodass Sie es mit dem Kommando npm install color in Ihrem Projekt installieren können.

Das bisherige Beispiel lässt sich mit dem color-Paket ebenfalls erreichen. Der benötigte Quellcode für die Verwendung von color im Frontend sieht so aus:

const Color = require('color');
const green = Color('green').rgb();
document.querySelector('div').style.backgroundColor = green;

Im Backend sieht der Quellcode folgendermaßen aus:

const chalk = require('chalk');
const Color = require('color');

const green = Color('green')
  .rgb()
  .array();

console.log(chalk.rgb(...green)('Green String'));

Zugegebenermaßen ist mit dem Einsatz der color-Bibliothek in einem so einfachen Beispiel nicht viel gewonnen. Seine wahre Stärke spielt die Bibliothek jedoch in aufwendigeren Interaktionen aus. So können Sie beispielsweise Farben manipulieren.

Farbmanipulation mit der color-Bibliothek

Tabelle 1 enthält einen Überblick über die wichtigsten Methoden. Die Auswirkungen dieser Methoden können Sie nun in der Testumgebung am konkreten Beispiel ausprobieren. Am deutlichsten sehen Sie den Effekt, wenn Sie die Farbmanipulation im Frontend an die Interaktion mit Formularelementen wie Buttons oder Slider binden.

 

Methode Beispiel Bedeutung
lighten/darken Color(‚green‘).lighten(0.5) hellt eine Farbe auf bzw. dunkelt sie ab
saturate/desaturate Color(‚green‘).saturate(0.5) manipuliert die Farbsättigung
negate Color(‚green‘).negate() negiert die Farbe
grayscale Color(‚green‘).grayscale() Wandelt die Farbe in Graustufen um

Tabelle 1: Methoden zur Manipulation von Farben

Auslesen von Farbeigenschaften

Neben der Manipulation von Farben, können Sie auch verschiedenste Informationen aus einer Farbe auslesen. Das ist vor allem relevant, wenn Sie die Farbe nicht selbst bestimmen, sondern die Wahl vom Benutzer beispielsweise über einen Colorpicker gemacht wird. Typische Angaben, die Sie hier unter anderem gewinnen können, sind, ob es sich bei einer Farbe um eine helle oder dunkle Farbe handelt und wie hoch der Kontrastwert ist. Tabelle 2 gibt Ihnen einen Überblick über die verfügbaren Methoden.

Methode Beispiel Bedeutung
isLight/isDark Color(‚red‘).isLight() gibt an, ob es sich bei der Farbe um eine helle oder dunkle Farbe handelt
contrast Color(‚red‘).contrast(Color(‚green‘)) gibt den Kontrastwert zwischen zwei Farben an; die Werte reichen von 1 bis 21
hex Color(‚red‘).hex() gibt den Hex-Wert einer Farbe an
hsl/cmyk Color(‚red‘).hsl() wandelt eine Farbangabe in einen anderen Farbraum um
rgbNumber Color(‚red‘).rgbNumber() liefert die Zahlenrepräsentation der RGB-Farbe

Tabelle 2: Informationen über Farben auslesen

Fazit

Wie Sie schon in den Beispielen sehen konnten, ist die Verwendung einer Farbbibliothek für einfache Farbangaben viel zu aufwendig. Geht es jedoch um Berechnungen und Manipulationen, sollten Sie zu einer solchen Lösung greifen. Um beispielsweise in Frontend oder Backend eine möglichst gute Lesbarkeit zu erreichen, können Sie nur Farben mit einem hohen Kontrastwert zulassen. Außerdem können Sie es einem Benutzer erlauben, die Darstellung aufzuhellen oder abzudunkeln. Alle diese Operationen lassen sich auch manuell erreichen, bedeuten jedoch Aufwand. Bibliotheken wie Color stellen Ihnen hierfür einen Satz von Methoden zur Verfügung, die schon tausendfach im Einsatz sind.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -