Farbpaletten-Generator

Erzeuge Schattierungen, Tönungen und harmonische Farben aus einer HEX-Basisfarbe, jede mit einem kopierbaren HEX-Wert.

Tool wird geladen…

Farbpaletten-GeneratorGib eine einzelne Basisfarbe in HEX ein und erhalte sofort eine vollständige Palette darum herum — hellere Tönungen, dunklere Schattierungen, die Komplementärfarbe sowie ein Analog- und Triaden-Set. Jedes Farbfeld zeigt seinen HEX-Wert mit einem Ein-Klick-Kopierbutton. Alles läuft vollständig in deinem Browser; keine Farbe wird jemals an einen Server gesendet.

Was ist Farbpaletten-Generator?

Der Farbpaletten-Generator ist ein kostenloser Online-Farbschema-Ersteller für Designer und Frontend-Entwickler, die eine vollständige Palette rund um eine einzelne Basisfarbe aufbauen müssen. Gib eine HEX-Farbe ein, und das Tool leitet daraus sofort hellere Tönungen, dunklere Schattierungen, die Komplementärfarbe sowie analoge und triadische Harmonien mithilfe von HSL-Farbmathematik ab — jedes Farbfeld wird mit seinem HEX-Wert und einem Ein-Klick-Kopierbutton angezeigt. Nutze es, um UI-Farben auszuwählen, eine Schattierungs-/Tönungsabstufung zu erstellen oder passende Akzentfarben für eine Marke zu finden. Es ist HEX-Farbpaletten-Generator, Schattierungs-/Tönungsersteller und Komplementärfarben-Finder in einem.

So verwendest du Farbpaletten-Generator

  1. Gib im Feld Basisfarbe (HEX) eine Basisfarbe im Format #rrggbb oder #rgb ein oder klicke auf das große Farbwähler-Feld, um sie visuell auszuwählen.
  2. Stelle Schattierungen pro Seite auf 2, 3 oder 4 ein, um zu steuern, wie viele hellere Tönungen und dunklere Schattierungen auf jeder Seite der Basisfarbe erzeugt werden.
  3. Sieh dir den Abschnitt Schattierungen & Tönungen an: Hellere Tönungen erscheinen über der Basisfarbe und dunklere Schattierungen darunter, jeweils beschriftet (Lighter N / Base / Darker N) und mit ihrem HEX-Wert angezeigt.
  4. Sieh dir den Abschnitt Harmonische Farben für die Komplementär-, Analog- (+30deg / -30deg) und Triadenfarben (+120deg / -120deg) an.
  5. Klicke auf den Kopierbutton neben einem beliebigen Farbfeld (oder neben dem Basisfeld), um diesen HEX-Wert in deine Zwischenablage zu kopieren.

Beispiele

Komplementärfarbe aus reinem Rot

Eingabe

#ff0000

Ausgabe

#00ffff

Triadenfarbe aus reinem Rot

Eingabe

#ff0000

Ausgabe

#00ff00

Eine Marken-Schattierungsabstufung aufbauen

Gib dein Markenblau ein (z. B. #4f86f7) und stelle Schattierungen pro Seite auf 4, um vier hellere Tönungen oberhalb und vier dunklere Schattierungen unterhalb der Basisfarbe zu erhalten — das ergibt eine 9-stufige Abstufung, die du Farbe für Farbe in deine Design-Tokens kopieren kannst.

Häufig gestellte Fragen

Welche Farbformate kann ich eingeben?
Die Basisfarbe wird als HEX-Wert im Format #rrggbb (sechs Stellen) oder als Kurzform #rgb (drei Stellen) eingegeben. Ist der Wert keine gültige HEX-Farbe, erscheint die Meldung 'Invalid HEX color' und es wird keine Palette erzeugt. Alle Ausgabe-Farbfelder werden als #rrggbb-HEX angezeigt.
Wie viele Schattierungen und Tönungen erzeugt es?
Du wählst 2, 3 oder 4 Schattierungen pro Seite. Das Tool erzeugt entsprechend viele hellere Tönungen (interpoliert in Richtung Weiß) und ebenso viele dunklere Schattierungen (interpoliert in Richtung Schwarz), plus die Basisfarbe in der Mitte.
Welche harmonischen Farben sind enthalten?
Es gibt die Komplementärfarbe (Farbton um 180deg gedreht), zwei Analogfarben (+30deg und -30deg) und zwei Triadenfarben (+120deg und -120deg) aus, alle berechnet durch Drehen des Farbtons der Basisfarbe in HSL.
Kann ich eine Farbe visuell auswählen, statt HEX einzutippen?
Ja. Klicke auf das große Farbfeld mit dem integrierten Farbwähler, um eine Farbe auszuwählen; das HEX-Feld wird automatisch aktualisiert, und die Palette berechnet sich sofort neu, während du sie änderst.
Werden meine Farbdaten irgendwohin hochgeladen?
Nein. Alles läuft vollständig in deinem Browser mit lokaler Farbmathematik — kein Farbwert wird jemals an einen Server gesendet, sodass es offline funktioniert und deine Palette privat bleibt.

Verwandte Tools