Pipettenprogramm zur Farbbestimmung. App Store-Kolorimeter

Wenn Sie über eine eigene Website verfügen, müssen Sie sich freiwillig oder unfreiwillig mit den Werkzeugen und Fähigkeiten verschiedener Internetberufe vertraut machen. Die Werkzeuge des Designers müssen besonders sorgfältig studiert werden, da der Weg zum Herzen des Lesers über ein professionelles Image führt. Schöne und gut ausgewählte Bilder auf Ihrer Website erhöhen die Wahrscheinlichkeit, die Informationen zu lesen, das ist eine Tatsache! Dass diese Bilder einzigartig sein müssen, ist ebenfalls eine unwiderlegbare Tatsache. Um zu lernen, wie man selbst Bilder erstellt, müssen wir viele Details lernen, und eine davon ist die Bestimmung der Farbe eines beliebigen Elements auf einer Internetseite. Heute werden wir darüber sprechen, wie man die Hintergrundfarbe auf einer Seite ermittelt.

Ich weiß, dass es noch viele andere Methoden und Werkzeuge gibt, aber ich teile meine praktischen Erfahrungen beim Erstellen von Bildern. Wenn Sie kein professioneller Designer sind, wird Ihnen dieser Artikel bei Ihrer zukünftigen Arbeit sehr nützlich sein. Mit einem nützlichen Plugin können Sie Farben auf einer Seite erkennen ColorZilla für die Browser Mozilla Firefox und Google Chrome.

Wann brauchen wir dieses Tool?

— Wenn Sie ein Website-Design entwerfen;
— Wenn Sie eine neue Werbeeinheit erstellen, die der Farbpalette der Website entspricht;
– Wenn Sie ein Farbschema mit Stilen für die Site erstellen;
— Wenn Sie damit beschäftigt sind, Elemente eines virtuellen Projekts zu zeichnen;
— Wenn Sie ein Bild erstellen;
— In allen anderen Fällen, wenn Sie die Farbe eines Pixels bestimmen müssen, ohne umfangreiche und ressourcenintensive Programme wie PhotoShop oder ColorDraw auszuführen.

Wie verwende ich ColorZilla?

Alles ist sehr einfach! Gehen Sie zur Website, klicken Sie auf das linke Symbol und wählen Sie die Registerkarte aus, die Sie am meisten benötigen:

— Mozilla Firefox (Browser-Tool);
— Google Chrome (Browser-Tool);
— Gradientengenerator (Online-Tool).

Laden Sie das gewünschte Browser-Plugin herunter. Nach der Installation wird das Erweiterungssymbol immer in Ihrem Browserfenster angezeigt. Vergessen Sie nicht, das Plugin zu aktivieren, klicken Sie einfach auf das Symbol.

So verwenden Sie die ColorZilla-Erweiterung

Ich werde in einfachen Worten darüber schreiben, wie ich mit dieser Erweiterung arbeite. Beim Erstellen oder Bearbeiten eines Bildes im Canva-Editor, worüber Sie mehr erfahren können, wenn Sie diesem Link folgen, kann es erforderlich sein, einen Hintergrund hinzuzufügen, der mit dem Originalbild identisch ist. Auf dem Bild sehen Sie, dass auf der rechten Seite ein Teil des weißen Hintergrunds vorhanden ist, der farblich an die Hintergrundfarbe des Bildes angepasst werden könnte. Ohne eine solche Erweiterung ist es sehr problematisch, dies zu tun, möglicherweise unter Verwendung einer Auswahlmethode, die keine 100-prozentige Identität ergibt. Wenn ich in der Erweiterung auf die Pipette klicke und dann mit der linken Maustaste auf ein beliebiges Pixel im Bild klicke, erscheint oben ein toller Tooltip, der mir den Farbcode in Hexadezimal und RGB anzeigt.

Um mit dem Canva-Editor arbeiten zu können, benötige ich lediglich das Hexadezimalformat. Ich kopiere es und gebe dann im Canva-Editor den Wert dieser Farbe ein und bin mit dem Ergebnis sehr zufrieden. So kann ich mit nur wenigen Handgriffen eine identische Farbe auswählen und so dem Originalbild durch Ändern seiner Größe Einzigartigkeit verleihen.

