Farbton- und Farbton-Generator

Farbton- und Farbton-Generator

Wählen Sie eine Hex- oder RGB-Farbe und erhalten Sie sofort 10 Töne (Ihre Farbe gemischt mit Weiß) und 10 Schatten (gemischt mit Schwarz) als visuelle Vorschau. Klicken Sie auf eine Vorschau, um deren Hex-Wert zu kopieren, oder exportieren Sie die vollständige Palette als CSS-Standardwerte, SCSS-Variable, JSON oder als einfache Hex-Liste.

Nutzung

1. Wählen Sie eine Basisfarbe mit dem Farbpicker oder geben Sie eine Hex-Wert (3 oder 6 Stellen) in das Feld Hex ein.
2. Optional: Ändern Sie den Variablen-Namen (für die exportierten CSS/SCSS/JSON-Schlüssel).
3. Wählen Sie eine Mischmethode. OKLCH erzeugt die glatteste Farbverlauf, HSL ist die klassische Web-Approach und RGB ist die einfachste lineare Mischung.
4. Wählen Sie ein Exportformat. Das Export-Format wird live aktualisiert, sobald Sie etwas ändern.
5. Klicken Sie auf eine Vorschau, um deren Hex-Wert zu kopieren, oder verwenden Sie die Kopieren-/Herunterladen-Buttons auf dem Export-Code-Panel.

Funktionen

• 10 Töne + 10 Schatten – zwei Streifen von Vorschauen mit 10%-Schritten, von einem subtilen 10%-Mischung bis zu einer fast reinen 100%-Mischung.
• Drei Mischmethoden – OKLCH für perzeptuell gleichmäßige Schritte, HSL für Helligkeitsänderungen mit konstantem Farbton oder direktes RGB.
• Klick-zu-Kopieren-Vorschauen – Jede Zelle zeigt ihren Hex-Wert und kopiert ihn in die Zwischenablage mit einem Klick.
• Mehrere Exportformate – CSS-Standardwerte, SCSS-Variable, JSON-Farbskala oder eine einfache lesbare Hex-Liste.
• Live-Vorschau – Jede Änderung an Farbe, Namen, Methode oder Format führt sofort zu einer Neugenerierung der Vorschauen und des Codes.
• Exportieren Sie die Ausgabe – Speichern Sie die generierte Farbskala in einer Datei mit der richtigen Erweiterung für Ihr Format.