So verwenden Sie es
- Laden Sie ein Bild hoch, legen Sie es ab oder fügen Sie es ein, oder beginnen Sie mit „Probieren Sie ein Beispielbild aus“.
- Bewegen Sie sich über das Bild, um benachbarte Pixel in der Lupe zu sehen, und klicken Sie dann (auf einem Telefon ziehen und anheben), um es auszuwählen. Mit den Pfeiltasten verschieben Sie jeweils ein Pixel.
- Kopieren Sie HEX, RGB oder HSL, überprüfen Sie die größten Farben unter „Dominante Farben“ und exportieren Sie sie als CSS oder JSON.
HEX, RGB und HSL verglichen
- HEX: die hexadezimale Form von #RRGGBB, die von Websites, Figma und den meisten Design-Programmen verwendet wird, zum Beispiel #1E3A8A.
- RGB: Rot-, Grün- und Blauwerte von 0 bis 255, zum Beispiel rgb(30, 58, 138), praktisch im Code und zum Hinzufügen von Transparenz.
- HSL: Farbton (0–360°), Sättigung und Helligkeit, zum Beispiel hsl(224, 64 %, 33 %), praktisch für hellere und dunklere Farbtöne eines Farbtons.
Häufig gestellte Fragen
Wie erhalte ich eine Farbe aus einem Bild?
Einen Screenshot hochladen, ablegen oder einfügen. Bewegen Sie sich über das Bild, um die Lupe zu sehen, und klicken Sie auf die gewünschte Stelle. Drücken und ziehen Sie auf einem Telefon mit dem Finger und heben Sie ihn zum Auswählen an. HEX-, RGB- und HSL-Werte werden jeweils mit einem Klick kopiert.
Soll ich 1 Pixel oder 5×5 abtasten?
Verwenden Sie 1 Pixel für Logos, Symbole und flache Screenshots; Verwenden Sie für Fotos, Stoffaufnahmen und verrauschte Produktaufnahmen einen Durchschnitt von 3×3 oder 5×5, damit ein einzelner verirrter Pixel das Ergebnis nicht verzerrt.
Wie werden die dominanten Farben herausgearbeitet?
Das Bild wird verkleinert und jedes Pixel wird gezählt; Median Cut plus K-Means-Clustering führt ähnliche Farben in 3–8 Gruppen zusammen, sortiert nach dem Anteil des Bildes, den sie abdecken. Transparente Pixel werden ignoriert. Dominant bedeutet größter Bereich, nicht visueller Fokus.
Warum unterscheidet sich die ausgewählte Farbe von der Designdatei?
Screenshots und Fotos werden durch das Farbmanagement des Displays, die JPEG-Komprimierung, die Beleuchtung und den Weißabgleich der Kamera beeinflusst, sodass sie von der Designdatei oder den Druckfarben wie Pantone und CMYK abweichen können. Behandeln Sie Markenrichtlinien als Quelle der Wahrheit und ausgewählte Farben als eine gute Übereinstimmung.
Wie verwende ich den CSS- und JSON-Export?
Der CSS-Export besteht aus einer Reihe von :root-Variablen wie --color-1, die direkt in ein Stylesheet eingefügt werden; Der JSON listet HEX, RGB, HSL auf und gibt ihn für Entwickler oder Designtools frei. Sie können den Verlauf Ihrer ausgewählten Farben auch exportieren.
Ist mein Bild hochgeladen?
Nein. Das Bild wird dekodiert und auf einer lokalen Leinwand in Ihrem Browser gezeichnet, und die Auswahl und Palettenextraktion wird auf Ihrem Gerät ausgeführt, was für unveröffentlichte Produktbilder und Kundenmaterial geeignet ist.