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.
by Carsten Windler (KW-Commerce GmbH)
by Thomas Bley (Bringmeister GmbH)
by Ingo Walther (Electronic Minds GmbH)
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.
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
Dieser 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 Kiosk ist das PHP Magazin weiterhin im Print-Abonnement erhältlich.
