Zum Inhalt springen
Color Palette Extractor

Farben aus einer URL

Website-Farben-Extraktor

Der Website-Farben-Extraktor liest HTML und CSS einer Website über ihre URL und liefert die Farbpalette der Website: die Markenfarbe, Akzente, Hintergründe, Text und Rahmen, mit der CSS-Variable und dem Nutzungsanteil jeder Farbe.

  • Kostenlos, ohne Anmeldung
  • Liest echtes CSS und Variablen
  • Nichts wird gespeichert
Extrahieren aus

Website blockiert? Füge ihr HTML oder CSS ein

Wie funktioniert der Website-Farben-Extraktor?

Der Website-Farben-Extraktor lädt eine Seite und ihre Stylesheets herunter, liest jeden Farbwert im Code und ordnet die Farben danach, wo und wie oft die Seite sie verwendet.

  1. Adresse eingeben

    Gib eine Domain wie example.com ein oder füge die vollständige URL einer öffentlichen Seite ein. Der Extraktor ruft die Seite und bis zu 25 ihrer Stylesheets ab.

  2. Stylesheets werden geparst

    Jede Farbsyntax wird gelesen: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() und die 148 benannten Farben. CSS-Variablen werden in ihre Werte aufgelöst.

  3. Farben erhalten Rollen

    Die CSS-Eigenschaft bestimmt die Rolle jeder Farbe: Hintergrund, Text, Rahmen, Füllung oder Schatten. Regeln, die auf Elemente der Seite zutreffen, zählen dreifach.

  4. Palette kopieren

    Die Markenfarbe steht vorn, gefolgt von Akzenten, Hintergründen und Textfarben. Exportiere die Palette als CSS, Tailwind oder Design Tokens.

Wie findet der Extraktor die Markenfarbe einer Website?

Die Markenfarbe ist die meistgenutzte gesättigte Farbe, die auf Buttons, auf Links oder in CSS-Variablen mit Markennamen vorkommt.

  • Sättigung. Nur Farben mit einem OKLCH-Chroma von 0,05 oder mehr gelten als Marken- oder Akzentfarben. Grautöne und fast graue Töne zählen als Neutraltöne.
  • Platzierung. Farben in Selektoren wie .btn, button, a und .cta erhalten mehr Gewicht.
  • Benennung. Variablen wie --primary, --brand und --accent erhalten mehr Gewicht.
  • theme-color. Ein Wert in <meta name="theme-color">, der einer CSS-Farbe entspricht, liefert ein starkes Markensignal.
Wie CSS-Eigenschaften den Farbrollen zugeordnet werden
RolleCSS-Eigenschaften
Hintergrundbackground, background-color, Verläufe
Textcolor, text-decoration-color, caret-color
Rahmenborder, outline, column-rule
Füllungfill, stroke, stop-color, accent-color
Schattenbox-shadow, text-shadow (aufgeführt, aber nicht in der Hauptpalette)

Wie trennt der Extraktor genutzte Farben von ungenutztem CSS?

Der Extraktor gibt CSS-Regeln, deren Selektoren auf Elemente im HTML der Seite zutreffen, dreifaches Gewicht. CSS-Frameworks liefern viele Farben mit, die eine Seite nie verwendet, und der Abgleich der Selektoren verhindert, dass diese Farben höher ranken als das echte Design.

  • Farben in :hover und :focus zählen mit halbem Gewicht, weil sie nur bei einer Interaktion erscheinen.
  • Regeln in @media print werden ignoriert.
  • Farben unter 35 % Deckkraft werden als Overlays und Tönungen übersprungen.
  • Farben mit einem Abstand unter ΔE_OK 0,02 verschmelzen zu einem Farbfeld, das seine Varianten auflistet.

Findet der Extraktor Farben für den Dunkelmodus?

Ja. Regeln in @media (prefers-color-scheme: dark) und Regeln unter Selektoren wie .dark oder [data-theme="dark"] bilden eine separate Palette für den Dunkelmodus.

Dunkle Werte von CSS-Variablen ersetzen die hellen Werte, wenn der Extraktor eine dunkle Regel auflöst, daher zeigt die dunkle Palette die Farben, die Besucher im Dunkelmodus sehen.

Welche Farben kann der Website-Farben-Extraktor nicht lesen?

Der Website-Farben-Extraktor liest den Code, den ein Server sendet, daher bleiben drei Arten von Farben außer Reichweite.

  • Laufzeit-Styles. CSS-in-JS-Bibliotheken fügen Styles erst ein, nachdem die Seite im Browser geladen ist.
  • Bildfarben. Farben in Fotos, Raster-Logos und Videos sind Pixel, kein CSS. Der Extraktor liest die Farben von Logo und Icon der Website separat.
  • Geschützte Websites. Websites hinter einem Bot-Schutz lehnen automatisierte Anfragen ab.

Füge in diesen Fällen das HTML oder CSS der Seite in das Codefeld ein, oder erstelle einen Screenshot und lege ihn im Farbpaletten-Extraktor ab. Der englische Ratgeber How to find the colors a website uses behandelt auch Methoden mit den Browser-DevTools.

Wer nutzt einen Website-Farben-Extraktor?

  • Designer

    Prüfe die aktuellen Markenfarben eines Kunden vor einem Redesign, oder analysiere die Palette einer Referenz-Website.

  • Entwickler

    Stelle die Farb-Tokens und Variablennamen einer Website wieder her, um ein Theme nachzubauen.

  • Marketer

    Stimme Landingpages, Anzeigen und E-Mails auf die Farben der Haupt-Website ab.

  • Prüfer für Barrierefreiheit

    Teste die Text- und Hintergrundpaare der Website im Tab Kontrast gegen die WCAG-Kontrastschwellen.

Häufige Fragen zum Website-Farben-Extraktor

Warum fehlen einige Farben der Website?

Farben, die JavaScript zur Laufzeit setzt, Farben in Bildern und Farben auf Seiten hinter einem Login erscheinen nicht im HTML und CSS, das der Server sendet.

Kann ich Farben einer Website extrahieren, die Bots blockiert?

Ja, über einen Ausweichweg. Öffne die Website in deinem Browser und füge ihr HTML oder ein Stylesheet in das Codefeld ein, oder lade einen Screenshot in den Farbpaletten-Extraktor hoch.

Speichert der Extraktor die Websites, die ich prüfe?

Nein. Der Server ruft die Seite und ihre Stylesheets für deine Anfrage ab und behält keine Kopie. Die Farbanalyse läuft in deinem Browser.

Was bedeutet die Prozentzahl neben einer Farbe?

Die Prozentzahl ist der Anteil der Farbe an der gewichteten CSS-Nutzung der Seite. Sie misst, wie oft der Code die Farbe verwendet, nicht, wie viel Bildschirmfläche die Farbe bedeckt.

Kann ich eine andere Seite als die Startseite prüfen?

Ja. Gib die vollständige URL einer beliebigen öffentlichen Seite ein, zum Beispiel example.com/pricing.