Farbpaletten-Generator
Wählen Sie eine Basisfarbe und erzeugen Sie sofort eine Palette von hellen bis dunklen Farbtönen – bereit zum Kopieren in Ihr Design-System.
🔒 Lokal in Ihrem Browser verarbeitet
Loading…
So funktioniert's
- Geben Sie einen HEX-Code in das Feld "Basisfarbe" ein, oder klicken Sie auf die Farbmuster-Auswahl, um eine Farbe visuell zu wählen.
- Sobald eine gültige Farbe erkannt wird, erscheint darunter automatisch eine vollständige Farbpalette — kein Klick auf eine Schaltfläche nötig.
- Die Palette reicht von einem sehr hellen Farbton bis zu einem sehr dunklen, alle mit demselben Farbton wie Ihre Basisfarbe.
- Klicken Sie auf ein beliebiges Muster, um dessen HEX-Code in Ihre Zwischenablage zu kopieren — eine kurze "Kopiert!"-Bestätigung zeigt Ihnen, dass es funktioniert hat.
Funktionen
- Erzeugt eine sanfte 9-stufige Hell-Dunkel-Skala aus jeder Basisfarbe
- Behält bei jeder Stufe denselben Farbton und dieselbe Sättigung bei, genau wie Tailwinds eigene Farbskalen
- Enthält Ihre exakte Basisfarbe in der Palette, nicht nur eine Annäherung
- Kopieren per Klick für den HEX-Code jedes Musters
- 100 % clientseitig — Ihre Farben verlassen niemals Ihren Browser
Häufig gestellte Fragen
Sendet dieses Tool meine Farbe irgendwohin?
Nein. Die gesamte Palette wird mit einfacher JavaScript-Mathematik direkt in Ihrem Browser erzeugt — nichts wird jemals hochgeladen oder an einen Server gesendet.
Wie werden die Farbtöne berechnet?
Das Tool wandelt Ihre Basisfarbe zunächst in HSL um und hält dann Farbton und Sättigung konstant, während die Helligkeit gleichmäßig von sehr hell bis sehr dunkel abgestuft wird. Ihre exakte Basisfarbe wird in der Mitte der Skala platziert.
Kann ich diese Paletten in Tailwind oder anderen Design-Systemen verwenden?
Ja. Die Palette folgt demselben Prinzip wie Tailwinds 50/100/.../900-Farbskalen — eine Hell-Dunkel-Abstufung eines einzelnen Farbtons — sodass Sie die HEX-Codes direkt in Ihr eigenes Theme oder Ihre CSS-Variablen kopieren können.
Welche Farbformate kann ich eingeben?
Nur HEX-Codes, mit oder ohne führendes #, entweder als 3-stellige Kurzform (wie #abc) oder 6-stellig (wie #3b82f6). Verwenden Sie die Farbauswahl, wenn Sie lieber visuell auswählen möchten.
Warum sehe ich eine Fehlermeldung?
Der eingegebene Text entspricht keinem erkennbaren HEX-Farbformat. Stellen Sie sicher, dass er wie #3b82f6 aussieht (oder 3b82f6, oder die Kurzform #abc).