Kostenloses Tool

Farbpaletten-Generator

Ziehe ein Foto hinein. Du bekommst seine Hauptfarben mit HEX- und RGB-Codes, eine Kontrastprüfung für weißen und schwarzen Text und eine Vorschau einer Link-in-Bio-Seite in diesen Farben.

Dein Foto

Anzahl der Farben
Reihenfolge

Deine Palette

    Vorschau auf einer Link-in-Bio-Seite

    Ana Ruiz

    Keramik und Töpferkurse

    Neue Tassen shoppenKurs buchenNeuestes Video

      Was ein Farbpaletten-Generator macht

      Ein Farbpaletten-Generator findet die Hauptfarben in einem Bild und gibt dir ihre Codes. Dieser liest dein Foto im Browser, fasst ähnliche Pixel zusammen und liefert die 5, 6 oder 8 Farben, die den größten Teil des Bildes abdecken. Zu jeder Farbe gibt es den HEX- und RGB-Code und eine Kontrastprüfung für Text.

      Creator nutzen eine Palette aus ihren eigenen Fotos, damit Profil, Posts und Link-in-Bio-Seite wie aus einem Guss aussehen. Die Kontrastprüfung zeigt dir, welche Farben Text tragen können und welche sich besser als Hintergrund oder Akzent eignen.

      Dein Foto verlässt nie dein Gerät. Das Tool zeichnet es auf ein Canvas in deinem Browser, deshalb gibt es keinen Upload, kein Konto und kein Limit.

      So erstellst du eine Palette aus einem Foto

      1. Foto hineinziehen

        Nimm ein Foto, das du oft postest, etwa dein Profilbild oder ein Produktfoto. JPG-, PNG- und WebP-Dateien funktionieren.

      2. Anzahl der Farben wählen

        Wähle 5, 6 oder 8 Farben. Sortiere sie danach, wie viel vom Foto sie abdecken, oder von hell nach dunkel.

      3. Kontrast prüfen

        Jede Farbe zeigt ihren Kontrast zu weißem und schwarzem Text. Nimm die Farben, die bestehen, für Buttons mit Text.

      4. Codes kopieren

        Kopiere einen HEX-Code, die ganze Liste oder die Palette als CSS-Variablen für deine Website.

      Kontrastregeln für Text auf deinen Farben

      Die Web Content Accessibility Guidelines (WCAG 2.2) legen den Mindestkontrast zwischen Text und Hintergrund fest. Die Badges im Tool nutzen diese Werte.

      Was du prüfstMindestverhältnisWCAG-Regel
      Normaler Text auf einer Farbe4.5:11.4.3 Kontrast (Minimum), Level AA
      Großer Text: 24px oder 18,5px fett3:11.4.3 Kontrast (Minimum), Level AA
      Normaler Text, strengere Stufe7:11.4.6 Kontrast (erhöht), Level AAA
      Großer Text, strengere Stufe4.5:11.4.6 Kontrast (erhöht), Level AAA
      Ein Button oder Icon gegenüber der Seite3:11.4.11 Nicht-Text-Kontrast, Level AA

      Quellen: W3C, Understanding 1.4.3 Contrast (Minimum), W3C, Understanding 1.4.6 Contrast (Enhanced), W3C, Understanding 1.4.11 Non-text Contrast. Stand: 11. November 2026.

      Auf deiner More.You-Seite

      Deine Farben auf deiner Link-in-Bio-Seite

      Auf einer More.You-Seite legst du Hintergrund, Buttons, Schriften und Farben selbst fest. Jede Änderung landet in einem Entwurf mit Rückgängig-Funktion, deshalb zeigt deine Live-Seite nie ein halbfertiges Design.

      more.you/

      • Themes und Farben im Free-Plan

        Wähle ein Theme und ändere dann Hintergrund, Button-Stil, Schriften und Farben. Mische die Theme-Galerie, wenn du Ideen suchst.

        Themes und Design

      • Starte mit einer Vorlage

        Vorlagen nach Beruf geben dir eine fertige erste Seite. Wende eine an und tausche dann die Farben aus deinem Foto ein.

        Link-in-Bio-Vorlagen

      • Fünf Header-Layouts

        Die Header-Layouts Classic, Hero, Banner, Cutout und Shape setzen dein Foto dorthin, wo es zu deiner Palette am besten wirkt.

      Fragen zur Farbpalette

      Wie wählt der Farbpaletten-Generator die Farben aus?

      Er verkleinert dein Foto zu einer kleinen Kopie, liest jedes Pixel und sortiert die Pixel mit einem Verfahren namens Median Cut in Gruppen ähnlicher Farben. Er bildet für jede Gruppe den Durchschnitt, lässt Farben weg, die fast gleich aussehen, und behält die, die den größten Teil des Fotos abdecken.

      Wird mein Foto irgendwohin hochgeladen?

      Nein. Das Tool öffnet dein Foto in deinem Browser und liest es auf deinem Gerät in einem Canvas-Element. Nichts wird an More.You oder einen anderen Server gesendet und nichts wird gespeichert. Schließe den Tab, und Foto und Palette sind weg.

      Was bedeuten HEX- und RGB-Codes?

      Beide beschreiben dieselbe Farbe. RGB gibt die Anteile von Rot, Grün und Blau von 0 bis 255 an, zum Beispiel rgb(178, 246, 227). HEX schreibt dieselben drei Zahlen im Hexadezimalsystem nach einem Rautezeichen, zum Beispiel #B2F6E3. Die meisten Design-Apps und Website-Baukästen akzeptieren beides.

      Welchen Kontrast braucht Text, damit er lesbar ist?

      WCAG 2.2, der Standard für Barrierefreiheit im Web, verlangt auf Level AA ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Großer Text heißt 24px oder 18,5px fett. Die Badges neben jeder Farbe zeigen ihr Verhältnis zu weißem und zu schwarzem Text.

      Wie nutze ich die Palette auf meiner Link-in-Bio-Seite?

      Nimm die hellste Farbe als Seitenhintergrund und eine kräftigere Farbe für die Buttons. Prüfe dann, ob der Button-Text auf der Button-Farbe 4,5:1 erreicht. Die Vorschau im Tool zeigt diese Kombination und sagt dir, welche Paare bestehen.

      Welche Dateitypen kann ich nutzen?

      Jedes Bild, das dein Browser öffnen kann, etwa JPG, PNG, WebP und GIF. Bei einem GIF liest das Tool das erste Einzelbild. Wenn sich eine Datei nicht öffnen lässt, speichere sie am Handy oder Computer als JPG oder PNG und versuche es noch einmal.

      Kann ich die Palette als CSS kopieren?

      Ja. Wähle „Als CSS-Variablen kopieren“, um einen :root-Block mit einer Variablen pro Farbe zu bekommen, zum Beispiel --color-1: #B2F6E3. Füge ihn oben in dein Stylesheet ein und nutze var(--color-1), wo du die Farbe brauchst. Die Variablen folgen der gewählten Reihenfolge, also ist --color-1 die meistgenutzte oder die hellste Farbe.

      Weitere kostenlose Tools

      Kostenlos und ohne Konto. Nichts, was du eingibst, wird auf unseren Servern gespeichert.

      Font-Generator

      Erzeuge aus deinem Text 24 Stile, von fett und kursiv bis Schreibschrift und Blasen. Kopiere ihn und füge ihn überall ein.

      Tool öffnen →

      Bio-Generator

      Erhalte 12 Bio-Ideen für Instagram, TikTok, X oder YouTube, mit Live-Zeichenzähler.

      Tool öffnen →

      QR-Code-Generator

      Mache aus jedem Link einen QR-Code. Wähle Farben und lade PNG oder SVG herunter. Er läuft nie ab.

      Tool öffnen →

      Alle kostenlosen Tools ansehen

      Ratgeber: Design der Bio-Seite: Layouts, Themes, Buttons, Link-in-Bio-Themes: So wählst du eines, das überzeugt.

      Verwandte Seiten
      Quellen
      1. W3C, Understanding SC 1.4.3 Contrast
      2. W3C, Understanding SC 1.4.6 Contrast
      3. W3C, Understanding SC 1.4.11 Non-text Contrast

      Quellen, Stand: 11. November 2026.

      Deine Farben auf deiner eigenen Seite

      Sichere dir deine kostenlose More.You-Seite und gestalte Hintergrund, Buttons und Schriften in den Farben deines Fotos.

      more.you/

      Sprache