Unterschied zwischen Shade, Tint und Tone?

Ein Shade mischt Schwarz in die Basis (dunkler, gleicher Farbton). Ein Tint mischt Weiss (heller, gleicher Farbton). Ein Tone mischt Grau (weniger gesättigt, gleicher Farbton und gleiche Helligkeit). Dieser Generator gibt Shades und Tints aus, weil das ist, was Design-Systeme nutzen - eine Tone-Rampe wird selten gesucht.

Warum die 50/100…950-Skala?

Sie deckt sich mit Tailwind CSS und den meisten Design-Tokens, wo 500 grob die Basis, 50 nahe Weiss und 950 nahe Schwarz ist. Gleiche Nummerierung heisst: Wer deine Design-Tokens liest, versteht das relative Gewicht sofort. Material nutzt 50/100/200…900; Tailwind erweitert auf 950 für ein tieferes Schwarz.

Garantiert die Rampe wahrnehmungsmässig gleichmässige Schritte?

Nein - dieser Generator interpoliert in HSL, schneller und CSS-nativ, aber nicht wahrnehmungsmässig gleichmässig. Die mittleren Stufen (200-700) wirken meist gleich beabstandet; die Extreme (50, 950) drücken sich optisch zusammen. Für wahrnehmungsmässig gleichmässige Rampen erzeugt man in OKLCH oder LCH - neuere Design-Tokens (Tailwind v4, Radix Colors) tun genau das.

Wie exportiere ich die Rampe als CSS-Variablen?

«Als CSS kopieren» klicken. Die Ausgabe ist ein Block aus `--brand-50: #...; --brand-100: #...;`, der in deinen `:root` oder eine Tailwind-Konfiguration passt. Vor dem Kopieren das Präfix im Feld auf deinen Token-Namespace umbenennen (`--primary`, `--accent` usw.).

Entspricht die 500-Probe exakt meiner Eingabe?

Ja - die 500 ist deine Eingabefarbe unverändert. Die helleren Stufen (50-400) sind progressive Mischungen Richtung Weiss, die dunkleren (600-950) Richtung Schwarz. Eine sehr dunkle oder helle Basis lässt die Rampe schief wirken - in dem Fall die Basis näher an 50 % Helligkeit setzen und neu generieren.

Farbton-Generator

10 Schattierungen und 10 Tönungen jeder Farbe erzeugen - als Hex-Liste oder CSS-Variablen.

Basisfarbe

CSS-Variablen-Präfix

Farbrampe

Gib eine Hex-Farbe ein (z. B. #3b82f6), um Töne zu erzeugen.

CSS-Custom-Properties

Hex tippen; eine 21-Stufen-Rampe erhalten. Tints (Basis Richtung Weiss gemischt) steigen links auf, Shades (Richtung Schwarz) sinken rechts ab, die Basis liegt in der Mitte. Die Ausgabe folgt der 50/100/200…900/950-Skala, die Tailwind, Material und die meisten modernen Design-Systeme verwenden. Klick auf eine Probe kopiert den Hex, oder exportiere die ganze Rampe als CSS-Custom-Properties.

So funktioniert's

Basisfarbe wählen
Picker nutzen oder Hex einfügen. Die volle Rampe berechnet sich sofort neu.
Proben prüfen
Jede Probe zeigt ihre Token-Nummer (50-950) und den Hex. Klick kopiert den Hex.
Präfix umbenennen
`--brand` auf deinen Token-Namespace ändern (`--primary`, `--accent` usw.), damit das exportierte CSS deiner Konvention folgt.
Als CSS kopieren
Auf «Als CSS kopieren» klicken und den vollen Block der Custom-Properties direkt ins Stylesheet oder die Tailwind-Konfiguration einfügen.

Was ist das?

Ein Farbton-Generator nimmt eine Basisfarbe und produziert eine abgestufte Rampe aus helleren (Tints) und dunkleren (Shades) Varianten. Die Ausgabe ist die Art Farbtabelle, die in Design-Systemen wie Tailwind oder Material steht - eine nummerierte Skala (50, 100, 200, …, 900, 950), bei der jeder Schritt die Helligkeit anpasst, während der Farbton gleich bleibt. Designer nutzen solche Rampen, um Text/Hintergrund-Hierarchien, Hover-Zustände, Disabled-Zustände und Chart-Paletten aus einer einzigen Markenfarbe aufzubauen.

Wann verwenden

Ein Design-System aus einer einzigen Markenfarbe ableiten, Hover-/Active-Varianten einer Primärfarbe erzeugen, ein konsistentes Set neutraler Grautöne für Text und Hintergründe schaffen, die Tailwind-Konfiguration mit einer eigenen Palette füllen, Chart-Serienfarben mit gleichmässigen Schritten skizzieren und Entwicklern eine Default-Rampe an die Hand geben, bevor ein Designer Zeit für Feintuning aufwendet.

Häufige Fehler

Eine 50- oder 950-Probe ohne Kontrast-Check für Text verwenden - sie fallen auf getönten Hintergründen oft durch WCAG. Die automatisch erzeugte Rampe als final ansehen - sie ist Ausgangspunkt; der Bereich 300-700 will meist manuell nachjustiert werden. Eine schon sehr dunkle oder helle Basis wählen - die Rampe drückt sich an einem Ende zusammen, die Hälfte der Schritte wird ununterscheidbar.

FAQ

Unterschied zwischen Shade, Tint und Tone?: Ein Shade mischt Schwarz in die Basis (dunkler, gleicher Farbton). Ein Tint mischt Weiss (heller, gleicher Farbton). Ein Tone mischt Grau (weniger gesättigt, gleicher Farbton und gleiche Helligkeit). Dieser Generator gibt Shades und Tints aus, weil das ist, was Design-Systeme nutzen - eine Tone-Rampe wird selten gesucht.
Warum die 50/100…950-Skala?: Sie deckt sich mit Tailwind CSS und den meisten Design-Tokens, wo 500 grob die Basis, 50 nahe Weiss und 950 nahe Schwarz ist. Gleiche Nummerierung heisst: Wer deine Design-Tokens liest, versteht das relative Gewicht sofort. Material nutzt 50/100/200…900; Tailwind erweitert auf 950 für ein tieferes Schwarz.
Garantiert die Rampe wahrnehmungsmässig gleichmässige Schritte?: Nein - dieser Generator interpoliert in HSL, schneller und CSS-nativ, aber nicht wahrnehmungsmässig gleichmässig. Die mittleren Stufen (200-700) wirken meist gleich beabstandet; die Extreme (50, 950) drücken sich optisch zusammen. Für wahrnehmungsmässig gleichmässige Rampen erzeugt man in OKLCH oder LCH - neuere Design-Tokens (Tailwind v4, Radix Colors) tun genau das.
Wie exportiere ich die Rampe als CSS-Variablen?: «Als CSS kopieren» klicken. Die Ausgabe ist ein Block aus `--brand-50: #...; --brand-100: #...;`, der in deinen `:root` oder eine Tailwind-Konfiguration passt. Vor dem Kopieren das Präfix im Feld auf deinen Token-Namespace umbenennen (`--primary`, `--accent` usw.).
Entspricht die 500-Probe exakt meiner Eingabe?: Ja - die 500 ist deine Eingabefarbe unverändert. Die helleren Stufen (50-400) sind progressive Mischungen Richtung Weiss, die dunkleren (600-950) Richtung Schwarz. Eine sehr dunkle oder helle Basis lässt die Rampe schief wirken - in dem Fall die Basis näher an 50 % Helligkeit setzen und neu generieren.