Diese Woche möchte ich euch einige nützliche Funktionen vorstellen, mit denen wir diverse Farb-Operationen vornehmen können. Dabei geht es um Verläufe, Farbräume und verschiedene Berechnungen.

Wie wir Farben im Browser benutzen

Im Browser können wir über CSS Styles oder das Style-Attribut die Farbe eines Elements (Hintergrund-, Rand- und Schriftfarbe) bestimmen. Das geht mit Hilfe von Farbnamen oder verschiedenen Angaben wie z.B. HEX, RGB, RGBA, HSL und HSLA. Farbnamen (wie z.B. „red“, „blue“, „black“, …) helfen uns in der regel nicht weiter, es gibt nämlich nur etwa 140 definierte Farben.
Übrigens: RGBA, HSL und HSLA sind erst ab CSS3 verfügbar.

Hier seht ihr die Syntax der verschiedenen Optionen:

Farbnamen
red, blue, green, ...
Hex
#000000 bis #ffffff
#000 bis #fff
RGB
rgb(0, 0, 0) bis rgb(255, 255, 255)
RGBA
rgba(0, 0, 0, 0) bis rgba(255, 255, 255, 1)
HSL
hsl(0, 0%, 0%) bis hsl(360, 100%, 100%)
HSLA
hsla(0, 0%, 0%, 0) bis hsla(360, 100%, 100%, 1)

Bei HEX und RGB ist die Reihenfolge „Rot – Grün – Blau“, dabei werden die Werte von 00-FF bzw. 0-255 angegeben. Die HSL Option verwendet den HSL-Farbraum: die Farben werden den Koordinaten eines Kegels (oder Zylinders) zugeordnet. Die drei Parameter funktionieren folgendermaßen:

h = hue = Farbwert (0-360°)
s = saturation = Farbsättigung (0-100%)
l = lightness = Helligkeit (0-100%)

Der Farbwert geht von 0 – 360, da Kegel und Zylinder auf einem Kreis basieren (= 360°):
Ich denke zur Sättigung und Helligkeit muss ich nichts erklären… Möchtet ihr allerdings mehr lernen, schaut euch den Wikipedia Artikel an.

Von Dezimal nach Hexadezimal in Javascript

Zur Vollständigkeit halber möchte ich euch eine sehr einfache Möglichkeit zeigen, wie wir in Javascript Werte von Dezimal nach Hexadezimal (und umgekehrt) bringen:

// From 255 to FF
var dec = 255,
    hex = 'FF';

// Results in "FF" (string)
dec.toString(16);

// Results in 255 (int)
parseInt(hex, 16);

Von Dezimal nach Hexadezimal in PHP

In PHP ist diese Konvertierung noch etwas einfacher, da wir vorgefertigte Funktionen haben:

// From 255 to FF
$dec = 255;
$hex = 'FF';

// Will return "FF".
echo dechex($dec);

// Will return "255".
echo hexdec($hex);

Wozu könnte man sowas gebrauchen?

Dazu gibt es ein ganz simples Beispiel: Der ein oder andere von euch hat bestimmt schon mal Prozentbalken oder sonstige GUI Elemente erstellt die sich z.B. von Grün nach Rot verfärben. Und natürlich dürftet ihr auch eine entsprechende Funktion entwickelt haben, die euch -je nach Prozentsatz- einen Farbwert zurückliefert. Das könnte in etwa so aussehen:

// Function to calculate a HEX value from red to green.
percent_to_rgb = function (percent) {
   var r = ('0' + parseInt(255 - percent * 2.55).toString(16)).substr(-2),
       g = ('0' + parseInt(percent * 2.55).toString(16)).substr(-2),
       b = '00';

   return '#' + r + g + b;
};

Das „Problem“ an der Sache: Das Ergebnis ist nicht besonders schön anzusehen…Der mittlere Bereich ist nur sehr schwierig auszuwerten… Es handelt sich um verschiedene bräunliche Töne. Ein Verlauf von Rot über Gelb nach Grün wäre sehr viel schöner, oder? Wir könnten also HSL verwenden:

// Function to calculate a HSL value from red oder yellow to green.
percent_to_hsl = function (percent) {
   var hue = percent * 1.2;

   return 'hsl(' + hue +  ', 100%, 50%)';
};

RGBA, HSL und HSLA erst ab CSS3… Auftritt Javascript!

Die Überschrift sagt es eigentlich schon – die drei genannten Funktionen gibt es leider erst ab CSS3. Bedeutet für uns: wir brauchen ggf. Fallbacks… Und da kommt Javascript ins Spiel. Während wir die Transparenz noch relativ einfach abhandeln können (opacity:0.5, filter:alpha(opacity=50), …) geht das mit HSL nicht. Da wird ein wenig was an Berechnung nötig:

// Javascript Function to calculate a RGB value from HSL.
// Found on http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
hsl_to_rgb = function (hue, saturation, lightness) {
   var r, g, b;
   
   if (saturation == 0) {
      r = g = b = lightness; // achromatic
   } else {
      var q = lightness < 0.5 ? 
                 lightness * (1 + saturation) : 
                 lightness + saturation - lightness * saturation,
          p = 2 * lightness - q;
      r = hue_to_rgb(p, q, hue + 1 / 3);
      g = hue_to_rgb(p, q, hue);
      b = hue_to_rgb(p, q, hue - 1 / 3);
   }
   
   return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
};

// Refactored "hue_to_rgb" from the original code.
hue_to_rgb = function (p, q, t) {
   if (t < 0) t += 1;
   if (t > 1) t -= 1;
   if (t < 1 / 6) return p + (q - p) * 6 * t;
   if (t < 1 / 2) return q;
   if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
   return p;
};

Mit Hilfe dieser beiden Funktionen können wir percent_to_hsl von vorhin etwas umbauen:

// Function to calculate a HSL value from red oder yellow to green.
percent_to_hsl = function (percent) {
   var hue = percent * 1.2 / 360,
       rgb = hsl_to_rgb(hue, 1, .5);
   
   return 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ')';

   // Or:
   var r = ('0' + parseInt(rgb[0]).toString(16)).substr(-2),
       g = ('0' + parseInt(rgb[1]).toString(16)).substr(-2),
       b = ('0' + parseInt(rgb[2]).toString(16)).substr(-2);

   return '#' + r + g + b;
};

Und schon haben wir eine Funktion, die uns mit schönen und hellen Farben erfreut!

randomColor

Darüber hinaus habe ich vor einigen Tagen eine interessante Bibliothek gefunden um "schöne" zufällige Farben zu generieren. Das ganze nennt sich "randomColor" und ist von David Merfield entwickelt worden.
Der Quellcode ist außerdem auf github zu finden und bietet auch einige Beispiele. Das Skript ist durchaus den ein- oder anderen Blick Wert!

Und damit möchte ich mich für diese Woche von euch verabschieden und wünsche allen Leserinnen und Lesern Happy Coding!