Dark-Mode-Farbpaletten: 12 Paletten mit Hex-Codes für die Nacht
Zwölf Dark-Mode-Farbpaletten mit exakten Hex-Codes: Akzente, die nachts leuchten, Akzente, die untergehen, ein Akzent für zwei Themes und gebrochenes Weiß, das nicht blendet.
Eine Dark-Mode-Palette ist nicht die helle Palette auf den Kopf gestellt. Der Akzent verhält sich auf einer dunklen Seite anders, der Text muss weicher sein, und manche Farben funktionieren einfach nicht mehr. Hier sind zwölf dunkle Paletten mit jedem Hex-Code, gebaut, um zu zeigen, was sich bei Nacht ändert.
Dark Mode dreht deinen Akzent um
Die Akzente, die auf Weiß schwächeln, sind die, die auf dunklem Grund leuchten. Die Akzente, die auf Weiß solide wirken, können ihre Schärfe verlieren. Ein dunkles Theme kann sich den Akzent des hellen Themes also nicht einfach borgen, ohne zu prüfen.
Jede Palette unten besteht aus einer hellen Tinte, einem Akzent und einer dunklen Fläche. Die Kacheln zeigen den Akzent auf der dunklen Seite und auf Weiß. Das System hinter einem dunklen Theme erklärt unser Paper zu Dark-Mode-Farbsystemen.
Lime
Electric Lime #C6F432 auf Graphite #17181C: leuchtet
Derselbe Akzent auf Weiß: blass
Chalk #F2F3EE auf Graphite
Electric Lime ist auf Weiß fast unsichtbar und leuchtet auf Graphite. Die Farben, die auf Weiß schwächeln, sind die, die nachts strahlen.
Pink
Hot Pink #FF4F9A auf Night Plum #1A1218: leuchtet
Derselbe Akzent auf Weiß: schwächer
Blush White #F6EEF2 auf Night Plum
Hot Pink ist auf Weiß schwächer und auf Night Plum deutlich stärker.
Amber
Amber #FFB020 auf Coffee Black #1B1610: leuchtet
Derselbe Akzent auf Weiß: blass
Warm White #F5F0E6 auf Coffee Black
Amber ist auf Weiß ein schwacher Akzent und auf Coffee Black ein warmer, starker.
Royal
Royal #3B4CCA auf Midnight #121426: geht unter
Derselbe Akzent auf Weiß: stark
Frost #EEF0FA auf Midnight
Royal ist das Lehrbuchblau für den Light Mode. Auf Midnight sinkt es unter das, was ein Button braucht, um als Form erkannt zu werden: gleicher Hex, andere Seite.
Gleicher Hex, andere Seite. Royal ist der Kandidat, auf den du achten musst: Ein Button, der auf Weiß funktioniert, kann nachts untergehen.
Ein Akzent, zwei Themes
Ein Button muss sich von der Seite abheben, auf der er sitzt. Waikiki schafft das auf seiner hellen und auf seiner dunklen Seite. Very Berry auch. Ein Hex, beide Themes.
Lime Punch und Gentian Blue nicht. Jeder sieht in einem Theme großartig aus und verschwindet im anderen.
Waikiki
Waikiki
Auf Silver Bird #FBF8F1: besteht
Auf Midnight Oil #10141F: besteht
Ein mitteltoniges Türkis, das sich auf beiden Seiten abhebt. Ein Hex, beide Themes.
Very Berry
Very Berry
Auf French Porcelain #F7F4FB: besteht
Auf Twilight Zone #0F1C16: besteht
Noch ein Mittelton, der auf seiner hellen und seiner dunklen Seite funktioniert.
Lime Punch
Lime Punch
Auf Ceramic #FBFAF5: fällt durch
Auf Infinite Night #171538: besteht
Zu hell für den Light Mode: Auf der Tagesfläche verschwindet der Button fast. Auf Infinite Night leuchtet er.
Gentian Blue
Gentian Blue
Auf Open Book #F6EFE5: besteht
Auf Balsamico #1C1612: fällt durch
Zu dunkel für den Dark Mode. Auf Open Book ist es stark und auf Balsamico verschwindet es.
Wenn du einen Akzent für beide Themes willst, nimm einen Mittelton und prüfe ihn doppelt. Wenn nicht, gib jedem Theme seinen eigenen Farbton. Unser Leitfaden zu Dark-Mode-Design zeigt, wie du das zweite Theme auslieferst.
Off-White schlägt Reinweiß
Reines Weiß auf einer fast schwarzen Fläche ist der stärkste Kontrast, den du bekommen kannst, und genau das ist das Problem: Es blendet. Die Off-Whites in diesen Paletten sind immer noch weit leichter lesbar, als Fließtext es braucht.
Das dunkle Theme von Material Design setzt seinen Haupttext aus demselben Grund auf 87 % Weiß. Gib dem Off-White ein bisschen Wärme oder ein bisschen Kühle und lass den Akzent reden.
Smoked Salmon
Distant Cloud #E7ECEC auf Dark Moon #0B1B1F
Reinweiß #FFFFFF auf Dark Moon: blendet
Smoked Salmon #FF887A auf Dark Moon
Ein kühles Off-White mit einem warmen Korallenakzent. Der Akzent hebt sich ganz ohne Hilfe klar ab.
Minted Elegance
Vanilla Sugar #F1EBDF auf Violet Void #1C1022
Reinweiß #FFFFFF auf Violet Void: blendet
Minted Elegance #4FCB9C auf Violet Void
Vanilla Sugar hat ein bisschen Wärme, und der Minzakzent hat auf Violet Void reichlich Platz.
Malibu
Milk and Cookies #EFE7E7 auf Asphalt #1C140F
Reinweiß #FFFFFF auf Asphalt: blendet
Malibu #57BAF0 auf Asphalt
Ein warmes Off-White auf einem warmen Fast-Schwarz, mit einem Himmelblau, das sich hindurchschneidet.
Dream Vapour
Star Magnolia #EAEFE4 auf Black Stallion #0E1A16
Reinweiß #FFFFFF auf Black Stallion: blendet
Dream Vapour #BB9DF0 auf Black Stallion
Star Magnolia tendiert leicht ins Grüne, was gut zu einem sanften Flieder-Akzent passt.
Jeder Akzent in diesen vier Paletten hebt sich auf seiner Nachtfläche klar ab, also kann der Text leise bleiben.
Alle zwölf Paletten in einer Tabelle
| Palette | Farben | Was sie zeigt |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | Leuchtet auf Dunkel |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | Stärker auf Dunkel |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | Leuchtet auf Dunkel |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | Geht auf Dunkel unter |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | Funktioniert in beiden Themes |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | Funktioniert in beiden Themes |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | Funktioniert nur auf Dunkel |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | Funktioniert nur auf Hell |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | Off-White-Text |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | Off-White-Text |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | Off-White-Text |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | Off-White-Text |
Die Zahlen, für alle, die die Entscheidung verteidigen müssen
Jede Kombination wurde mit der WCAG-2-Kontrastformel gegen die Fläche gemessen, auf der sie sitzt. Das ist die einzige Tabelle im Paper mit Kontrastverhältnissen.
| Palette | Test | Verhältnis | Ergebnis |
|---|---|---|---|
| Lime | Akzent auf der dunklen Fläche / auf Weiß | 13.84:1 / 1.28:1 | Leuchtet, blass |
| Pink | Akzent auf der dunklen Fläche / auf Weiß | 5.98:1 / 3.07:1 | Stärker auf Dunkel |
| Amber | Akzent auf der dunklen Fläche / auf Weiß | 9.82:1 / 1.83:1 | Leuchtet, blass |
| Royal | Akzent auf der dunklen Fläche / auf Weiß | 2.66:1 / 6.83:1 | Geht auf Dunkel unter |
| Waikiki | Button auf Hell / auf Dunkel | 3.2:1 / 5.2:1 | Besteht beide |
| Very Berry | Toggle auf Hell / auf Dunkel | 3.9:1 / 4.0:1 | Besteht beide |
| Lime Punch | Button auf Hell / auf Dunkel | 1.4:1 / 11.1:1 | Fällt durch, besteht |
| Gentian Blue | Play-Button auf Hell / auf Dunkel | 8.9:1 / 1.7:1 | Besteht, fällt durch |
| Smoked Salmon | Off-White-Text / Reinweiß / Akzent | 14.7:1 / 17.6:1 / 7.6:1 | Besteht, blendet, besteht |
| Minted Elegance | Off-White-Text / Reinweiß / Akzent | 15.4:1 / 18.3:1 / 9.0:1 | Besteht, blendet, besteht |
| Malibu | Off-White-Text / Reinweiß / Akzent | 14.9:1 / 18.1:1 / 8.3:1 | Besteht, blendet, besteht |
| Dream Vapour | Off-White-Text / Reinweiß / Akzent | 15.2:1 / 17.8:1 / 7.8:1 | Besteht, blendet, besteht |
So baust du deine dunkle Palette
- Wähle zuerst die dunkle Fläche. Ein Fast-Schwarz wie Graphite #17181C oder Violet Void #1C1022 ist weicher als reines Schwarz.
- Setze den Text in ein Off-White. Gib ein bisschen Wärme oder ein bisschen Kühle dazu, wie bei Vanilla Sugar #F1EBDF.
- Teste den Akzent auf der dunklen Fläche. Verwende den Akzent des hellen Themes nicht wieder, ohne ihn zu prüfen.
- Entscheide dich für einen Akzent oder zwei. Wenn ein Akzent beide Themes bedienen muss, nimm einen Mittelton und prüfe ihn auf beiden Seiten. Sonst gib jedem Theme seinen eigenen Farbton.
- Prüfe den Button als Form. Er muss sich von der Seite abheben, nicht nur als Beschriftung gelesen werden.
Hol dir die Dateien für jedes Set
Jedes Set ist ein kostenloses Farbset auf Forge, mit Tap-to-copy-Codes, Swatch-Dateien für Figma und Adobe (ASE), CSS-Variablen und Design Tokens.
Kostenloses Farbset
Dark Mode dreht deinen Akzent um: Lime, Pink, Amber, Royal
Jeder Hex, dazu ASE-Swatches, CSS-Variablen und Design Tokens.
Kostenloses Farbset
Ein Akzent, zwei Themes: Waikiki, Very Berry, Lime Punch, Gentian Blue
Jeder Hex, dazu ASE-Swatches, CSS-Variablen und Design Tokens.
Kostenloses Farbset
Off-White für den Dark Mode: Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
Jeder Hex, dazu ASE-Swatches, CSS-Variablen und Design Tokens.
FAQ
Welche Farben funktionieren in einer Dark-Mode-Farbpalette am besten?
Eine fast schwarze Fläche, ein Off-White für den Text und ein Akzent, der sich auf dem Dunkel abhebt. Smoked Salmon #FF887A auf Dark Moon #0B1B1F mit Distant Cloud #E7ECEC für den Text ist ein gutes Beispiel.
Sollte der Dark Mode reinweißen Text verwenden?
Nein. Reines Weiß auf einer fast schwarzen Fläche blendet. Ein Off-White wie Vanilla Sugar #F1EBDF ist immer noch weit leichter lesbar, als Fließtext es braucht, und es ist weicher.
Kann ich im Light und Dark Mode dieselbe Akzentfarbe verwenden?
Nur wenn sie ein Mittelton ist. Waikiki #0098A4 hebt sich auf beiden Seiten ab. Lime Punch #B7DD31 verschwindet auf Hell und Gentian Blue #292BAE verschwindet auf Dunkel.
Warum verschwindet mein blauer Button im Dark Mode?
Ein Blau, das auf Weiß stark ist, kann für eine dunkle Fläche zu dunkel sein. Royal #3B4CCA geht auf Midnight #121426 unter. Nimm für das dunkle Theme ein helleres Blau.
Welche Farbe sollten Buttons im Dark Mode haben?
Eine, die sich von der dunklen Fläche abhebt. Electric Lime #C6F432, Hot Pink #FF4F9A und Amber #FFB020 tun das alle, weil helle Farben nachts leuchten.
Was ist die beste Hintergrundfarbe für den Dark Mode?
Ein Fast-Schwarz wie Graphite #17181C oder Coffee Black #1B1610, statt reinem Schwarz. Es ist neben einem Off-White weicher und lässt den Akzent trotzdem leuchten.
Quellen
- Farbnamen und Hex-Codes stammen aus den UX-Brainy-Farbsets auf Forge, Vol. 05, 09 und 10. Der Kontrast wurde mit der WCAG-2-Formel gegen die Fläche berechnet, auf der jede Farbe sitzt.
- Die Schwellenwerte für Text und Formen folgen W3C WCAG 2.2: Contrast (Minimum) und Non-text Contrast.
- Das dunkle Theme von Material Design setzt den Haupttext auf 87 % Weiß: Material Design, Dark theme.
- Zuerst als drei Karussells auf UX Brainy veröffentlicht: Der Akzent, der auf Weiß funktioniert, kann im Dark Mode verschwinden, Ein Akzent für Light und Dark Mode funktioniert nur in der Mitte und Dark Mode braucht keinen reinweißen Text.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