Ich schlage vor, dass Sie sich ein wenig hinsetzen und sich mit allen im Menü enthaltenen Tools dieser Erweiterung vertraut machen. Bestimmt finden Sie einige davon, die Sie besonders gerne nutzen werden. Und den Rest werden Sie mit der Zeit meistern. Sie wissen besser als ich, dass man in einem Bild nicht nur den Hintergrund ändern kann, sondern auch, dass es notwendig ist, etwas zu schreiben. Auch die Wahl der richtigen Schriftfarbe ist nicht so einfach, wie es auf den ersten Blick scheint. Möglicherweise bevorzugen Sie eine Palette oder einen Farbverlaufsgenerator anstelle einer Pipette. Ich bin mir sicher: Mit ColorZilla lassen sich alle Probleme sehr schnell lösen.

Wie immer gilt: Lieber einmal sehen als hundertmal lesen! Daher empfehle ich Ihnen, sich ein Video anzusehen, in dem Sie erfahren, wie Sie die ColirZilla-Erweiterung installieren und bei Ihrer Arbeit verwenden. Ich wünsche Ihnen eine angenehme Besichtigung und wunderschöne einzigartige Bilder!

Wahrscheinlich eines der ersten Dienstprogramme dieser Art, aber dennoch verliert es nicht an Beliebtheit bei Webmastern.
Das Programm zeigt den HTML-Code der ausgewählten Farbe an und gibt umgekehrt die Farbe per Code an.

Um die Farbe auf dem Monitor zu bestimmen, klicken Sie auf die Schaltfläche „Bildschirm“, zeigen Sie mit dem Zeiger auf die gewünschte Stelle und klicken Sie einmal auf diese Stelle. Das Feld „HTML-Code“ zeigt die Farbe im HTML-Code an. Jetzt müssen Sie nur noch diesen Code in die Zwischenablage kopieren und an der gewünschten Stelle einfügen.
Vorteile: Das Programm wiegt sehr wenig und ist äußerst einfach

Farbauswahlprogramm

Der Vorteil dieses Programms besteht darin, dass es Farben im RGB- oder HSL-Code und natürlich in HTML anzeigt.

Um die Farbe zu bestimmen, müssen Sie auf die Schaltfläche „Farbe mit der Maus auswählen“ klicken. Der Mauszeiger nimmt die Form einer Pipette an. Sie müssen lediglich den Cursor an die gewünschte Stelle bewegen und darauf klicken. Das Programm ist mit Versionen von Windows XP und höher kompatibel.
Erfordert die Installation auf einem Computer.

Nur Farbauswahl

Ich denke, sie ist meine Favoritin. Was mir insbesondere sehr hilft, ist, dass nach der Erfassung einer Farbe in der Benutzeroberfläche ein Balken mit variabler Tonalität und Helligkeit dieser Farbe erscheint. Diese. Ich kann mit der Maus über den Streifen fahren und mir noch ein paar ähnliche Farben, zum Beispiel etwas heller, schnappen, um später die optimale Farbe auszuwählen.

Beim ersten Start werden Sie aufgefordert, eine Sprache auszuwählen. Russisch ist vorhanden.
Die Benutzeroberfläche von Just Color Picker enthält eine Bildschirmlupe.
Ermöglicht das Speichern mehrerer Farben.
Nimmt Messwerte nicht per Mausklick vor, sondern mit den Hotkeys Alt+X (standardmäßig), wodurch Sie die Farbe genauer bestimmen können
Nach der Definition einer Farbe ermittelt das Programm automatisch weitere Farben, die mit der ausgewählten Farbe harmonieren und im Design verwendet werden können.
Erfordert keine Installation, läuft im Hintergrund.

Das Programm ist mit Versionen von Windows XP und höher kompatibel.

Erwähnenswert ist auch das kostenlose Programm ColorPic 4.1. Der einzige Nachteil besteht darin, dass eine Installation auf einem Computer erforderlich ist, d. h. kann nicht im Hintergrund ausgeführt werden.

Aber es hat mehr als genug Vorteile. Das Programm ist nicht ganz einfach, daher finden Sie auf dieser Seite in einem separaten Artikel eine Beschreibung und Anleitung zum Arbeiten damit

