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 "Tastenkürzel ändern" 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. Probiert die Werte einfach aus, und stellt es euch euren Bedürfnissen entsprechend zusammen. Was ihr dort eintragt, wird fortlaufend in der Statusleiste angezeigt und aktualisiert, wenn ihr mit der Pipette über das Browserfenster fahrt. 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.
Colorpalette
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.
DOM Color Analyser
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.
