Lesbare Design-Tokens
Jede Stufe hat eine stabile Rolle und einen CSS-Variablennamen. Licht, Basis und Schatten wandern ohne manuelle Übertragung von der Erkundung in Komponenten.
Kostenloses Browser-Farbwerkzeug
Farbschattierungen-Generator für Toon-Licht und Schatten
Erstelle aus einer Grundfarbe fünf, sieben oder neun Stufen. Wechsle zwischen gleichmäßigen klassischen Abstufungen und einer ausdrucksstarken Toon-Kurve und kopiere Werte ohne Upload.
Aktualisiert am 23. Juli 2026
Farbschattierungen-Generator
Was erzeugt dieser Farbschattierungen-Generator?
Der Generator verwandelt einen gültigen drei- oder sechsstelligen HEX-Wert in eine zentrierte Skala und erhält die Ausgangsfarbe exakt. Klassisch mischt für helle Tints in Richtung Weiß und für Schatten in Richtung Schwarz. Toon verändert Farbton, Sättigung und Helligkeit gemeinsam für wärmere Lichter und kühlere Schatten. Jedes Ergebnis enthält HEX, RGB, HSB, Kontrast zu Weiß und Schwarz, Kopieraktionen, CSS-Variablen und ein lokal erzeugtes PNG.
Eine Grundfarbe, drei nützliche Ergebnisse
Nutze die Skala als System mit Aufgaben, nicht als unbenannte Dekoration.
Sichtbare Kontrastprüfung
Für jede Farbe stehen die Verhältnisse zu weißem und schwarzem Text. AA normal, AA groß oder unzureichend helfen bei der Vorauswahl vor dem vollständigen Test.
Toon-taugliche Schattierung
Der Toon-Modus verschiebt den Farbton beim Aufhellen und Abdunkeln leicht. So entsteht ein lebendiger Start für Figuren, Game-UI, Badges und flache Illustrationen.
HEX · RGB · HSB · WCAG
Eine Licht-bis-Schatten-Skala erzeugen
Wähle Grundfarbe, Methode und Stufenzahl. Die Skala wird sofort im Browser aktualisiert.
Aufhellung 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- Weißer Text
- 1.21:1Unter AA
- Schwarzer Text
- 17.39:1AA normal
--toon-shade-01Aufhellung 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- Weißer Text
- 1.48:1Unter AA
- Schwarzer Text
- 14.15:1AA normal
--toon-shade-02Aufhellung 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- Weißer Text
- 1.85:1Unter AA
- Schwarzer Text
- 11.36:1AA normal
--toon-shade-03Basis#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- Weißer Text
- 2.34:1Unter AA
- Schwarzer Text
- 8.97:1AA normal
--toon-shade-04Schatten 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- Weißer Text
- 4.22:1AA groß
- Schwarzer Text
- 4.97:1AA normal
--toon-shade-05Schatten 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- Weißer Text
- 7.76:1AA normal
- Schwarzer Text
- 2.71:1Unter AA
--toon-shade-06Schatten 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- Weißer Text
- 14.04:1AA normal
- Schwarzer Text
- 1.50:1Unter AA
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}So entstehen nützliche Farbstufen
Eine Skala ist wiederverwendbar, wenn Quelle, Abstand und Zweck eindeutig sind. Folge bei jeder Überarbeitung demselben kurzen Ablauf.
1. Mit einem verlässlichen HEX starten
Nutze den Wert aus Designdatei, Marken-Token oder geprüfter Probe statt einer komprimierten Bildschirmaufnahme. Der Generator erhält ihn exakt in der Mitte, sodass jede Nachbarstufe nachvollziehbar bleibt.
2. Die Methode nach Aufgabe wählen
Klassisch ist vorhersehbar für Flächen, Ränder, Diagramme und Zustände. Toon ist eine gestalterische Heuristik für Licht und Schatten. Vergleiche beide und bleibe bei der einfachen Skala, wenn der Farbtonwechsel keine Hierarchie verbessert.
3. Kontrast im Kontext prüfen
Nutze die Verhältnisse als schnellen Filter. Prüfe vor Veröffentlichung echte Schriftgröße, Gewicht, Nachbarfarbe, Fokus und Interaktionszustand. Eine bestandene Farbe macht nicht automatisch die gesamte Komponente barrierefrei.
Klassische und Toon-Schattierungen
Beide Methoden bewahren die Basis in der Mitte, lösen jedoch verschiedene Aufgaben.
| Methode | Veränderung | Geeignet für | Beachten |
|---|---|---|---|
| Klassisch | Lineare RGB-Mischung zu Weiß oder Schwarz | UI-Flächen, Ränder, Diagramme, neutrale Token-Rampen | Mittlere Stufen können grau oder mechanisch wirken |
| Toon | HSB-Kurve mit kleinen Farbton- und Sättigungswechseln | Figuren, Game-UI, Sticker, flache Illustration | Kreativer Start, keine offizielle Markenspezifikation |
| Kontrast | WCAG-Leuchtdichteverhältnis zu reinem Weiß und Schwarz | Erste Textauswahl für jede Farbe | Echte Schrift, Größe, Zustand und Komponente prüfen |
Wie die Farbstufen berechnet werden
Eine ungerade Anzahl erzeugt eine echte Mitte. Fünf Stufen enthalten zwei hellere Farben, die Originalbasis und zwei dunklere; sieben und neun ergänzen feinere Abstände auf beiden Seiten. Klassische Tints mischen die RGB-Kanäle in Richtung 255, Schatten in Richtung null. Die äußersten Stufen enden vor reinem Weiß und Schwarz und behalten damit farbliche Identität. Da die Basis nicht neu berechnet wird, bleiben HEX, RGB und HSB exakt.
Toon folgt einer anderen Kurve. Lichter werden heller, etwas weniger gesättigt und um wenige Grad in eine wärmere Richtung verschoben. Schatten verlieren Helligkeit, gewinnen etwas Sättigung und bewegen sich in die Gegenrichtung. Die Änderung wächst mit dem Abstand zur Mitte. Das ist eine transparente Design-Heuristik, keine physikalische Lichtsimulation. Material, Umgebungslicht, Reflexion und Komposition können eine andere Richtung verlangen; das Ergebnis bleibt ein bearbeitbarer Entwurf.
Tint, Ton und Schatten unterscheiden
In traditioneller Farbtheorie entsteht ein Tint durch Zugabe von Weiß, ein Shade durch Schwarz und ein Ton meist durch Grau, das die Intensität verringert. Digitale Werkzeuge nennen häufig jede helle oder dunkle Variation „Shade“, wodurch Definitionen verschwimmen. Dieser Generator bezeichnet die helle Seite als Aufhellung und die dunkle als Schatten. Die klassische Methode fügt keine eigene graue Tonreihe ein; die Basis bleibt die Referenz.
Bei der Übergabe ist die Unterscheidung wichtig. „Schatten 2“ ist mit gespeicherter Methode, Basis und Stufenzahl reproduzierbar; „etwas dunkler“ ist es nicht. Kopiere den kompletten CSS-Block, wenn ein Projekt konsistente Namen braucht. Wird für Hover oder deaktivierte Zustände eine entsättigte Farbe benötigt, erstelle sie bewusst mit dem HSB-Picker, statt jeden Mittelpunkt einer Weiß-Schwarz-Rampe als passenden Ton anzunehmen.
Toon-Schatten ohne schlammige Farben
Ein häufiger Fehler senkt alle RGB-Kanäle gleichmäßig, bis der Schatten geschwärzt wirkt. Das Objekt behält technisch seine Farbfamilie, verliert aber die Energie der Zeichnung. Kleine Verschiebungen von Farbton und Sättigung halten dunkle Bereiche farbig. Toon zeigt diese Möglichkeit mit einer zurückhaltenden Kurve und gibt Licht sowie tiefem Schatten unterschiedlichen Charakter, während benachbarte Stufen gut vergleichbar bleiben.
Nutze für flache Kunst wenige Stufen. Fünf Farben decken oft Highlight, Licht, Basis, Schatten und Tiefschatten ab; neun passen zu UI-Tokens oder gradueller Darstellung. Verwende nicht jede erzeugte Farbe nur weil sie existiert. Wähle die minimal sichtbaren Rollen, benenne sie nach Zweck und prüfe sie in tatsächlicher Größe. Auf großen Mustern sichtbare Unterschiede können in kleinen Icons oder dünnen Konturen verschwinden.
WCAG-Kontrastverhältnisse richtig lesen
Die Zahl vergleicht die relative Leuchtdichte einer erzeugten Farbe mit reinem Weiß oder Schwarz. WCAG 2.2 verlangt auf AA-Niveau mindestens 4.5:1 für normalen und 3:1 für großen Text; das erweiterte Kriterium setzt 7:1 für normalen Text. Die Labels verwerfen schwache Kombinationen schnell, kennen aber Schriftgröße, Gewicht, Transparenz, Verlauf, Hintergrundbild, Hover und Fokus des Endprodukts nicht.
Die kontrastreichere Vordergrundfarbe ist nur eine erste Empfehlung. Teste echte Komponenten bei üblichen Zoomstufen und berücksichtige bei Bedarf nicht-textliche Bedienelemente. HSB-Helligkeit ist nicht die WCAG-Leuchtdichte. Zwei Farben mit gleichem B-Prozentwert können sehr unterschiedliche Verhältnisse haben, weil Rot, Grün und Blau unterschiedlich zur wahrgenommenen Helligkeit beitragen.
Standards, Messwerte und Methodenhinweise
Der Generator trennt reproduzierbare Berechnung von Gestaltung. Diese Primärquellen erklären Formate, Begriffe und Schwellen.
- CSS Color Module Level 4 definiert sechsstellige HEX-Notation als drei 8-Bit-sRGB-Kanäle. Jeder Kanal hat 256 Werte; vor Alpha ergeben sich 16.777.216 RGB-Kombinationen. W3C CSS Color Module Level 4
- WCAG 2.2 fordert auf AA-Niveau 4.5:1 für normalen und 3:1 für großen Text; das erweiterte Kriterium nutzt 7:1 für normalen Text. W3C Web Content Accessibility Guidelines 2.2
- Die klassische Skala ist reproduzierbare RGB-Interpolation. Toon ist eine Toon-Tone-Heuristik, kein Lichtmodell, keine offizielle Markenpalette und kein vollständiger Barrierefreiheitsnachweis. W3C-Farbtheorie-Referenz
WCAG 2.2 sagt:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Mit dieser Palette weiterarbeiten
FAQ zum Farbschattierungen-Generator
Was ist der Unterschied zwischen Tint und Shade?
Ein Tint mischt eine Farbe zu Weiß, ein Shade zu Schwarz. Ton bedeutet meist die Zugabe von Grau. Das Werkzeug ordnet Aufhellungen vor und Schatten nach der exakten Basis an.
Bleibt mein ursprünglicher HEX-Wert erhalten?
Ja. Dreistelliges HEX wird auf sechs Stellen erweitert; der normalisierte Wert bleibt exakt in der Mitte jeder Fünf-, Sieben- oder Neun-Stufen-Skala.
Welche Methode passt zu Interfaces?
Beginne für vorhersehbare Flächen, Ränder und Zustände mit Klassisch. Teste Toon, wenn Illustration oder Spiel von wärmerem Licht und kühleren Schatten profitiert.
Garantieren die WCAG-Labels Barrierefreiheit?
Nein. Sie berechnen nur das Verhältnis zu reinem Weiß oder Schwarz. Prüfe echten Vordergrund, Hintergrund, Schriftgröße, Gewicht, Zustand und gesamte Komponente.
Werden meine Farben hochgeladen oder gespeichert?
Nein. Erzeugung, Kopieren, Kontrast und PNG laufen ohne Konto im Browser. Die Datei wird lokal auf deinem Gerät erstellt.