Wenn Sie mit Websites und Bildern arbeiten, benötigen Sie sehr oft Bestimmen Sie die Farbe beliebigen Punkt auf Ihrem Monitorbildschirm.

Beispielsweise möchten Sie, dass die Hintergrundfarbe Ihrer Website genau der Farbe des blauen Himmels auf dem Foto entspricht. Oder stellen Sie die Schriftart der Überschrift auf die gleiche Farbe wie Seegrün ein. Oder umgekehrt: Verwenden Sie die Schriftfarbe als Hintergrund, um ein Banner zu erstellen. Kurz gesagt, es gibt viele Möglichkeiten. Eine sorgfältige Farbauswahl ist sowohl beim Webdesign als auch bei der Arbeit eines Webmasters von großer Bedeutung.

Eine Farbe zu bestimmen bedeutet, ihren Code zu finden. Anschließend kann der Code je nach Ziel sowohl in verschiedenen Grafikeditoren als auch direkt im HTML-Code verwendet werden.

Am häufigsten wird es verwendet, bei dem der Code im Dezimal- und Hexadezimalsystem dargestellt werden kann.

Zur Farbbestimmung ist es sehr praktisch, eine Pipette zu verwenden. Aber neben diesem Programm gibt es noch andere, mit denen Sie dies tun können.

Adobe Photoshop-Pipette

Ich denke, nur wenige Benutzer dieses Programms wissen, dass Sie es verwenden können Bestimmen Sie die Farbe nicht nur an jedem Punkt des im Editor geöffneten Bildes, sondern auch an jedem Punkt auf Ihrem Monitorbildschirm.

Das geht ganz einfach. Öffnen Sie, erstellen Sie darin ein Bild und bewegen Sie den Pipettencursor, ohne die linke Maustaste loszulassen, an die Stelle, an der sich der von Ihnen ausgewählte Punkt befindet. Dies kann ein beliebiger Punkt außerhalb des Programmfensters sein. Wenn Sie den Cursor bewegen, sehen Sie, wie sich die Zeichnungsfarbe in der Farbpalette ändert. Nachdem Sie den gewünschten Punkt ausgewählt haben, lassen Sie die Maustaste los. Klicken Sie auf das Farbfeld der Zeichnung in der Farbpalette und sehen Sie sich den Code für Ihre Farbe an.

Diese Methode zur Farbbestimmung ist praktisch, da außer Photoshop, das die meisten Benutzer bereits installiert haben, keine zusätzlichen Programme installiert werden müssen.

HEX/HTML

HEX-Farbe ist nichts anderes als eine hexadezimale Darstellung von RGB.

Farben werden als drei Gruppen von Hexadezimalziffern dargestellt, wobei jede Gruppe für ihre eigene Farbe verantwortlich ist: #112233, wobei 11 Rot, 22 Grün und 33 Blau ist. Alle Werte müssen zwischen 00 und FF liegen.

Viele Anwendungen erlauben eine verkürzte Form der hexadezimalen Farbschreibweise. Wenn jede der drei Gruppen die gleichen Zeichen enthält, zum Beispiel #112233, dann können sie als #123 geschrieben werden.

