Zum Inhalt springen
TextArray1.87.0
100% lokal

Dark-Mode-Farbpaletten-Generator

Konvertiere eine helle Farbpalette in ein dunkles Pendant mit geprüftem Kontrast.

Eingabe
30
Ausgabe
Verwandte Tools
Farbpaletten-GeneratorZufallsgeneratoren
KontrastprüfungEntwickler-Tools
CSS-Farbvariablen-ExtractorEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
Dark-Mode-Farbpaletten-Generator
Gebe die Farben aus einem hellen Design ein — eine pro Zeile — und dieses Tool generiert ein dunkles Pendant für jede Farbe, bereit für dein Stylesheet. Es wurde für die alltägliche Aufgabe entwickelt, ein dunkles Design nach dem bestehenden hellen Design umzusetzen: Übergebe dein Hintergrund-, Oberflächen- und Akzentfarben und erhalte dieselbe Menge, invertiert für eine dunkle Benutzeroberfläche.
Benennen jede Zeile wie eine CSS custom property ("background: #ffffff", "--accent: #3366cc") oder gib einfach einen Hex-Wert ein. Der dunkle Theme-Hintergrund legt den Seitenhintergrund fest, gegen den die Palette erstellt wird, und der Kontrast jeder Farbe wird gegen ihn überprüft. Ziel-Kontrast wählt WCAG AA (4.5:1) oder AAA (7:1) — Akzente (die gesättigteren Einträge für Text, Links und Icons) werden zum Zielwert verschoben, während gedämpfte Oberflächen ehrlich berichtet, aber niemals erzwungen werden, da ein Kartenhintergrund nicht als Text gelesen wird. Sättigung reduzieren macht Farben weicher, die ansonsten bei voller Sättigung im Dunkeln glühen würden, Akzent-Farbton beibehalten behält die Markenfarbe und Intensität unverändert, und Oberflächen auf Elevations-Stufen abbilden stuft neutrale Töne in eine subtile Reihe über dem Hintergrund, wie eine Karte über der dahinter liegenden Seite.
Eine Zeile, die das Tool nicht als Farbe lesen kann — ein verirrter Kommentar, eine leere Überschrift — wird übersprungen, anstatt den Rest zu unterbrechen, und die Anzahl wird in der Summe neben der Anzahl der generierten Farben und wie vielen Akzenten der Zielkontrast erreicht wird, angezeigt. Sehr lange Listen und Windows- oder Unix-Zeilenumbrüche werden beide ohne zusätzliche Einrichtung verarbeitet.
Alles läuft lokal in deinem Browser: Farben werden niemals hochgeladen oder irgendwohin gesendet. Kopiere das Ergebnis, lade es als .txt-Datei herunter oder sende die Ausgabe direkt zurück in die Eingabe, um die Palette weiter zu verfeinern.
Häufige Fragen
Welches Eingabeformat erwartet das Tool?
Eine Farbe pro Zeile als Hex-Wert. Benenne sie wie eine CSS-Variable ("primary: #3366cc") für einen lesbaren Variablennamen oder gib einen reinen Hex-Code ein und das Tool benennt ihn automatisch.
Wie entscheidet das Tool, welche Farben Akzente sind?
Eine Farbe mit merklicher Sättigung wird als Akzent behandelt — gedacht für Text, Links oder Icons — und wird zum Zielwert verschoben. Eine nahezu graue Farbe wird als Oberfläche behandelt und folgt stattdessen der Elevations-Zuordnung.
Warum erreicht nicht jede Farbe das Zielkontrastverhältnis?
Nur Akzente werden zum Ziel verschoben, da dieses Verhältnis eine Textkontrastregeln ist. Oberflächen- und Hintergrundfüllungen sind kein Text, daher wird ihr Kontrast in der Summe berichtet, aber nicht erzwungen.
Was macht "Oberflächen auf Elevations-Stufen abbilden"?
Es stuft deine neutralen, gering gesättigten Farben in kleinen, gleichmäßigen Schritten über dem neuen dunklen Hintergrund ab, anstatt ihre ursprüngliche Helligkeit widerzuspiegeln — das gleiche geschichtete Aussehen wie Karten, die über einem Seitenhintergrund sitzen.
Wird meine Farbliste irgendwo hochgeladen?
Nein. Die Palette wird vollständig in deinem Browser generiert und verlässt nie dein Gerät.