Die Farbpalette scannt jedes Element auf einer Webseite und extrahiert den vollständigen Satz verwendeter Farben — von Text und Hintergründen bis hin zu Rahmen, Schatten und Akzenten. Farben werden als visuelle Muster sortiert nach Häufigkeit (meistverwendete zuerst) angezeigt, jede mit ihrem HEX-Wert und Nutzungsanzahl. Klicken Sie auf ein beliebiges Muster zum Kopieren oder exportieren Sie die gesamte Palette als Liste von Farbcodes.
Jede gut gestaltete Website hat eine konsistente Farbpalette — in der Regel 3–8 Primärfarben plus einige Neutraltöne. Die Farbpalette extrahiert diese Palette automatisch, indem sie die berechneten Farb-, Hintergrundfarb-, Rahmenfarb- und Box-Shadow-Werte jedes Elements scannt. Das Ergebnis ist eine nach Häufigkeit sortierte Sammlung jeder Farbe auf der Seite. Dominante Farben (die primäre Markenfarbe, Hintergrundfarbe, Textfarbe) erscheinen zuerst mit hohen Nutzungsanzahlen. Akzentfarben und einmalige Werte erscheinen weiter unten. Dies ist unschätzbar für Design-Recherchen — besuchen Sie jede Website und extrahieren Sie ihre genaue Farbpalette in Sekunden. Es ist auch nützlich für das Auditing Ihrer eigenen Site: Gibt es Fremdfarben, die nicht zu Ihrem Design-System gehören?
Scannt jedes sichtbare Element auf der Seite und extrahiert Farben aus berechneten Eigenschaften: color, background-color, border-color, box-shadow-Farbe, outline-color und text-decoration-color. Jede auf der Seite verwendete Farbe wird erfasst.
Farben werden nach Nutzungsanzahl sortiert — die meistgenutzte Farbe erscheint zuerst. Dominante Markenfarben und Hintergründe steigen nach oben, während einmalige Akzentfarben zuletzt erscheinen. Sehen Sie sofort die primären, sekundären und Akzentfarben der Seite.
Jede Farbe wird als großes visuelles Muster mit ihrem HEX-Code und der darunter angezeigten Nutzungsanzahl gerendert. Die Muster sind groß genug, um subtile Farbtonunterschiede zu unterscheiden.
Klicken Sie auf ein beliebiges Farbmuster, um seinen HEX-Wert sofort in die Zwischenablage zu kopieren. Kein Öffnen eines Farbpanels oder sekundären Dialogs nötig — ein Klick, kopiert, erledigt.
Klicken Sie auf Alle exportieren, um die gesamte Palette als formatierte Liste von HEX-Farbcodes zu kopieren. In ein Design-Tool, eine CSS-Variablendatei oder Farbdokumentation einfügen. Die Liste bewahrt die Häufigkeitssortierreihenfolge.
Farben werden normalisiert (RGB- und HEX-Darstellungen derselben Farbe werden zusammengeführt) und dedupliziert. Die Palette zeigt nur einzigartige Farben mit kombinierten Nutzungsanzahlen für doppelte Darstellungen.
Besuchen Sie Websites mit schönen Farbschemata und extrahieren Sie deren genaue Palette. Verwenden Sie die Farben als Ausgangspunkt für Ihr eigenes Design — oder dokumentieren Sie einfach, welche Farbkombinationen gut zusammenarbeiten.
Führen Sie die Farbpalette auf Ihrer eigenen Site aus, um die Markenfarben-Konsistenz zu überprüfen. Gibt es 4 leicht unterschiedliche Blautöne, wo es 1 sein sollte? Schleichen sich Off-Brand-Farben ein? Die Häufigkeitssortierung macht Inkonsistenzen offensichtlich.
Exportieren Sie die Palette und konvertieren Sie sie in CSS-Custom-Properties (--color-primary, --color-secondary usw.). Die nach Häufigkeit sortierte Ausgabe sagt Ihnen, welche Farben primäre, sekundäre und Akzentrollen verdienen.
Extrahieren Sie Farbpaletten von Wettbewerber-Websites, um deren Markenpositioning zu verstehen. Warme vs. kühle Farben, hoher Kontrast vs. gedämpft — die Palette zeigt intentionale Designentscheidungen.
Sehen Sie alle Textfarben neben Hintergrundfarben. Gibt es Text-Hintergrund-Kombinationen mit zu niedrigem Kontrast? Die Palette gibt Ihnen den vollständigen Satz von Farben, um sie gegen WCAG-Kontrastanforderungen zu prüfen.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol der Farbpalette. Das Tool scannt jedes Element auf der Seite und extrahiert alle Farbwerte.
Ein Raster von Farbmustern erscheint, sortiert nach Nutzungshäufigkeit. Die meistgenutzten Farben sind oben. Jedes Muster zeigt den HEX-Code und die Anzahl der Elemente, die diese Farbe verwenden.
Klicken Sie auf ein beliebiges Muster, um seinen HEX-Wert in die Zwischenablage zu kopieren. Eine kurze Bestätigung erscheint.
Klicken Sie auf Alle exportieren, um jede Farbe als formatierte Liste zu kopieren. In Ihre CSS-Variablendatei, Ihr Design-Tool oder Ihre Dokumentation einfügen.
Navigieren Sie zu verschiedenen Seiten derselben Site und extrahieren Sie Paletten, um die Farbkonsistenz über die Site hinweg zu überprüfen.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
