hex color picker

Als Webdesigner steht man des öfteren vor der Frage, welcher Hex-Farbwert das nun wieder sein soll, welchen der Kunde in einem Screenshot in Word gebettet angedacht hat.

Es gibt ab diesem Punkt mehrere Möglichkeiten zu agieren.

Möglichkeit 1: Photoshop


Man öffnet Photoshop wartet, bis Photoshop sich erbarmt zu starten und versucht, den Screenshot aus Word in dieses zu importieren.

Klappt dies reibungslos, ohne dass einem der Arbeitsspeicher an dieser Stelle schon ausgegangen ist, kann man nun wie gewohnt ganz einfach die Farbe auswählen und sich in die Zwischenablage kopieren.

Möglichkeit 2: DigitalColor-Farbmesser

Ein kleines und nützliches Boardmittel von MacOS X, welches unter Programme/Dienstleistungsprogramme bereitsteht. Der Farbmesser kann so eingestellt werden, dass er immer den Hex-Farbwert anzeigt, der sich an der Mausspitze gerade befindet. Über das Tastaturkürzel ⇧⌘C wird dieser dann in die Zwischenablage kopiert.

Einfach und schnell, allerdings ohne Tastatur nicht zu benutzen und leider besteht keine Möglichkeit sich häufig verwendete Farben zu speichern.

Möglichkeit 3: Hex Color Picker

Mit dem Hex Color Picker kann man mit Hilfe der Lupe schnell und einfach die gewünschte Farbe auswählen und sogar in die Farbpalette speichern.
Einzige Einstiegshürde: man muss ihn sich selbst zusammenbauen.

Hierzu startet man den »AppleScript-Editor« (Programme/Dienstleistungsprogramme) und schreibt in das Fenster einfach die zwei Worte choose color. Das ganze muss dann nur noch als Programm abgespeichert werden.

Falls man dem ganzen noch ein Icon verpassen möchte, legt man sich das gewünschte Bild (z.B.: http://twiturl.de/HexIcon) in die Zwischenablage, öffnet den Informationskasten zum eben erstellten Programm, markiert das vorhandene Icon mit einem Klick und fügt das neue Icon einfach mit ⌘V ein.

Führt man das Programm aus, stellt man fest, dass es dort nicht möglich ist sich den Hex-Farbwert anzeigen zu lassen. Dafür bedarf es eines kleinen Tools mit dem Namen Hex Color Picker. Dies kopiert man sich, wie in der Read-Me beschrieben, an die richtige Stelle.

Startet man nun sein selbst gebautes Programm erneut, findet man ein blaues #-Symbol und kann dort den Hex-Wert finden.

Volià.

Nach einer Idee von: mactricksandtips.com

24 Kommentare

Alexander Rutz

Gibt es technische Gründe, die gegen die konsequente Farbangabe als z. B. rgb(123,87,112); sprechen? Hex ist definitiv kompakter, aber gibt es auch Probleme mit älteren Browsern o. ä.?

Philip Bräunlich

Ich sehe den großen Vorteil bei Hex-Farbwerten einfach darin, dass ich diese mit einem Doppelklick markiern und ändern kann. Bei RGB muss ich das gleiche für jeden einzelnen Wert machen. Also drei mal und das gleiche beim einfügen nochmal. Mir persönlich ist das zu umständlich.

Ãœber Probleme mit Browsern bei RGB oder Hex ist mir nichts bekannt.

Patrick Oscity

Ach ja, beinahe hätte ich es vergessen: Sehr nützlich ist auch dieses Tool hier mit dem man den Color Picker nicht nur innerhalb von Anwendungen verwenden kann, die dies unterstützen. Man bekommt einfach eine kleine App, die nichts anderes tut als einen Color Picker anzuzeigen.

Philip Bräunlich

@Patrick Das ist im Grund das gleiche. Nur dass die das mit AppleScript gebaute Programm direkt zum download anbieten :-)

Free the Pixel

Für mich macht rgb nur Sinn, wenn zusätzlich ein Alphakanal angegeben wird, also dann rgba. Ansonsten ist, wie Philip schon sagt, hex wesentlich kompakter.

