Dark-Mode-Farbpaletten-Generator
Erzeugen Sie aus einer einzigen Akzentfarbe eine vollständige Palette (Hintergründe, Flächen, Texte, Akzent, Zustände) für eine stimmige Oberfläche im Dunkelmodus. Die Farbtöne werden vollständig in Ihrem Browser berechnet.
So funktioniert es
Eine gute dunkle Oberfläche besteht nicht einfach darin, Schwarz und Weiß zu vertauschen: Hintergründe sollten leicht getönt und nie ganz schwarz sein, um einen zu harten Kontrast zu vermeiden, und der Akzent muss hell genug sein, um auf dunklem Grund lesbar zu bleiben. Dieses Tool berechnet diese Abstufungen automatisch aus dem Farbton Ihrer Akzentfarbe in HSL und erzeugt so ein stimmiges Farbset, das Sie als CSS-Variablen direkt in Ihr Stylesheet einfügen können.
Warum sollte man im Dunkelmodus auf einen komplett schwarzen Hintergrund (#000000) verzichten?
Reines Schwarz in Kombination mit reinweißem Text erzeugt einen extremen Kontrast, der die Augen ermüdet und auf manchen OLED-Displays einen Halo-Effekt (visuelles Flimmern) hervorruft. Professionelle dunkle Oberflächen (macOS, Material Design) verwenden stattdessen sehr dunkle, leicht getönte Grautöne – genau das bildet diese Palette nach.
Sollte man die Akzentfarbe ebenfalls an den Dunkelmodus anpassen?
Ja: Eine Akzentfarbe, die auf hellem Grund gut funktioniert, kann auf schwarzem Grund matt oder zu dunkel wirken. Dieses Tool hellt die vorgegebene Akzentfarbe leicht auf, damit sie einen guten Kontrast behält und auf den erzeugten dunklen Hintergründen gut sichtbar bleibt.
Es werden weder Farben noch Einstellungen an einen Server übertragen: Alle Farbberechnungen laufen lokal in Ihrem Browser.