cldsi.de — Web Development in Design & Code

Apples Dark Mode Farben

Seit der Einführung des Darkmodes in iOS 13 und Mac OS Mojave ist dieser endgültig in der breiten Gesellschaft angekommen.
Auch große Websites/Apps wie Reddit und YouTube bieten diesen schon seit längerem an.

Um das Design entsprechend anzupassen, sind auch passende Farben zu verwenden. Welche Farben in iOS und Mac OS Verwendung finden, habe ich hier aufgelistet (wird fortlaufend aktualisiert):

FarbeHEX-CodeRGB-CodeVorschau
Grau 6#242426rgb(36,36,38)
Grau 5#2c2c2ergb(44,44,46)
Grau 4#3b3a3crgb(58,58,60)
Grau 3#48484argb(72,72,74)
Grau 2#636366rgb(99,99,102)
Grau 1#98989drgb(152,152,157)
Pink#ff375frgb(255,55,95)
Lila#bf5af2rgb(191,90,242)
Indigo#5e5ce6rgb(94,92,230)
Blau#0a84ffrgb(10,132,255)
Teal#64d2ffrgb(100,210,255)
Grün#30d158rgb(48,209,88)
Gelb#ffd60argb(255,214,10)
Orange#ff9f0argb(255,159,10)
Rot#ff453argb(255,69,58)

Hierbei handelt es sich um Systemfarben, die sich je nach Möglichkeit auch auf deiner Seite wiederfinden sollten, wenn du einen Dark-Mode einführst.

Während Grau 1-6 Hintergrund- und Labelfarben definieren, sind die anderen Farben jeweils für Buttons, Warnungen, Symbole und ähnliches gedacht.