Der Farbwähler bietet ein pixelgenaues Pipetten-Tool zum Aufnehmen von Farben aus beliebigen Elementen auf einer Webseite — Text, Hintergründe, Bilder, Verläufe oder beliebige sichtbare Pixel. Erhalten Sie den exakten Farbwert gleichzeitig in HEX-, RGB- und HSL-Formaten, mit einer vergrößerten Pixelvorschau für präzises Targeting. Zuvor aufgenommene Farben werden in einem Verlauf-Strip für schnellen Zugriff gespeichert.
Das Extrahieren exakter Farbwerte von einer Webseite ist eine häufige Aufgabe — eine Markenfarbe abgleichen, ein Design referenzieren oder einen Farbton auf einer Wettbewerber-Site überprüfen. Browser-DevTools zeigen Farben im Styles-Panel, aber nur für Elemente mit expliziten CSS-Farbeigenschaften — nicht für Bilder, Verläufe oder geerbte Farben. Der Farbwähler arbeitet auf Pixelebene — er liest die tatsächliche gerenderte Farbe des Pixels unter Ihrem Cursor, unabhängig davon, wie diese Farbe dorthin gelangte. Klicken Sie auf einen blauen Himmel in einem Hero-Bild, einen Verlaufsmittelpunkt oder eine halbtransparente Überlagerung und erhalten Sie den genauen zusammengesetzten Farbwert. Der vergrößerte Vorschaukreis zeigt eine zoomed-in Ansicht der umgebenden Pixel. Alle drei Formatausgaben (HEX, RGB, HSL) werden gleichzeitig angezeigt — klicken Sie auf ein beliebiges Format zum Kopieren.
Eine vergrößerte kreisförmige Vorschau zeigt gezoomte Pixel rund um Ihren Cursor mit Fadenkreuz-Targeting für genaue Pixelauswahl. Nehmen Sie Farben aus Text, Hintergründen, Bildern, Verläufen, SVGs oder beliebigen sichtbaren Pixeln auf der Seite auf.
Jede aufgenommene Farbe wird in allen drei Formaten auf einmal angezeigt: HEX (#7c3aed), RGB (rgb(124, 58, 237)) und HSL (hsl(262, 83%, 58%)). Kein Umschalten oder Konvertieren — alle Formate sind sofort verfügbar.
Klicken Sie auf eine beliebige Formatzeile (HEX, RGB oder HSL), um diesen spezifischen Wert sofort in die Zwischenablage zu kopieren. Eine kurze Kopiert-Animation bestätigt die Aktion. Direkt in Ihr CSS, Design-Tool oder Ihre Farbspezifikation einfügen.
Ihre zuletzt aufgenommenen Farben werden in einem visuellen Verlauf-Strip mit Farbmustern gespeichert. Klicken Sie auf ein beliebiges Muster, um diese Farbe wieder auszuwählen und ihre Werte anzuzeigen. Der Verlauf bleibt während Ihrer Sitzung erhalten.
Die aufgenommene Farbe wird als großes Muster über den Formatwerten angezeigt, was es einfach macht, die Farbe zu sehen und zu überprüfen. Das Muster ist groß genug, um subtile Schattierungen zu zeigen, die bei kleineren Größen identisch aussehen könnten.
Nimmt Farben aus jedem sichtbaren Pixel auf: CSS-Farben, CSS-Verläufe, Bilder (PNG, JPG, SVG), Canvas-Elemente, Video-Frames, halbtransparente Überlagerungen (aufnehmen der zusammengesetzten Farbe) und sogar iFrames. Wenn Sie es sehen können, können Sie es aufnehmen.
Nehmen Sie die exakte Markenfarbe von der Website eines Unternehmens auf, um sicherzustellen, dass Ihr Design oder Inhalt den richtigen Farbton verwendet. Erhalten Sie den genauen HEX-Wert, anstatt ihn zu schätzen oder durch Brand-Richtlinien zu suchen.
Nehmen Sie Farben direkt aus Hero-Bildern, Produktfotos oder Illustrationen auf. Extrahieren Sie eine dominante Farbe aus einem Foto, um sie als komplementären Hintergrund in Ihrem Design zu verwenden.
Die Design-Spezifikation sagt, der Button sollte #7c3aed sein. Nehmen Sie die Farbe vom implementierten Button auf, um zu überprüfen, ob sie übereinstimmt. Erkennt subtile Farbunterschiede, die für das bloße Auge unsichtbar sind.
Durchsuchen Sie Design-Inspirationsseiten und nehmen Sie Farben auf, die Ihnen auffallen. Der Verlauf-Strip baut eine Palette von Farben auf, die Sie während der Sitzung aufgenommen haben — verwenden Sie ihn als Ausgangspunkt für Ihr eigenes Farbschema.
Nehmen Sie Farben an verschiedenen Punkten eines CSS-Verlaufs auf, um die genaue Farbe an jeder Position zu sehen. Nützlich zum Replizieren von Verläufen oder zum Verstehen, wie Verlaufsstopps mischen.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol des Farbwählers. Der Cursor ändert sich zu einer Pipette mit einem vergrößerten Vorschaukreis.
Bewegen Sie Ihren Cursor über die Seite. Die vergrößerte Vorschau zeigt eine zoomed-in Ansicht der Pixel rund um Ihren Cursor mit einem Fadenkreuz, das das genaue Zielpixel anzeigt.
Klicken Sie irgendwo auf der Seite, um die Farbe an diesem Pixel aufzunehmen. Das Farbmuster, HEX-, RGB- und HSL-Werte aktualisieren sich sofort.
Klicken Sie auf die HEX-, RGB- oder HSL-Zeile, um diesen Wert in die Zwischenablage zu kopieren. Eine kurze Kopiert-Bestätigung erscheint.
Klicken Sie weiter, um mehr Farben aufzunehmen. Jede Aufnahme wird dem Verlauf-Strip hinzugefügt. Klicken Sie auf ein beliebiges Verlauf-Muster, um diese Farbe abzurufen.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
