Farben aus Bild extrahieren & Farbpalette generieren: Kostenlos im Browser
Welche Farben stecken in diesem Foto? Und wie finde ich dazu passende Töne für Website, Logo oder Präsentation? Der Kodini Farbextraktor beantwortet beide Fragen in einem Tool: Teil 1 liest die dominanten Farben eines Bildes aus, Teil 2 erzeugt daraus oder von Grund auf harmonische Farbpaletten. Alles läuft im Browser, ohne Registrierung und ohne Upload.
Teil 1: Der Farbextraktor
Der Extraktor analysiert ein Bild und ermittelt die Farben, die es prägen. Jede Farbe erscheint als Kachel mit HEX- und RGB-Wert, ein Klick auf das Kopiersymbol legt den Code in die Zwischenablage. Im Bild selbst zeigen Marker, wo die jeweilige Farbe herkommt.
Was Sie einstellen können
- Bildquelle: Eigenes Foto hochladen oder eines der Beispielbilder anklicken, um das Tool sofort auszuprobieren.
- Anzahl Farben: Wie viele Farben extrahiert werden, etwa 5 für eine kompakte Palette.
- Format: Ausgabe der Farbwerte als HEX oder RGB, je nachdem, was Ihr Design-Tool erwartet.
- Bildbearbeitung: Zoom, Helligkeit, Kontrast, Sättigung und Farbton lassen sich per Regler verändern. Die Extraktion reagiert darauf, so lässt sich zum Beispiel eine kräftigere oder gedämpftere Palette aus demselben Foto gewinnen.
- Effekte: Weichzeichnen glättet Details und liefert ruhigere Mischfarben, Graustufen reduziert das Bild auf Helligkeitswerte.
- Export: Das bearbeitete Bild als PNG in wählbarer Grösse herunterladen – und die extrahierte Palette in neun Formaten, von der einfachen HEX-Liste bis zu Design Tokens.
Schritt-für-Schritt: Farben aus einem Bild auslesen
-
Farbextraktor öffnen
Besuchen Sie kodinitools.com/kodini-color-extractor – kostenlos, keine Registrierung.
-
Bild laden
Über den Upload-Button ein Foto auswählen oder ein Beispielbild anklicken. Das Bild erscheint in der Mitte, die Farben werden sofort berechnet.
-
Anzahl und Format festlegen
Mehr Farben für Detailanalysen, weniger für eine klare Markenpalette. HEX für CSS und Design-Tools, RGB für Bildbearbeitung.
-
Bild anpassen (optional)
Mit Sättigung, Kontrast oder Farbton experimentieren, bis die Palette passt. Jeder Regler hat ein eigenes Zurücksetzen-Symbol.
-
Farbcodes kopieren
Einzelne Werte per Kopiersymbol übernehmen, die ganze Palette in einem der neun Export-Formate herunterladen oder das Bild als PNG exportieren.
Teil 2: Der Farbpaletten-Generator
Wer keine Bildvorlage hat oder eine Palette von Grund auf entwerfen will, nutzt den Generator unter kodinitools.com/kodini-color-extractor/generator. Er erzeugt auf Knopfdruck harmonische Farbkombinationen nach Farbtheorie, zum Beispiel monochrome Abstufungen eines Grundtons. Die Leertaste liefert jeweils eine neue Variante, bis eine gefällt.
Funktionen im Überblick
- Harmonie: Regel auswählen, nach der die Farben zueinander passen, etwa Monochrom.
- Farben: Anzahl der Felder in der Palette festlegen.
- Generieren per Leertaste: Schnell durch viele Vorschläge blättern, ohne die Maus zu bewegen.
- Farben sperren: Gefällt ein Ton, wird er fixiert und bleibt beim nächsten Generieren erhalten.
- Anpassungen: Helligkeit, Kontrast, Sättigung und Farbton für alle Farben gemeinsam oder für ein einzelnes Feld verändern. Rückgängig, Wiederholen und Zurücksetzen sind vorhanden.
- Farbe wählen: Ein Feld anklicken und den Ton direkt im Farbwähler feinjustieren.
- Kopieren: Einzelne HEX-Werte per Klick oder die ganze Palette über „Alle kopieren".
- Export: Dieselben neun Formate wie im Extraktor – die erzeugte Palette geht direkt als CSS, SCSS, Tailwind-Config oder Design Tokens ins Projekt.
Beide Teile kombinieren: Farben aus einem Referenzfoto extrahieren, den Hauptton in den Generator übernehmen und dort passende Abstufungen für Buttons, Hintergründe und Texte erzeugen. So entsteht aus einem Bild ein vollständiges Farbschema.
Neun Export-Formate in beiden Werkzeugen
Farben sind erst dann nützlich, wenn sie im Projekt ankommen. Extraktor und Paletten-Generator bieten deshalb dieselben neun Export-Formate an. Sie wählen das Format, das Ihr Werkzeug versteht, und laden die fertige Datei herunter – kein Abtippen, kein Umformatieren.
| Format | Datei | Idealer Einsatz |
|---|---|---|
| HEX | .txt | Der Klassiker – Liste für Design-Tools, Dokumentation, E-Mails |
| RGB | .txt | Bildbearbeitung und Programme, die Kanalwerte erwarten |
| RGBA | .txt | Wie RGB, zusätzlich mit Alphakanal für Transparenzen |
| HSL | .txt | Farbton, Sättigung, Helligkeit – ideal zum Ableiten von Abstufungen |
| HSLA | .txt | Wie HSL, zusätzlich mit Alphakanal |
| CSS Custom Properties | .css | Direkt als Variablen in jedes Stylesheet einbinden |
| SCSS-Variablen | .scss | Für Sass-Projekte mit Variablen und Mixins |
| Tailwind-v3-Config | .js | Farben in die tailwind.config.js übernehmen |
| W3C-DTCG Design Tokens | .json | Standardisierte Tokens für Figma, Style Dictionary und Design-Systeme |
Die ersten fünf Formate sind schlichte Listen als Textdatei: eine Farbe pro Zeile, genau in der Schreibweise, die Sie brauchen. Die vier übrigen sind fertige Code-Dateien. Die CSS-Datei enthält Custom Properties, die SCSS-Datei benannte Variablen, die Tailwind-Datei einen Farbblock für die Konfiguration und die JSON-Datei Design Tokens nach dem Standard der W3C Design Tokens Community Group.
Welches Format wofür? Für eine klassische Website reicht CSS. Arbeiten Sie mit Sass, nehmen Sie SCSS. Nutzt Ihr Team Tailwind, sparen Sie sich mit der fertigen Config jede Handarbeit. Und wenn die Farben sprachübergreifend in Design und Code gelten sollen, sind Design Tokens die richtige Wahl.
Typische Anwendungsfälle
- Webdesign: Farbcodes aus dem Logo oder Moodboard auslesen und als CSS-Variablen übernehmen.
- Präsentationen und Social Media: Palette passend zum Titelbild erzeugen, damit Grafiken und Foto zusammenpassen.
- Markenpflege: Prüfen, welche Farben in bestehenden Materialien tatsächlich dominieren.
- Innenarchitektur und Handwerk: Farbtöne aus Inspirationsfotos für Wandfarbe oder Stoffe bestimmen.
Datenschutz: Bilder bleiben im Browser
Extraktion, Bildbearbeitung und Palettenerzeugung laufen vollständig lokal. Es wird kein Bild auf einen Server hochgeladen. Damit eignet sich das Tool auch für unveröffentlichte Entwürfe und Kundenmaterial.
Jetzt Farben extrahieren und Paletten generieren – kostenlos, ohne Upload, direkt im Browser.