Software-Lupe
Twitter – folge mir
  • News
    • Kurznachrichten
  • Infos
    • Suche
  • Reviews
  • Tutorials
  • Tipps
  • Videos
Sie befinden sich hier: StartseiteReviewsColorZilla: Unverzichtbarer Helfer für Webdesigner
DOM

Reviews

ColorZilla: Unverzichtbarer Helfer für Webdesigner

Veröffentlicht: 08.02.2011

Aktualisiert: 22.04.2017

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.

    Über das Icon erreichbar

    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.

  • Das Optionen-Menü

    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.

    Statusleisten-Format

    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.

    History für mehrere Farben

    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.

      Colorpicker

      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.

      DOM

      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).

Hits: 7.462

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.

9.2 / 10 Reviewer
Installation:
Erlernbarkeit:
Hilfe:
Bedienung:
Funktion:
Umfang:
Optik:
  • Reviewer-Wertung mit gewichtetem Mittelwert

    Wie die Berechnung mit gewichtetem Mittelwert generell funktioniert, erfahren Sie dort. 10 Sterne = höchste Zahl 10 = 100%, ein halber Stern bedeutet = Zahl 0,5 = 5%.

    Die Gewichtung ist wie folgt:

    • Installation 5% – Wie klappte die Installation?
    • Erlernbarkeit 8% – Ist die Software leicht zu erlernen?
    • Hilfe 14% – Sind Hilfe, Anleitung, Tutorials und/oder Support vorhanden? Wie gut sind diese Hilfen?
    • Bedienung 20% – Wie lässt sich die Software bedienen? Gelangt man schnell zu den gewünschten Punkten oder ist die Handhabung umständlich?
    • Funktion 35% – Hält die Software, was sie versprochen hat?
    • Umfang 12% – Manchmal ist weniger mehr – ein Bildbetrachter z. B. sollte schlank und schnell sein. Andererseits gibt es sinnvolle funktionale Erweiterungen. Wie sieht es bei dieser Software aus?
    • Optik 6% – Auch das Auge möchte Spaß haben

    Leser-Wertung – normaler Mittelwert

    Im Gegensatz zur Reviewer-Wertung gibt es hier nur 5 Sterne und es fehlt die Detailbewertung. 5 Sterne = höchste Zahl 10 = 100%. Ein halber Stern bedeutet = Zahl 1 = 10% . Alle Punkte werden addiert und durch die Anzahl der Stimmen geteilt.

    Halber Stern = schlechteste Wertung.
    Alle Sterne = beste Wertung (10).

Reviews-Übersicht
ReminderFox: Terminplaner für Firefox und Thunderbird RIOT – Bildkomprimierung mit Vorher/Nachher-Ansicht

Spezifikation:

Genre:
Browser-Add-on • Design • Webentwicklung
Software:
ColorZilla
Version:
2.5.3
Sprache:
deutsch
Mindestanforderung:
Windows 7
Hersteller:
Alex Sirota
Lizenz:
Kostenlos
Download:
Website
Testsystem:
Windows 7

Über die Autorin:

Avatar
PC-Nutzerin
seit dem Jahr:
1992
Angelika Reisiger

Erfahrung mit dieser Software:

Profi

Erfahrung mit ähnlicher Software:

Fast-Profi

PC-Kenntnisse:

Profi

Steckbrief:

Freizeit: Von 2006 bis 2013 in der Joomla!-Community aktiv, seit 2014 Mitglied des Redaktionsteams der deutschen Website von WordPress.org und Mitwirkung in weiteren Projekten der WordPress-Community. Software-Lupe.de betreibe ich seit 2011.
Job: In meinem eigenen kleinen Unternehmen Apart-Webdesign arbeite ich als Webdesignerin und entwickle Websites vom ersten Pixel bis zum letzten Byte.
Meine Websites:
  • Apart-Webdesign
  • Gutenberg-Editor
  • WP-Lernen
  • Software-Lupe

Sicherheitslücken

Sicherheitslücken
  • WordPress 5.5.2 Sicherheits- und Wartungsrelease29.10.20

  • Drupal – Sicherheitsupdates SA-CORE-2020-007 bis SA-CORE-2020-01121.09.20

  • Joomla! 3.9.21 – Sicherheits- und Wartungsrelease25.08.20

  • Typo3 – Zwei Sicherheitslücken TYPO3-CORE-SA-2020-007 bis -00801.08.20


© 2011 - 2021 · Software-Lupe
  • Impressum
  • Kontakt
  • Datenschutz
  • Rechtliches
top
Danke!
Menü
  • News
    ▼
    • Kurznachrichten
  • Infos
    ▼
    • Suche
  • Reviews
  • Tutorials
  • Tipps
  • Videos