Softonic

Farbton-Generator

Schritt 1 / 2
Nächste

Ein Farbton ist das Ergebnis des Mischens einer Farbe mit Weiß, jeder Schritt wird heller. Der Generator nimmt deine Basisfarbe und erzeugt eine Treppe von progressiv helleren Farbtönen, die nützlich für Designsystem-Palettenbereiche (100 → 400), subtile Hintergrundfüllungen, Hover-Zustände auf dunklen Primärfarben und Badge/Alarm-Hintergründe sind, wo die Akzentfarbe vorhanden, aber dezent sein muss.

Wie Farbtöne generiert werden

  1. 1

    Grundfarbe auswählen

    Nutze die Farbauswahl, um eine Grundfarbe zu wählen. Mittelhelle Grundfarben funktionieren am besten; fast weiße Grundfarben haben wenig Spielraum zum Aufhellen.

  2. 2

    Schrittzahl wählen

    Zwischen 3 und 20 Schritten, Standard 10. 10 ergeben eine vollständige Designsystem-Skala; weniger Schritte reichen für schnelle UI-Arbeit.

  3. 3

    Mit Weiß in steigenden Prozentsätzen mischen

    Bei 10 Schritten mischt der erste Farbton etwa 9% Weiß ein, der letzte etwa 91%. Die Interpolation erfolgt direkt im RGB-Raum, daher nimmt die Sättigung mit zunehmender Helligkeit ab.

  4. 4

    Hex-Werte ablesen

    Jedes Farbfeld zeigt seinen Hex-Wert. Übernimm sie in deine CSS-Variablen, Tailwind-Skala oder Sass-Karte.

Beispiel-Farbton-Skala von #3B82F6

Die Tabelle zeigt, was das Werkzeug mit der Standardeinstellung von 10 Schritten erzeugt:

Schritt Hex Mischung Typische Rolle
0 #3B82F6 Basis Primäre Marke (blau-500)
1 #4C8DF6 9,1% Weiß Heller Hover auf dunklem Hintergrund
2 #5E98F7 18,2% Weiß blau-400 Äquivalent
3 #70A4F8 27,3% Weiß
4 #82AFF9 36,4% Weiß blau-300
5 #94BAFA 45,5% Weiß
6 #A5C6FA 54,5% Weiß
7 #B7D1FB 63,6% Weiß
8 #C9DCFC 72,7% Weiß Subtiler Hintergrund (blau-100/200)
9 #DBE8FD 81,8% Weiß
10 #EDF3FE 90,9% Weiß blau-50

Farbton + Schatten = Designsystem-Skala

Kombiniere Farbtöne (heller) und Schatten (dunkler) um eine einzelne Basis, um eine vollständige Skala zu bilden:

  • 50, 100, 200, 300, 400: Farbtöne (hellste bis leicht heller als Basis)
  • 500: Basis
  • 600, 700, 800, 900: Schatten (leicht dunkler als Basis bis dunkelste)

Dies entspricht Tailwind, Material, Open Color, Radix UI und den meisten beliebten Designs. 10-11 Schritte sind die Norm.

Wo Farbtöne im UI glänzen

  • Hintergründe für Warnungen und Abzeichen: Fehler-500-Text auf Fehler-50-Hintergrund = sofortige Erkennung ohne visuelles Geschrei.
  • Hover-Zustände auf dunklen Hintergründen: Schaltflächen auf einer dunklen Oberfläche werden beim Hover zu einem helleren Farbton.
  • Datenvisualisierung sequentielle Skalen: Wert-zu-Farbe-Zuordnung, bei der hohe Magnituden gesättigt und niedrige Magnituden zu Weiß verblassen.
  • Avatar / Diagramm-Kategorie-Platzhalter: Farbton der Primärfarbe, wenn kein Bild/Daten vorhanden sind.
  • Oberflächenebenen: Kartenhintergrund leicht getönt mit Markenfarbe für eine subtile Markenpräsenz.

Warum die hellsten Farbtöne Sättigung verlieren

Der Generator mischt direkt im RGB-Raum. Mit mehr Weiß sinkt die Sättigung schneller, als die wahrgenommene Helligkeit steigt, daher wirken die obersten Stufen blass oder gräulich. Das ist bei RGB-Mischung normal:

  • RGB-Mischung (dieses Werkzeug): einfach und vorhersehbar. Die Sättigung nimmt stetig ab; sehr helle Stufen wirken entsättigt.
  • OKLCH- oder LAB-Interpolation: wird von Design-Software genutzt, um die Chroma beim Aufhellen stabiler zu halten. Dieses Werkzeug bietet diese Modelle nicht; wenn du farbtreue Farbtöne brauchst, erzeuge sie in einem OKLCH-fähigen Designprogramm.
  • HSL-Aufhellen: erhöht die Helligkeit, ohne Weiß einzumischen; das Ergebnis kann pastellig statt farbmalerisch wirken.

Farbtonboden für benutzbares UI

Sehr helle Farbtöne (Schritt 8+) nähern sich reinem Weiß und werden auf einem weißen Hintergrund visuell nicht unterscheidbar. Nützlich als:

  • Subtile Auswahlhervorhebungen hinter Text.
  • Fast unsichtbare Zeilenstreifen in dichten Tabellen.

Aber nicht gut für Schaltflächen oder Beschriftungen, wo der Benutzer eine deutliche Farbe sehen muss. Kombiniere helle Farbtöne mit einem dunkleren Element (Rand, Text), um sie zu verankern.

Häufig gestellte Fragen

Der Generator mischt direkt in RGB, und die RGB-Interpolation senkt die Sättigung, während die Helligkeit steigt; die obersten Stufen wandern dadurch Richtung Weiß. Wer stattdessen in OKLCH oder LAB interpoliert, behält einen sichtbaren Rest des Grundtons; nutze ein OKLCH-fähiges Designprogramm, wenn das wichtig ist.

Ähnlich, aber nicht identisch. Das Mischen mit Weiß reduziert sowohl die Sättigung als auch die Helligkeit proportional; die HSL-Helligkeitsanpassung erhöht L unabhängig. Farbtöne fühlen sich natürlicher (farbmalerisch) an; HSL-Helligkeit kann zu unrealistischen Pastelltönen führen.

Ja, der dunkle Modus benötigt normalerweise eine andere “Helligkeitstreppe”, da die Hintergründe bereits dunkel sind. Viele Systeme invertieren die Skala (50 im dunklen Modus ist das Weiß-auf-Dunkel-Äquivalent von 900 im hellen Modus).

Generiere eine 5-Schritte-Farbtonleiter (50-500) und eine 5-Schritte-Schattenleiter (500-900) von derselben Basis. Verknüpfe sie für eine vollständige 10-11 Schritte Designsystem-Skala.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.