Farben aus SVG- & Illustrator-Dateien auslesen

Lege eine SVG- oder Illustrator-Datei (.ai) ab und sieh jede Farbe, die sie definiert: Füllungen, Linien und Verlaufspunkte. Gemischte oder geglättete Farben wählst du mit der Pipette.

SVG- oder Illustrator-Datei hier ablegen

oderOder mit ⌘+V einfügen

SVG-Dateien und Illustrator-Dateien (.ai), die PDF-kompatibel gespeichert wurden

Wird auf deinem Gerät geöffnet, kein Upload

Ausgewählte Farben

Hier erscheinen die Farben, die du auswählst. Wähle so viele, wie du möchtest. Sie bleiben hier, bis du sie importierst oder löschst.

Öffnet den Editor und fügt die Farben als Gruppe hinzu, mit Namen, Abstufungen, Kontrastprüfung und Code-Export.

So funktioniert’s

  1. Die leere Farbpipette für SVG und Illustrator mit Ablagefläche

    1SVG- oder .ai-Datei ablegen

    Ziehe ein Logo, Icon oder eine Illustration auf die Seite. SVGs werden in hoher Auflösung gerendert; Illustrator-Dateien öffnen sich, wenn sie PDF-kompatibel gespeichert wurden (Standard).

  2. Ein SVG-Logo in der Ansicht mit der Liste der Farben aus der Datei

    2Die exakten Farben der Datei

    Jede Füll-, Linien- und Verlaufsfarbe der Datei wird aufgelistet. Klicke eine an oder „Alle hinzufügen“. Für Farben dazwischen nutze „Farbe auswählen“.

  3. Ein Raster ausgewählter Farbfelder mit HEX-Codes und Farbnamen

    3Farben sammeln

    Jede Auswahl landet mit HEX-Code und Namen im Raster darunter. Wähle so viele, wie du willst, kopiere sie oder entferne die, die du nicht brauchst.

  4. Der PickXColor-Editor mit den importierten Farben als benannte Gruppe von Karten

    4Im Editor öffnen

    Mit „In den PickXColor-Editor importieren“ landen alle Farben als Gruppe im Editor, mit Namen, Abstufungen, Kontrastprüfung und Code-Export.

Häufige Fragen

Ist das datenschutzsicher und DSGVO-konform?

Ja. Deine Datei wird vollständig in deinem Browser geöffnet und verarbeitet. Nichts wird hochgeladen, gespeichert oder an einen Server geschickt, und wir bekommen die Datei nie zu sehen. Es gibt kein Konto, kein Tracking und keine Cookies, und die Werkzeug-Seiten laden nichts von Drittanbietern. Da keine Daten aus deiner Datei bei uns ankommen, verarbeiten wir daraus auch keine personenbezogenen Daten.

Die ausgewählten Farben werden im lokalen Speicher deines Browsers abgelegt, damit sie ein Neuladen überstehen. Mit „Leeren“ oder durch Löschen der Website-Daten entfernst du sie.

Ist die Nutzung sicher?

Ja. Es wird nichts installiert, und deine Datei wird nur gelesen, nie verändert. SVGs werden als einfache Bilder angezeigt. Skripte darin laufen nie, und sie können nichts aus dem Internet nachladen. Illustrator-Dateien werden mit pdf.js bei abgeschalteter Skriptausführung gerendert. Du kannst es selbst prüfen: Öffne in den Entwicklertools deines Browsers den Tab „Netzwerk“: Deine Datei taucht in keiner Anfrage auf.

Warum öffnet sich meine Illustrator-Datei nicht?

Browser können .ai-Dateien nur lesen, wenn sie eine PDF-Version enthalten. Die fügt Illustrator hinzu, wenn beim Speichern „PDF-kompatible Datei erstellen“ aktiviert ist (Standard). Fehlt sie, speichere die Datei erneut mit dieser Option oder exportiere sie als SVG oder PDF.

Findet es auch Farben in Verläufen?

Ja. Die Farben der Verlaufspunkte stehen mit in der Liste. Farben zwischen den Punkten sind Mischungen. Die wählst du mit der Pipette an einer beliebigen Stelle des Verlaufs.

Warum fehlen manche Farben in der Liste?

Die Liste zeigt einfache Farbwerte aus der Datei (HEX, rgb(), hsl() und Farbnamen). Farben über CSS-Variablen, Filter, eingebettete Bitmaps oder „currentColor“ entstehen erst beim Zeichnen, deshalb wählst du sie mit der Pipette.

Wie genau sind die Farben?

Die Pipette liest den exakten Wert des Pixels, das du auswählst, so wie dein Browser es dekodiert hat, in sRGB. Zoome hinein, bis das Pixelraster erscheint: Dann siehst du jedes einzelne Pixel, auch Rauschen, Kompressionsartefakte und geglättete Kanten, bevor du auswählst.

Was kann ich mit den ausgewählten Farben machen?

Kopiere alle HEX-Codes auf einmal oder drücke „In den PickXColor-Editor importieren“. Der Editor fügt sie als benannte Gruppe auf einem unendlichen Board hinzu, mit Farbnamen, HEX-, RGB-, HSL-, OKLCH- und CMYK-Werten, Abstufungen im Tailwind-Stil, WCAG-Kontrastprüfung und Code-Export für CSS, Tailwind, SCSS, Swift und Jetpack Compose.

Ist das kostenlos?

Ja. Kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Grenze, wie viele Farben du auswählst.