Farbpalette-Generator

Wählen Sie eine Ausgangsfarbe, und das Werkzeug errechnet den Rest des Satzes über den Farbkreis. Ein Klick auf ein Feld kopiert den Code, oder Sie laden ein Foto und nehmen die Palette direkt daraus.

Schema

Auf ein Feld klicken, um den Code zu kopieren

    Palette aus einem Foto

    Das Foto verlässt Ihr Gerät nicht — es wird direkt im Browser gelesen.

      So geht es

      1. Farbcode eintippen oder die Auswahl öffnen — die Palette zeichnet sich sofort neu.
      2. Schema wechseln: die Komplementärfarbe liegt gegenüber, die Triade teilt den Kreis in drei.
      3. Auf ein Feld klicken kopiert den Code, oder Sie kopieren den ganzen Satz als CSS-Variablen.
      4. Für Farben aus einem Foto ein Bild auswählen — es wird auf Ihrem Gerät gelesen.

      Gut zu wissen

      Woher die Winkel kommen

      Ein Farbschema ist keine Geschmacksfrage, sondern Geometrie auf dem Farbkreis. Die Komplementärfarbe liegt genau gegenüber, bei 180°; eine Triade teilt den Kreis in drei gleiche Teile zu 120°; analoge Farben sind Nachbarn innerhalb von dreißig Grad. Das Werkzeug dreht den Farbton und behält Sättigung und Helligkeit bei, damit die Begleiter so kräftig und so tief bleiben wie die Ausgangsfarbe.

      Warum ein Foto echte Farben liefert und keinen Matsch

      Die häufigsten Pixel zu zählen funktioniert bei einem Foto nicht: Allein der Himmel enthält eine Million leicht verschiedener Blautöne, jeder genau einmal. Dieses Werkzeug halbiert den Farbraum entlang seines breitesten Kanals und wiederholt das, bis genug Kästen da sind — so bleiben Himmel, Gesicht und Schatten getrennt erhalten statt eines einzigen durchschnittlichen Brauns.

      Häufige Fragen

      Welches Schema eignet sich für eine Website?

      Monochrom und analog sind die sicheren: Sie halten die Seite ruhig und streiten nicht um Aufmerksamkeit. Die Komplementärfarbe bleibt dem einen Element vorbehalten, das auffallen muss — einer Schaltfläche, einem Etikett, einer Warnung.

      Wie nutze ich die Palette im Code?

      Kopieren Sie den Block mit den CSS-Variablen unter den Feldern in Ihr Stylesheet. Die Namen lauten --color-1 … --color-6 und lesen sich in einem fremden Projekt besser als eine Reihe Hexadezimalcodes.

      Wird mein Foto irgendwohin hochgeladen?

      Nein. Das Bild wird auf der Seite dekodiert und vor dem Zählen auf 160 Pixel verkleinert — nichts verlässt das Gerät, und die Antwort kommt sofort.

      Warum endet die Reihe der dunklen Abstufungen nicht in Schwarz?

      Reines Schwarz und reines Weiß tragen keine Information — sie sind ohnehin bekannt und belegen in einer Palette nur einen Platz. Die Reihe hält kurz vor dem Rand an, damit jedes Feld eine brauchbare Farbe bleibt.

      Ähnliche Tools