Kostenloser Website-Farbpaletten-Extraktor

Der Website-Farbpaletten-Extraktor ist ein kostenloses Online-Tool, das die komplette Farbpalette aus dem CSS jeder Website extrahiert. Entdecke Markenfarben, Textfarben und Hintergründe. Es läuft vollständig in deinem Browser, ohne Installation oder Anmeldung.

Füge den CSS-Quellcode einer Website ein, und das Tool extrahiert alle verwendeten Farbwerte.

Ja, es erkennt CSS-Variablen (--color-*) und ihre Werte.

Ja, völlig kostenlos.

Absolut. Der Website-Farbpaletten-Extraktor verarbeitet alles clientseitig in deinem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Deine Inhalte bleiben jederzeit privat auf deinem Gerät.

Ja, der Website-Farbpaletten-Extraktor ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ganz ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den Website-Farbpaletten-Extraktor in deinem Browser und beginne sofort mit der Nutzung. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der Website-Farbpaletten-Extraktor funktioniert in allen modernen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.

Öffne die Seite in deinem Browser, sieh dir den Quelltext oder das Stylesheet an (Rechtsklick und „Seitenquelltext anzeigen“ wählen oder eine verlinkte .css-Datei öffnen), kopiere das CSS und füge es in den Extraktor ein. Das Tool liest die rohen Farbwerte aus, statt Pixel aus einem Screenshot abzutasten, sodass die Hex-Codes, die du bekommst, exakt die vom Designer definierten sind und keine durch Kantenglättung oder Kompression verzerrten Annäherungen. Es durchsucht die Eigenschaften, in denen Farbe tatsächlich vorkommt -- background, color, Rahmenfarben, fill, stroke, box-shadow und outline -- sowie CSS Custom Properties, und listet dann jede eindeutige Farbe als Farbmuster auf, das du per Klick kopieren kannst. Da es mit eingefügtem Quellcode arbeitet, kannst du auch ein internes oder unveröffentlichtes Stylesheet analysieren, das kein Screenshot-Tool erreichen könnte. Füge dein CSS oben ein, um die komplette, exakte Palette mit einem Klick zu erhalten.

Ein Farbpicker aus einem Screenshot tastet einen gerenderten Pixel ab, sodass der abgelesene Wert vom Original abweichen kann -- durch Kantenglättung an Rändern, JPEG- oder PNG-Kompression, Farbprofile des Monitors und jede Transparenzüberlagerung, die beim Rendern entstanden ist. Die Extraktion aus CSS liest den literalen Wert, den der Autor geschrieben hat -- zum Beispiel #2563eb -- und ist damit exakt und reproduzierbar. Die CSS-Extraktion bringt außerdem Farben zutage, die ein Screenshot nie zeigen kann: Töne, die nur in Hover-Zuständen, Dark-Mode-Regeln, deaktivierten Buttons oder nie angeklickten Komponenten definiert sind, da sie alle im Quellcode existieren. Der Nachteil ist, dass du Zugriff auf das Stylesheet brauchst, während ein Farbpicker mit jedem Bild funktioniert. Dieses Tool geht den Weg über CSS, entfernt Duplikate und wandelt jeden Wert in Hex um. Füge oben ein Stylesheet ein, um jede definierte Farbe zu sehen, auch die versteckten.

Ja. Das Tool erkennt Farbwerte in jeder gängigen CSS-Syntax und normalisiert sie alle in Hex, damit die Ergebnisse einheitlich und leicht vergleichbar sind. Es wandelt rgb()- und rgba()-Funktionen, hsl()- und hsla()-Funktionen, die 3-stellige Kurzform wie #f0a, volles 6-stelliges Hex sowie benannte CSS-Farben wie crimson, teal und gold zurück in einen zugeordneten Namen um. Bei 8-stelligem Hex sowie rgba/hsla-Werten mit Alphakanal wird der Alphawert verworfen und nur die zugrunde liegende Farbe behalten, da es um die Palette geht und nicht um die Transparenz einzelner Elemente. Da am Ende alles in einem einheitlichen Hex-Format vorliegt, verschmelzen zwei unterschiedlich geschriebene Werte -- etwa rgb(220, 20, 60) und #dc143c -- zu einem einzigen Farbmuster mit kombinierter Nutzungsanzahl. Füge dein CSS oben ein, und jedes unterstützte Format wird zu einer sauberen Hex-Palette vereinheitlicht.

Eine rohe Liste aus vierzig Hex-Codes ist schwer zu überblicken, deshalb sortiert der Extraktor jede Farbe anhand von Helligkeit und Sättigung in vier Gruppen. Sehr helle Töne werden zu hellen Hintergrundfarben, sehr dunkle Töne zu dunklen Text-Farben, sättigungsarme Werte zu Neutral-/Grautönen, und die verbleibenden kräftigen Töne werden zu Akzent-/Markenfarben. Das spiegelt wider, wie ein echtes Design-System aufgebaut ist, und lässt dich sofort erkennen, welche Farben die Signaturfarben einer Marke sind und welche nur unterstützende Grautöne. Die Gruppierung deckt auch Farbwildwuchs auf: Enthält die Akzentgruppe drei fast identische Blautöne, wurde meist eine einzige Markenfarbe an mehreren Stellen leicht unterschiedlich eingetragen und sollte konsolidiert werden. Jedes Farbmuster behält seinen Hex-Code und seine Nutzungsanzahl, und die meistgenutzten Farben stehen ganz oben. Füge oben ein Stylesheet ein, um die Palette automatisch so organisiert zu sehen.

Öffne nach der Extraktion den Bereich Palette exportieren und wähle das Format CSS-Variablen. Das Tool erzeugt einen fertigen :root-Block, in dem jede Farbe zu einer nummerierten Custom Property wird, etwa --color-1: #2563eb, sodass du den gesamten Satz direkt in ein Stylesheet einfügen und die Tokens im ganzen Projekt referenzieren kannst. Brauchst du die Daten woanders, wechsle zu JSON-Array, um jede Farbe mit Hex-Code, zugeordnetem Namen und Nutzungsanzahl für Skripte oder Design-Tools zu erhalten, oder zu Hex-Liste für eine einfache, kommagetrennte Zeichenfolge, die sich sauber in Figma, ein Farbmuster-Panel oder eine Dokumentation einfügen lässt. Ein Kopieren-Button legt das gewählte Format mit einem Klick in deine Zwischenablage. Das ist praktisch, um Tokens aus einem Theme wiederherzustellen, dessen Design-Datei längst verloren ist, oder um eine Marke vor einem Redesign zu dokumentieren. Füge dein CSS oben ein und exportiere dann das Format, das dein Workflow braucht.