Farbpaletten-Generator

Aus einer Grundfarbe eine harmonische Palette und die Komplementärfarbe erzeugen.

Palette

Auf deiner Website einbetten

Diesen Rechner kostenlos & cookiefrei auf deiner Seite einbinden – einfach den Code kopieren:

Vorschau

Mehr dazu: Tools einbetten

Über HTTP
https://utilico.de/api/rechner/farbpalette?farbe=%232f6df6 antwortet mit JSON – dieselben Feldnamen, ohne Anmeldung. Dabei rechnet unser Server; auf dieser Seite rechnet dein Browser. Mehr dazu: JSON-API.

Der Farbpaletten-Generator erzeugt aus einer einzigen Grundfarbe automatisch eine passende Farbpalette: fünf abgestufte Töne derselben Farbe – von sehr hell bis sehr dunkel – sowie die Komplementärfarbe auf der gegenüberliegenden Seite des Farbkreises. Das eignet sich für Weboberflächen, Präsentationen, Logos oder jedes andere Design-Projekt, bei dem du schnell zusammenpassende Hex-Codes brauchst, ohne Farbwerte von Hand durchzuprobieren.

So funktioniert der Farbpaletten-Generator

Du wählst eine Grundfarbe über den Farbwähler, zum Beispiel #2f6df6. Der Generator wandelt diesen Hex-Code intern ins HSL-Modell um (Farbton, Sättigung, Helligkeit) und übernimmt Farbton und Sättigung deiner Grundfarbe unverändert. Nur die Helligkeit wird gezielt in fünf Stufen variiert – von sehr hell (Ton 1) bis sehr dunkel (Ton 5).

Zusätzlich berechnet das Tool eine Komplementärfarbe: denselben Farbton um 180° gedreht, also die gegenüberliegende Seite des Farbkreises.

Wie die Töne berechnet werden

Für die fünf Töne nutzt der Generator feste Helligkeitswerte: 88 %, 70 %, 55 %, 40 % und 25 %. Farbton und Sättigung bleiben dabei für alle Töne exakt gleich, nur die Helligkeit ändert sich – daraus entsteht jeweils wieder ein Hex-Code. Die Komplementärfarbe folgt demselben Prinzip, jedoch mit einem um 180° gedrehten Farbton und einer festen Helligkeit von 55 %.

  • Ton 1–2: helle Varianten, z. B. für Hintergründe
  • Ton 3: liegt meist nahe an der Grundfarbe
  • Ton 4–5: dunkle Varianten, z. B. für Text oder Ränder

Beispiel

Grundfarbe #2F6DF6 (ein kräftiges Blau) ergibt umgerechnet ins HSL-Modell einen Farbton von rund 221° und eine Sättigung von rund 92 %. Daraus berechnet der Generator: Ton 1 (88 %) = #C4D6FC, Ton 2 (70 %) = #6C98F9, Ton 3 (55 %) = #2365F5, Ton 4 (40 %) = #0843C4, Ton 5 (25 %) = #052A7A.

Die Komplementärfarbe entsteht aus 221° + 180° = 41° bei gleicher Sättigung und 55 % Helligkeit: #F5B423 – ein warmes Orange, wie es als Gegenpol von Blau auf dem Farbkreis zu erwarten ist.

Wofür brauche ich das?

Abgestufte Farbtöne brauchst du zum Beispiel bei der Gestaltung von Weboberflächen: helle Töne (Ton 1–2) als Hintergrund, ein mittlerer Ton (Ton 3) als Haupt-Akzentfarbe und dunkle Töne (Ton 4–5) als Text- oder Rahmenfarbe auf hellem Grund. Die Komplementärfarbe eignet sich als Kontrastfarbe für Buttons, Warnhinweise oder einzelne Hervorhebungen, weil sie auf dem Farbkreis am weitesten von der Grundfarbe entfernt liegt. Auch für Logos, Diagramme oder Präsentationsfolien liefert die Palette schnell passende Hex-Codes.

Häufige Fragen

Was genau berechnet der Farbpaletten-Generator?

Aus deiner Grundfarbe entstehen fünf Farbtöne mit gleichem Farbton und gleicher Sättigung, aber unterschiedlicher Helligkeit (88 %, 70 %, 55 %, 40 %, 25 %), sowie eine Komplementärfarbe mit um 180° gedrehtem Farbton.

Warum sieht Ton 3 oft fast wie meine Grundfarbe aus?

Ton 3 nutzt 55 % Helligkeit. Bei vielen mittelhellen Grundfarben liegt das nahe an deren ursprünglicher Helligkeit, weshalb dieser Ton der Ausgangsfarbe häufig am ähnlichsten wirkt.

Wie wird die Komplementärfarbe bestimmt?

Der Generator dreht den Farbton deiner Grundfarbe um 180° auf dem Farbkreis, behält die Sättigung bei und setzt die Helligkeit fest auf 55 %.

Wie übernehme ich einen der Hex-Codes in mein Projekt?

Klicke bei der gewünschten Farbe auf „Kopieren“ – der Hex-Code landet in der Zwischenablage und lässt sich direkt einfügen, zum Beispiel in CSS.

Werden meine Eingaben gespeichert?

Nein. Die gesamte Berechnung läuft lokal in deinem Browser, deine Grundfarbe wird nicht an einen Server übertragen oder gespeichert.