Farbpaletten-Generator
Erzeuge Schattierungen, Tönungen und harmonische Farben aus einer HEX-Basisfarbe, jede mit einem kopierbaren HEX-Wert.
Farbpaletten-Generator — Gib 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
- 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.
- 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.
- 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.
- Sieh dir den Abschnitt Harmonische Farben für die Komplementär-, Analog- (+30deg / -30deg) und Triadenfarben (+120deg / -120deg) an.
- 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
Base32 / Base58 kodieren / dekodieren
Kodiere Text in Base32 (RFC 4648) oder Base58 (das Bitcoin-Alphabet) und dekodiere beides wieder zurück – vollständig UTF-8-sicher und komplett in deinem Browser.
Base64 kodieren / dekodieren
Kodiere Text zu Base64 oder dekodiere Base64 zurück in Text (UTF-8-sicher).
Groß-/Kleinschreibung-Konverter & Zähler
Ändere die Groß-/Kleinschreibung von Text und zähle Zeichen, Wörter und Zeilen.
Code-Formatierer & Minifizierer
Verschönere oder minifiziere HTML, CSS und JavaScript sofort in deinem Browser, mit 2-Leerzeichen-, 4-Leerzeichen- oder Tab-Einrückung und JavaScript-Komprimierung durch Terser.