Farbton-Generator — Kostenlos Online
Generieren Sie Toenungen und Schattierungen aus jeder Grundfarbe.
Who uses the Farbton-Generator?
- Frontend-Entwickler, die Markenfarbpaletten für Design-Systeme und Komponentenbibliotheken erstellen.
- Designer, die eine hellere oder dunklere Variante einer Markenfarbe für Hover-/Aktiv-Zustände auswählen.
- UI-Designer, die konsistente Farbverläufe für visuell kohärente Oberflächen erstellen.
How the Farbton-Generator works
Geben Sie eine Basis-HEX-Farbe ein oder wählen Sie eine über den Farbwähler.
Das Tool generiert 9 hellere Töne und 9 dunklere Schattierungen Ihrer Basisfarbe, angezeigt als Hex-Farbmuster.
Klicken Sie auf ein Farbmuster, um dessen Hex-Code in die Zwischenablage zu kopieren.
Die Basisfarbe selbst wird separat zwischen den Reihen der helleren und dunkleren Varianten angezeigt.
Tips & tricks
- Klicken Sie auf jedes Farbmuster — nicht nur die Basisfarbe —, um dessen spezifischen Hex-Code zu kopieren; ein kleines „Copied!“-Toast bestätigt dies.
- Es gibt keine Alles-exportieren-Schaltfläche, kopieren Sie für einen vollständigen CSS-Variablen- oder Tailwind-Konfigurationsblock jedes benötigte Farbmuster einzeln.
- Da die Mischung eine einfache RGB-Mischung ist, können sehr helle Töne gesättigter Farben im Vergleich zu einem wahrnehmungsoptimierten Palettentool leicht verwaschen wirken.
- Geben Sie den Hex-Code direkt im Textfeld ein für präzise Farben, statt sich auf das Farbmuster-Raster des Farbwählers zu verlassen.
Frequently Asked Questions
Wie viele Farben generiert dieses Tool?
Insgesamt 19: 9 Töne (heller, Richtung Weiß gemischt), Ihre Basisfarbe und 9 Schattierungen (dunkler, Richtung Schwarz gemischt). Farbmuster sind mit ihrem Hex-Code beschriftet, nicht mit nummerierten Stufen.
Verwendet dieses Tool Tailwinds 50–950-Namenskonvention?
Nein — Farbmuster werden als reine Hex-Codes angezeigt, nicht mit Tailwinds numerischen Stufen (50, 100, 200… 950) beschriftet. Sie können die generierten Hex-Werte bei Bedarf selbst auf Tailwinds Benennung übertragen.
Was ist der Unterschied zwischen einer Schattierung und einem Ton?
Ein Ton (Tint) ist eine mit Weiß gemischte Farbe (heller). Eine Schattierung (Shade) ist eine mit Schwarz gemischte Farbe (dunkler). Dieses Tool generiert beide Richtungen ausgehend von Ihrer Basisfarbe.
Welche Farbmischmethode verwendet dieses Tool?
Eine einfache lineare RGB-Mischung Richtung Weiß (für Töne) oder Schwarz (für Schattierungen). Es verwendet keinen wahrnehmungsuniformen Farbraum wie OKLCH, daher können sehr gesättigte Farbtöne im Vergleich zu neutralen Farben leicht ungleichmäßig heller oder dunkler wirken — es gibt keinen Umschalter für die Mischmethode.
Kann ich die Palette als CSS-Variablen oder eine Tailwind-Konfigurationsdatei exportieren?
Nicht automatisch — es gibt keine Sammel-Export-Schaltfläche. Klicken Sie auf jedes gewünschte Farbmuster und fügen Sie dessen Hex-Code manuell in Ihre CSS-Variablen oder Tailwind-Konfiguration ein.
Is my data safe when using the Farbton-Generator?
Completely safe. The Farbton-Generator processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Farbton-Generator output in commercial projects?
Yes. The Farbton-Generator is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Farbton-Generator follow official standards?
Yes. The Farbton-Generator is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.