:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}Was es tut
Der Farbpaletten-Generator verwandelt jede Basisfarbe in eine harmonische Palette nach klassischen Regeln der Farbtheorie: Komplementär, Split-Komplementär, Analog, Triadisch, Tetradisch und Monochromatisch. Wähle eine Farbe, wähle eine Harmonie und erhalte ein einsatzfertiges Set von Farbfeldern mit Ein-Klick-Kopieren. Exportiere die gesamte Palette als CSS-Custom-Properties, als Tailwind-Config-Snippet oder als schlichtes JSON. Alles läuft 100% clientseitig: Nichts verlässt deinen Browser.
So verwendest du es
- Wähle eine Basisfarbe mit dem Farbfeld, oder tippe einen Hex-Wert (z. B.
#3B82F6) in das Textfeld. Klicke auf Randomize für eine frische Basisfarbe. - Wähle ein Harmonie-Schema - Komplementär, Split-Komplementär, Analog, Triadisch, Tetradisch oder Monochromatisch. Stelle bei Monochromatisch die Anzahl der Stufen (2-9) ein.
- Klicke auf ein Farbfeld, um seinen Hex-Wert zu kopieren - der Wert steht direkt auf der Farbe, in Schwarz oder Weiß, je nachdem, was besser lesbar ist.
- Wähle im Export-Panel CSS / Tailwind / JSON und klicke auf Copy export, um die gesamte Palette auf einmal zu übernehmen.
- Klicke auf Copy link für eine teilbare URL - Basisfarbe, Schema und Stufenanzahl sind im Link kodiert, daher sieht jeder, der ihn öffnet, exakt deine Palette.
Beispiele
Komplementär-Palette aus Rot
Basis #FF0000 → [ #FF0000, #00FFFF ] - Rot und Cyan, im Farbkreis direkt gegenüber.
Tailwind-Export
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};CSS-Variablen-Export
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}Gut zu wissen
- Monochromatisch hält Farbton und Sättigung der Basisfarbe bei und verteilt die Helligkeit über die gewählte Anzahl von Stufen - ideal zum Aufbau von UI-Tonskalen.
- Privat: Die gesamte Erzeugung passiert lokal in deinem Browser - sicher für proprietäre Markenfarben.
- Teilbar: Jede Palette hat ihre eigene URL - Basisfarbe, Harmonie und Stufenanzahl leben im
HashHashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.
des Links, daher lädt ein Lesezeichen oder eine Weitergabe exakt diese Palette. - Formate: Hex ist die Quelle der Wahrheit; HSL wird zur Referenz angezeigt und intern für die Harmonie-Berechnung verwendet.
- Verwandte Tools: Suche die Gradient- und Kontrast-Tools unter Color & Design.