Browserprüfung und Extraktion

Webseiten-Farbpalette kostenlos extrahieren.

Verwendete Farben mit Rollen und Ursprungselementen.

Sammle Farben der betrachteten Seite und verbinde jeden Wert mit einem sichtbaren Element und seinem Zweck.

Chrome-Erweiterung und Konto erforderlich.
25 kostenlose Automatisierungsaufgaben pro Monat, über alle Tools geteilt. Es gelten die Limits des Browser-Anbieters.

WAS DU BEREITHALTEN SOLLTEST

Sichtbare Stile der gewählten Seite.

DEIN AUSGANGSPUNKT

Eine Aufgabe, die du anpassen kannst.

Kopiere ihn hier. Füge ihn in WebAct ein, wenn du bereit bist.

Diese Seite bereitet deinen Prompt vor. Die Aufgabe läuft in WebAct.

01

Passe die Aufgabe an dich an.

Prüfe den Prompt oben. Ergänze dein Ziel und wichtige Anforderungen.

02

Nimm sie mit zu WebAct.

Öffne die Quellseite, aktiviere WebAct und wähle die relevanten lesbaren Inhalte aus. Füge die Aufgabe ein und stelle angeforderte zusätzliche Quellen bereit.

03

Prüfe den nützlichen Teil.

Das Ergebnis umfasst die von dir bereitgestellten oder ausgewählten lesbaren Inhalte. Klappe relevante Seitenbereiche vorher auf und prüfe, ob die gewünschten Datensätze enthalten sind.

PRAXISLEITFADEN

So erfasst du Seitenfarben, ohne eine offizielle Markenpalette zu behaupten.

Ermittle Farben aus tatsächlich gerenderten Stilen und benenne ihre Rollen. Eine sichtbare Akzentfarbe muss nicht die einzige freigegebene Markenfarbe sein.

Passe den Ablauf an deine Aufgabe an.

Prüfe ausgewählte Elemente und notiere Farben samt sichtbarer Rolle, etwa Text, Rahmen oder Hintergrund. Trenne berechnete CSS-Werte von Farben, die aus einem Bild entnommen wurden. Behalte Elementverweise und nenne den geprüften Seitenzustand oder das Theme.

Was du bereitstellst
Sichtbare Stile der gewählten Seite.
Was du erhältst
Verwendete Farben mit Rollen und Ursprungselementen.

Sieh dir Eingabe und Ergebnis an.

Beispielhafte Ein- und Ausgabe · ein Lehrbeispiel, kein tatsächlicher WebAct-Durchlauf

Beispiel Eingabe

Supplied style inspection: .card background #ffffff; button.primary background #d97736. These are inspected values, not official brand guidelines.

Vollständiges Beispiel

.card — role: card background — color: #ffffff
button.primary — role: primary-button background — color: #d97736
Scope: two supplied element styles. Hover states, theme variants and brand approval are not established by this sample.
Dieses Beispiel herunterladen

Lade diese Eingabe in den Prompt und kopiere ihn zum Ausprobieren nach WebAct. Dein Ergebnis kann vom Beispiel abweichen.

Entscheidungen und Fehlerbehebung.

Sind Farben von einer Seite die offizielle Markenpalette?

Sie beschreiben die geprüfte Seite. Markenregeln, barrierefreie Kombinationen und freigegebene Varianten erfordern eigene Dokumentation.

Warum ändert eine Schaltfläche beim Darüberfahren die Farbe?

Interaktive Zustände können den Standardstil überschreiben. Erfasse Zustand und Wert gemeinsam, wenn die Palette nutzbar sein soll.

Probiere es mit deiner eigenen Quelle.

Ersetze das Beispiel im Aufgaben-Prompt durch dein Material. Behalte nötige Anforderungen bei und kopiere die Aufgabe nach WebAct.

Aufgabe anpassen und kopieren ↑
BEVOR DU BEGINNST

WebAct nutzen.

Prompt und Beispiel findest du hier. Führe deine Aufgabe in der WebAct-Erweiterung für Chrome aus.

Ist dieses Tool kostenlos?

Du kannst den Prompt hier kostenlos kopieren und bearbeiten. Installiere zur Nutzung mit WebAct die Chrome-Erweiterung, erstelle und bestätige dein Konto und verbinde eine verfügbare ChatGPT-Sitzung im Browser. Der Free-Tarif umfasst 25 vom Nutzer gestartete Automatisierungsaufgaben pro Kalendermonat, geteilt über alle Tools. Gewöhnlicher Browser-Chat ist davon getrennt; Anbieterlimits gelten.

Mehr zum gemeinsamen Kontext findest du in unserem Datenschutzerklärung und zur Wahl zwischen Chat oder Task.

VOM PROMPT ZU DEINER EIGENEN ARBEIT

Bringe die Aufgabe auf deine Seite.

Installiere WebAct, füge dein Quellmaterial hinzu und passe das Ergebnis an.

WebAct installieren