Udpate: ACHTUNG! Das Review gilt nur bis zur Version 2.8. Leider hat die Version 3.x so viele Funktionseinbußen mit sich gebracht, dass ColorZilla definitiv KEINE Empfehlung mehr erhalten würde.
ColorZilla ist ein kostenloses Firefox Add-on und für jeden geeignet, der Farbangaben innerhalb eines Browserfensters benötigt. Da auch Fotos über STRG+O in den Firefox geladen werden können, ist in ihnen ebenfalls eine pixelgenaue Bestimmung einzelner Farben möglich. Mit einer Pipette werden flugs eine oder mehrere Farbinformationen gesammelt.
Im Palettenbrowser können Farben gemischt und als Favoriten gespeichert werden. Mit dem Webpage DOM Color Analyzer werden per Klick alle DOM Farben der Webseite, versehen mit weiteren Informationen, angezeigt. Die Statusleiste liefert fortlaufend zuvor konfigurierbare Werte.
Installation
Wie ein Firefox Add-on installiert wird, war bereits Thema dieses Tutorials auf Software-Lupe.de und sollte dort hinreichend erklärt sein. Die Installation der ColorZilla Version 2.5.3 (direkt von der Website des Herstellers) verlief problemlos.
Nach dem Neustart des Browsers wird in dessen Statusleiste ganz links ein neues Icon, das eine Pipette und einen Pfeil für ein Aufklappmenü zeigt, sichtbar.
Dieser Ort, eine optional einschaltbare Kontextmenüansicht sowie ein Tastenkürzel sind die einzigen Möglichkeiten, das Programm zu starten, bzw. zu konfigurieren. Über die Menüleiste des Firefox-Browsers Extras -> Add-ons -> (Kartenreiter) Erweiterungen -> ColorZilla -> Einstellungen erscheint lediglich ein kurzer Hilfstext.
Einstellungen
Ein Klick mit der linken Maustaste auf den Pfeil neben dem Icon, oder auch ein Klick mit der rechten Maustaste auf das Icon selbst, öffnet das Drop-up-Menü des Add-ons. Unter Optionen stelle ich als Erstes Rahmen um Elemente zeigen ab, da es mich in der Praxis öfters gestört, bzw. daran gehindert hat, bestimmte Pixel exakt zu treffen.
Unter ändere Tastenkürzel könnte ich den Standard Shortcut SHIFT und ESC neu definieren, was unter Umständen hilfreich sein kann, falls dieser schon von einem anderen Programm genutzt wird.
Wird Cursor nicht ändern aktiviert, verändert sich das Fadenkreuz der Pipette in einen normalen Mauszeiger. Kontextmenü anzeigen bestimmt, ob bei einem Klick mit der rechten Maustaste innerhalb des Browserfensters im Kontextmenü ein Menüpunkt für ColorZilla erscheint. Panoramaansicht einschalten soll laut Beschreibung nur im Zoom-Modus funktionieren, ich konnte dieses Feature jedoch auch dort nicht entdecken.
HEX-Werte in Kleinbuchstaben gibt den hexadezimalen Farbwert in Kleinbuchstaben wieder. Automatisch kopieren ist sehr nützlich und in dessen Kontextmenü ist auswählbar, in welcher Form der Farbwert standardmäßig kopiert wird. Natürlich ist diese Funktion ebenso komplett deaktivierbar.
Der letzte Punkt der Optionen, das Statusleistenformat, verdient eine nähere Betrachtung. Probieren Sie die Werte einfach aus, und stellen Sie es sich Ihren Bedürfnissen entsprechend zusammen. Was Sie dort eintragen, wird fortlaufend in der Statusleiste angezeigt und aktualisiert, wenn Sie mit der Pipette über das Browserfenster fahren. So lassen sich nicht nur Farbwerte, sondern auch TAG, Klasse und ID eines Elementes, die Größe, Entfernungen, Pfade und Dateinamen einblenden.
Funktionen
Ein Klick mit der linken Maustaste auf das Icon oder der Shortcut SHIFT und ESC startet den Colorpicker-Modus. Der Mauszeiger verwandelt sich standardmäßig in ein Fadenkreuz (siehe Kapitel Einstellungen) und während ich damit das Browserfenster abtaste, erscheinen fortlaufend Informationen in der Statusleiste.
Außerdem zeigt die Farbe des Icons jederzeit exakt die Farbe des gerade anvisierten Pixels an. Ein Klick auf dieses Pixel speichert den Farbwert.
Tipp: Halte ich die Shifttaste gedrückt, kann ich mit mehreren Klicks in einem Durchgang entsprechend viele Farben speichern. Wo finde ich diese nun wieder? Ein Doppelklick auf das Icon (optional Drop-up-Menü -> Palette Browser oder Colorpicker) öffnet die Colorpalette. Deren Kartenreiter Colorpicker präsentiert die zuletzt aufgenommene Farbe und unter dem Kartenreiter Palette -> Auswahl History erscheinen alle zuvor mit SHIFT und Mausklick selektierten.
Der Kartenreiter Colorpicker bietet neben der bereits angesprochenen Anzeige der aufgenommenen Farbe die Möglichkeit, neue Farben zu bestimmen. Ein kleines Fenster stellt die aufgenommene sowie die neue vergleichbar gegenüber. Außerdem lassen sich hier viele unterschiedliche Farbräume ablesen oder sind einstellbar: HSV, RGB, Lab, CMYK, Hex und hsl. Eine getroffene Auswahl kann mit einem Namen versehen und als Favorit gespeichert werden.
Der Kartenreiter Palette listet gängige Farbpaletten, Favoriten und die History. Weitere Paletten können über die Website des Entwicklers bezogen werden. Leider lassen sich die Favoriten oder die per Shift + Klick in der History gesammelten Werte nicht als eigene Paletten abspeichern. Ein kleiner Umweg hilft, diese Informationen dennoch zu sichern: der Klick auf “permalink”. Dies generiert eine eigene Website auf colorzilla.com, deren Link alle HEX-Zahlen aufweist.
Hiermit ist es möglich, die DOM-Farben einer beliebigen Website in einer Zusammenfassung zu betrachten. Bilder, Flash oder sonstige nicht-DOM Objekte werden dabei nicht ausgewertet. Gelistet sind also ausschließlich alle in HTML oder CSS einsetzten Farben. Das Analayseergebnis kann als eigene Palette gespeichert werden. Ein schönes Instrument, falls man beispielsweise die Farben einer anderen Website einbinden will oder diese für eine zu erstellende Grafik benötigt. Einzelne Farben können gelöscht werden.
Hält man den Mauszeiger über einen der Farbkästen, werden die passenden Stellen auf der Webseite rot umrandet und ein kleines Hinweisfenster verrät den HEX- sowie RGB-Wert. Ein Klick wiederum springt zu einem großen Farbbalken, unterhalb dessen sämtliche Elemente (CSS) gelistet sind, die diese Farbe beinhalten.
Per Klick lassen sich hierüber schnell Zoom-Stufen aktivieren. Das ist für eine exakte Auswahl oftmals unabdingbar. Ich persönlich bevorzuge jedoch STRG und Mausrad drehen (siehe auch Schrift und Bilder schnell vergrößern). Das geht einfach schneller. Ein weiteres nettes Gimmick steckt in der Verknüpfung zu Firebug. So lässt sich das gerade inspizierte Element über Inspect Last Element in Firebug aufrufen (nur verfügbar, wenn Firebug auch installiert ist).
Pro
Mit ColorZilla lassen sich Farben präzise bestimmen und auch in unterschiedlichen Farbräumen definieren. Der DOM Color Analyzer hilft dabei, die Farben einer Website jederzeit greifbar zur Verfügung zu stellen, was das Entwickeln eines Designs erleichtert.
Kontra
Eigentlich gibt es nichts zu Meckern, denn ColorZilla ist bereits sehr ausgereift. Eine Sache würde ich mir allerdings wünschen: Die Möglichkeit, Favoriten und History als eigene Paletten abspeichern zu können.
Fazit
Bis zur Version 2.8: ColorZilla ist als Werkzeug für Webdesigner und Grafiker ein absolutes Muss. Aber auch jeder andere, der Farben einer Website benötigt, ist mit diesem Firefox Add-on gut beraten. Es ist leicht zu bedienen, bietet vielfältige Informationen, Farben können gespeichert werden und es hilft beim Analysieren einer Website. Ab Version 3.x: Kann ich nicht mehr empfehlen, die Version ist kaum zu gebrauchen.