Zum Thema: Nette Bastelanleitung. Ich hatte aber noch nie Probleme mit der Photoshop-Methode. Sollte ich nicht bald Dutzende Word-Screenshots bekommen, werde ich es wohl dabei belassen.

Philip Bräunlich

@matthias: Colors ist wirklich schön. Schade nur, dass man keine Farbpalette zum speichern hat.

Sven

Hat man den Colorpicker in Photoshp geöffnet und klickt in ein geöffnetes Dokument wird die Farbe ja aufgenommen. Viele wissen aber nicht das wenn man die Maustaste gedrückt hält und dabei den Cursor aus dem PS-Dokument heraus bewegt nimmt Photoshop auch die Farben aus dem Hintergund von OSX ausserhalb von PS auf. Dokument/Doc/Website usw. also einfach sichtbar in den Hintergund packen und wie erwähnt vorgehen. Einfach genial… :)

Thomas

Und falls hier noch ein Windows-Nutzer aufschlägt:

Pixie ist minimalistisches Tool zum Auswählen eines beliebigen Bildschirmpunktes. Das Tool hat drei Funktionen, welche vie Shrotcuts genutztwerden: Farbe als HEX-Wert kopieren, Zoom auf Cursor und Anzeige eines Farbmixers.

Fabian

Swatch wäre auch noch ein Tool was diese Aufgabe übernimmt und sich die restliche Zeit ruhig in der Menüleiste versteckt.

Balthier9999

Für Firefox gibt es noch ColorZilla, wenn man mal Farben in Bildern bekommen will oder zu faul ist, im Quelltext nachzuschauen.

Steffen

@Fabian

Swatch ist perfekt. Kostet zwar ca. 7,50 € aber das stört nicht weiter. Feine Sache und danke für den Ratschlag.

DerUser

Ich verwende Hex Color Picker und dazu das Programm Spot Color (http://zachwaugh.com/spotcolor/), dass im Prinzip nur eine Standart OS X Farbpalette ist.

Gruß
DerUser

Thomas108

»… wenn man die Maustaste gedrückt hält und dabei den Cursor aus dem PS-Dokument heraus bewegt nimmt Photoshop auch die Farben aus dem Hintergund von OSX ausserhalb von PS auf.«

Das geht auch prima in Windows.

Tim Becker

@Philip Bräunlich

In ›Colors‹ einfach die ausgewählte Farbe doppelt anklicken, schon öffnet sich das Systemeigenen Colors und du kannst die Farben der Farbpalette hinzufügen!

Christian

… leicht das Thema verlassend: Wenn man Screenshots aus Word weiter verwenden muss: In Word als Html speichern. dann legt Word einen Ordner an, in dem sich die oroginalen Bilder befinden.

Frank Hamm

Hallo,

ich habe selbst den hex color picker im Einsatz und bin sehr zufrieden damit

LG Frank Hamm

Alexander Rutz

@Philip Hmn, wenn der 3-fach-Doppelklick das einzige praktische Problem ist, dann ist mir persönlich rgb() weiterhin lieber, da ich dafür die Werte aus PS/ID nicht umrechnen muss.

Martin Radvak

Noch ein sehr nützliches Plug-In für den nativen Color Picker von Mac OS X ist dieses hier:

ANTETYPE Color Picker

Es basiert auf dem HSB Farbsystem (wie in Photoshop) und zeigt gleichzeitig den HEX Wert an. Sehr praktisch und auch kostenlos.

Don

Für farbharmonische Sachen: PaintersPicker, denn was ist die Komplementärfarbe zu #99000. Antwort?

sfx

es geht doch noch viel einfacher oder?

Einfach den Farbpicker in Photoshop auswählen. Das Fenster etwas klein machen und neben das Word Fenster legen. Jetzt mit dem Farbpicker bei Photoshop in ein geöffnetes Bild klicken, gedrückt halten und zu Word rüber ziehen. Wenn der Farbpicker auf dem gewünschten Element ist, loslassen. Jetzt ist die Farbe ausgewählt.

Elo Holmes

Hallo,

gibt es sowas auch andersrum, in scriptly ist eine Interessante Erweiterung drinne.

Wenn man in der CSS Datei mit der Maus über den Hexwert der Farbe geht, wird diese angezeigt, such soetwas für Notepad++ oder als Programm.

Kennt jemand sowas.

Kommentar verfassen