ColorZilla Farbpipette für Chrome und Firefox – Pick der Woche KW13

ColorZilla Browsererweiterung – Pick der Woche KW13

Mein Pick der Woche ist dieses Mal eine kleine, aber feine Browsererweiterung, die man für Firefox oder Google Chrome laden kann. Sie ist kostenfrei und macht einem das Leben als Blogger oder Webdesigner leichter, da man Farben im HEX-Format von Webseitenelementen oder Schriften sehr schnell extrahieren kann.

Mit ColorZilla habe ich eine extrem praktische Farbpipette in Firefox und Chrome zur Verfügung, die zuverlässig alle Farben – auch aus Bildern – als HEX-Code in die Zwischenablage packt.

Mit ColorZilla habe ich eine extrem praktische Farbpipette in Firefox und Chrome zur Verfügung, die zuverlässig alle Farben – auch aus Bildern – als HEX-Code in die Zwischenablage packt.

Mac-Tool "Digital Color Meter" unbrauchbar

Als Webarbeiter braucht man in der Regel hexadezimale Werte der Farben. Das heißt, ein #FFFFFF ist zum Beispiel die Farbe Weiß mit den Werten Rot = 255, Grün = 255, Blau = 255. Das Apple-Tool "Digital Color Meter", welches man in Programme > Dienstprogramme findet, bietet zwar verschiedene Farbmodelle an, aber eine Ausgabe mit HEX-Werten sucht man vergeblich. Das ist für Leute, die mit der Arbeit an Internetseiten zu tun haben, natürlich unbrauchbar. Aus dem Grund war ich auf der Suche nach einer praktischen Lösung.

Hier sieht man das Apple Tool "Digital Color Meter" in Betrieb, welches die Farbwerte leider nur als Dezimalwert anzeigt – für meine Zwecke ist das komplett unbrauchbar.

Hier sieht man das Apple Tool "Digital Color Meter" in Betrieb, welches die Farbwerte leider nur als Dezimalwert anzeigt – für meine Zwecke ist das komplett unbrauchbar.

Ich habe zwar schon die App "Sip" über SetApp installiert, aber ich möchte sie nicht jedes Mal bei Booten mit Starten und im Grunde ist sie für meine Ansprüche übertrieben umfangreich. Daher war meine Suche nach einer Lösung auch mit Sip nicht beendet.

Die Mac-App "Sip", welche im SetApp-Bundle enthalten ist, bietet ebenfalls einen praktischen Colorpicker an.

Die Mac-App "Sip", welche im SetApp-Bundle enthalten ist, bietet ebenfalls einen praktischen Colorpicker an.

Mein Weg über Photoshop oder "Element untersuchen"

Man darf es eigentlich nicht sagen, aber bisher habe ich es nicht selten so gemacht, dass ich von dem Teil einer Webseite einen Screenshot gemacht habe und diesen dann in Photoshop geöffnet habe, um mir die Farbe mit der Pipette rauszusuchen. Extrem umständlich und natürlich gibt es einen einfacheren Weg: In Chrome, Safari oder Firefox kann man mit der rechten Maustaste auf eine Seite klicken und dann "Element untersuchen" bzw. "Untersuchen" auswählen. Nun öffnet sich ein zusätzliches Infofenster.

Über die Funktion "Element untersuchen" kann man in den gängigen Browsern immerhin schon Schriftfarben, Schriftarten oder Farben von DIV-Blücken oder anderen HTML-Elementen ermitteln.

Über die Funktion "Element untersuchen" kann man in den gängigen Browsern immerhin schon Schriftfarben, Schriftarten oder Farben von DIV-Blücken oder anderen HTML-Elementen ermitteln.

Bewegt man nun den Mauszeiger über eine Überschrift oder einen DIV-Container, werden deren Eigenschaften in dem Infofenster angezeigt. Sie findet man zum Beispiel die Farbe oder auch die Schriftarten von Überschriften heraus.

Was nicht klappt, ist eine Farbe in einer Grafik zu extrahieren, denn man erhält nur die Info über die URL-Adresse der Grafik und die Größe. Ihr Inhalt wird über die "Untersuchen"-Option nicht näher dargestellt.

 

ColorZilla Browsererweiterung – vielfältiger Helfer für Webdesigner

Gestern bin ich durch Zufall auf die Browsererweiterung ColorZilla gestoßen, die man sowohl für Firefox als auch für Chrome findet:

Sie ist vollkommen kosten- und werbefrei und bietet nicht nur eine schnell verfügbare Farbpipette, die Farben im kompletten Browserbereich aufnehmen kann, sondern sie hat auch noch ein paar andere Funktionen.

Der untere Pfeil zeigt mein Fadenkreuz mit welchem ich die Farbe analysiere und der obere zeigt die dunkel hinterlegte Leiste von ColorZilla, in welcher auch der aktuelle Farbwert zu finden ist.

Der untere Pfeil zeigt mein Fadenkreuz, mit welchem ich die Farbe analysiere und der obere zeigt die dunkel hinterlegte Leiste von ColorZilla, in welcher auch der aktuelle Farbwert zu finden ist.

Gradient-Generator mit CSS-Ausgabe

Eine Sache, die sicher für einige Webdesigner interessant sein dürfte, ist der Gradient-Generator. Damit erstellt man, wie man es von Photoshop gewohnt ist, einen Verlauf und ColorZilla bastelt nebenbei den kompletten CSS-Code zusammen, den man für diesen Verlauf benötigt. Ich brauche das eher weniger, aber ich bin sicher, dass etliche Webdesigner damit glücklich werden, weil sie in Zukunft nicht mehr auf Webseiten gehen müssen, die diese Arbeit für sie erledigen.

Der CSS-Code für Verläufe kann schnell recht komplex werden. ColorZilla macht daraus eine Copy und Paste Aufgabe, die man auch als Einsteiger leicht erledigen kann.

Der CSS-Code für Verläufe kann schnell recht komplex werden. ColorZilla macht daraus eine Copy und Paste Aufgabe, die man auch als Einsteiger leicht erledigen kann.

Farbpalette einer Webseite erstellen

Eine weitere schöne Funktion ist das Generieren von einer Farbpalette einer Webseite. Hat man beim Stöbern im Internet zum Beispiel eine Internetseite gefunden, bei welcher man die Farbzusammenstellung sehr ansprechend findet, kann man sich die Farben über den Menüpunkt "Webpage Color Analyzer" in einer Palette zusammenstellen lassen.

ColorZilla bietet noch ein paar mehr Kleinigkeiten, wie eine History der pipettierten Farben oder das Kopieren der Farbwerte in unterschiedlichen Farbsystemen an, aber mein wichtigster Bedarf, war einfach eine Farbe von einer Webseite mit der Pipette zu holen und diese dann als Hexadezimalwert in der Zwischenablage zu haben. Das macht ColorZilla perfekt und unkompliziert. Danke an die Entwickler für dieses tolle Tool.


Neu: Es gibt nun ein Sir Apfelot Forum bei dem ihr eure Fragen nicht nur mir, sondern gleich vielen anderen Lesern präsentieren könnt. Das erhöht die Chance, dass euer Problem gelöst wird!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.