h1 ( Farbe: #ff0000; ) /* rot */
h2 ( Farbe: #00ff00; ) /* grün */
h3 ( Farbe: #0000ff; ) /* blau */
h4 ( Farbe: #00f; ) /* dasselbe Blau, Kurzschrift */

RGB

Der RGB-Farbraum (Rot, Grün, Blau) besteht aus allen möglichen Farben, die durch die Mischung von Rot, Grün und Blau erzeugt werden können. Dieses Modell ist in der Fotografie, im Fernsehen und in der Computergrafik beliebt.

RGB-Werte werden als Ganzzahl von 0 bis 255 angegeben. Beispielsweise wird rgb(0,0,255) als blau angezeigt, da der blaue Parameter auf seinen höchsten Wert (255) und die anderen auf 0 gesetzt sind.

Einige Anwendungen (insbesondere Webbrowser) unterstützen die prozentuale Aufzeichnung von RGB-Werten (von 0 % bis 100 %).

h1 ( Farbe: rgb(255, 0, 0); ) /* rot */
h2 ( Farbe: rgb(0, 255, 0); ) /* grün */
h3 ( Farbe: rgb(0, 0, 255); ) /* blau */
h4 ( Farbe: rgb(0%, 0%, 100%); ) /* gleiches Blau, Prozenteingabe */

RGB-Farbwerte werden in allen gängigen Browsern unterstützt.

RGBA

In letzter Zeit haben moderne Browser gelernt, mit dem RGBA-Farbmodell zu arbeiten – einer Erweiterung von RGB mit Unterstützung für einen Alphakanal, der die Deckkraft eines Objekts bestimmt.

Der RGBA-Farbwert wird angegeben als: rgba(rot, grün, blau, alpha). Der Alpha-Parameter ist eine Zahl im Bereich von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

h1 ( Farbe: rgb(0, 0, 255); ) /* Blau in regulärem RGB */
h2 ( color: rgba(0, 0, 255, 1); ) /* das gleiche Blau in RGBA, weil Deckkraft: 100 % */
h3 ( Farbe: rgba(0, 0, 255, 0.5); ) /* Deckkraft: 50 % */
h4 ( Farbe: rgba(0, 0, 255, .155); ) /* Deckkraft: 15,5 % */
h5 ( Farbe: rgba(0, 0, 255, 0); ) /* völlig transparent */

RGBA wird in IE9+, Firefox 3+, Chrome, Safari und Opera 10+ unterstützt.

HSL

Das HSL-Farbmodell ist eine Darstellung des RGB-Modells in einem Zylinderkoordinatensystem. HSL stellt Farben intuitiver und besser lesbar dar als typisches RGB. Das Modell wird häufig in Grafikanwendungen, Farbpaletten und Bildanalysen verwendet.

HSL steht für Hue (Farbe/Farbton), Saturation (Sättigung), Lightness/Luminance (Helligkeit/Helligkeit/Leuchtkraft, nicht zu verwechseln mit Helligkeit).

Farbton gibt die Position der Farbe im Farbkreis an (von 0 bis 360). Sättigung ist der prozentuale Wert der Sättigung (von 0 % bis 100 %). Helligkeit ist ein Prozentsatz der Helligkeit (von 0 % bis 100 %).

h1 ( Farbe: hsl(120, 100 %, 50 %); ) /* grün */
h2 ( Farbe: hsl(120, 100 %, 75 %); ) /* hellgrün */
h3 ( Farbe: hsl(120, 100 %, 25 %); ) /* dunkelgrün */
h4 (Farbe: hsl(120, 60%, 70%); ) /* pastellgrün */

HSL wird in IE9+, Firefox, Chrome, Safari und Opera 10+ unterstützt.

HSLA

Ähnlich wie RGB/RGBA verfügt HSL über einen HSLA-Modus, der einen Alphakanal unterstützt, um die Deckkraft eines Objekts anzuzeigen.

Der HSLA-Farbwert wird angegeben als: hsla(Farbton, Sättigung, Helligkeit, Alpha). Der Alpha-Parameter ist eine Zahl im Bereich von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

h1 ( Farbe: hsl(120, 100 %, 50 %); ) /* grün in normalem HSL */
h2 ( color: hsla(120, 100%, 50%, 1); ) /* das gleiche Grün in HSLA, weil Deckkraft: 100 % */
h3 ( Farbe: hsla(120, 100 %, 50 %, 0,5); ) /* Deckkraft: 50 % */
h4 ( Farbe: hsla(120, 100 %, 50 %, .155); ) /* Deckkraft: 15,5 % */
h5 ( Farbe: hsla(120, 100%, 50%, 0); ) /* vollständig transparent */

CMYK

Das CMYK-Farbmodell wird häufig mit Farbdruck und -druck in Verbindung gebracht. CMYK ist (im Gegensatz zu RGB) ein subtraktives Modell, was bedeutet, dass höhere Werte mit dunkleren Farben verbunden sind.

Farben werden durch das Verhältnis von Cyan (Cyan), Magenta (Magenta), Gelb (Yellow) mit dem Zusatz von Schwarz (Key/BlacK) bestimmt.

Jede der Zahlen, die eine Farbe in CMYK definieren, stellt den Prozentsatz der Tinte einer bestimmten Farbe dar, aus der die Farbkombination besteht, oder genauer gesagt, die Größe des Rasterpunkts, der auf dem Fotosatzgerät auf Film dieser Farbe ausgegeben wird (bzw (bei CTP direkt auf der Druckplatte).

Um beispielsweise die Farbe PANTONE 7526 zu erhalten, würden Sie 9 Teile Cyan, 83 Teile Magenta, 100 Teile Gelb und 46 Teile Schwarz mischen. Dies kann wie folgt bezeichnet werden: (9,83,100,46). Manchmal werden die folgenden Bezeichnungen verwendet: C9M83Y100K46, oder (9 %, 83 %, 100 %, 46 %), oder (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (auch als HSV bekannt) ähnelt HSL, es handelt sich jedoch um zwei unterschiedliche Farbmodelle. Sie basieren beide auf einer zylindrischen Geometrie, HSB/HSV basiert jedoch auf dem „Hexcone“-Modell, während HSL auf dem „Bi-Hexcone“-Modell basiert. Künstler bevorzugen häufig die Verwendung dieses Modells. Es ist allgemein anerkannt, dass das HSB/HSV-Gerät der natürlichen Farbwahrnehmung näher kommt. Insbesondere das HSB-Farbmodell wird in Adobe Photoshop verwendet.

HSB/HSV steht für Hue (Farbe/Farbton), Saturation (Sättigung), Brightness/Value (Helligkeit/Wert).

XYZ

Das XYZ-Farbmodell (CIE 1931 XYZ) ist ein rein mathematischer Raum. Im Gegensatz zu RGB, CMYK und anderen Modellen sind bei XYZ die Hauptkomponenten „imaginär“, was bedeutet, dass Sie X, Y und Z keinem zu mischenden Farbsatz zuordnen können. XYZ ist das Vorbild für fast alle anderen Farbmodelle, die in technischen Bereichen verwendet werden.

LABOR

Das LAB-Farbmodell (CIELAB, „CIE 1976 L*a*b*“) wird aus dem CIE-XYZ-Raum berechnet. Das Designziel von Lab bestand darin, einen Farbraum zu schaffen, in dem Farbänderungen im Hinblick auf die menschliche Wahrnehmung (im Vergleich zu XYZ) linearer wären, d erzeugen das gleiche Gefühl der Farbveränderung.

Bei der Arbeit mit Bildern müssen Sie häufig die Farbe eines Pixels genau bestimmen. Dies wird zur Bildkorrektur oder bei Designarbeiten benötigt, um die Farbgebung des Hintergrunds, Panels oder Buttons Ihrer Internetseite oder Website anzupassen.

Mit diesem Dienst können Sie die Farbe eines Punkts online ermitteln, ohne zusätzliche Programme herunterladen und installieren zu müssen. Mit unserem Online-Pipettenservice können Sie schnell und einfach die Farbe jedes Teils des Bildes ermitteln.

Dazu müssen Sie ein Bild auf die Website hochladen. Um die Datei herunterzuladen, klicken Sie auf die Schaltfläche „Durchsuchen“. Wählen Sie die gewünschte Bilddatei aus und klicken Sie auf „Hochladen“. Sobald das Bild geladen ist, wird es auf dem Bildschirm angezeigt. Anschließend müssen Sie den Cursor über das Pixel bewegen, dessen Farbe Sie bestimmen möchten. In einem separaten Fenster können Sie die Pixelfarbe sehen und im Feld „Aktueller Wert“ wird die entsprechende Pixelnummer in der HTML- und RGB-Farbe des Pixels angezeigt.

Der Dienst ermöglicht das Speichern des Farbcodes im HTML- und RGB-Farbformat. Dazu müssen Sie den Cursor über das gewünschte Pixel bewegen und mit der linken Maustaste klicken. Im Feld „Gespeicherte Werte“ in einem separaten Fenster sehen Sie die Pixelfarbe, sowie die gespeicherten Pixelcodewerte im HTML- und RGB-Farbformat.

Rezensionen

Ja, es scheint gut zu sein, danke

Normal

Meisterwerk

Gewicht

Wir haben euch sehr geholfen, meine Lieben