Skip to main content
FreeToolkit .ai

iOS- und Android-Systemfarben Durchstöbern Sie Systemfarben für iOS Human Interface und Android Material Design.

iOS- und Android-Systemfarben illustration
🎨

iOS- und Android-Systemfarben

Durchstöbern Sie Systemfarben für iOS Human Interface und Android Material Design.

1

Plattform auswählen

Wählen Sie iOS (Human Interface) oder Android (Material 3).

2

Erscheinungsbild umschalten

Für iOS zwischen hellen und dunklen Modusfarben wechseln.

3

Farben kopieren

Den HEX-Code einer beliebigen Systemfarbe kopieren.

Loading tool...

What Is iOS- und Android-Systemfarben?

Dieses Tool bietet eine umfassende Referenz für iOS- und Android-Systemfarben - die vordefinierten Farben, die Apple und Google für den Bau von nativen Anwendungen empfehlen. Die iOS-Systemfarben folgen Apples Human Interface Guidelines (HIG) und enthalten semantisch benannte Farben wie systemBlue, systemRed und systemGray-Varianten, jeweils mit separaten Werten für hellen und dunklen Modus. Die Android-Farben folgen den Material Design 3-Designtoken (Material You), einschließlich Primär-, Sekundär-, Tertiär-, Fehler- und Oberflächenfarben. Durch die Verwendung von Plattformsystemfarben wird sichergestellt, dass Ihre App nativ aussieht, auf Erscheinungsmodi (hell/dunkel) reagiert und die Barrierefreiheitsstandards beider Plattformen einhält. Diese Referenz erspart Entwicklern das Durchforsten von Dokumentationen und stellt sicher, dass sie die exakten Farbwerte verwenden, die von Apple und Google spezifiziert wurden.

Why Use iOS- und Android-Systemfarben?

  • Vollständige iOS-Systemfarben mit hellen und dunklen Modusvarianten
  • Material-3-Design-Token für die Android-Entwicklung
  • Offizielle Plattformfarben für ein natives App-Erscheinungsbild
  • Zwischen hellem und dunklem Modus (iOS) wechseln
  • Ein-Klick-Kopie für jede Farbe

Common Use Cases

iOS-Entwicklung

Exakte Systemfarbenwerte für die Swift-/SwiftUI-Entwicklung verwenden.

Android-Entwicklung

Material-3-Farbwerttoken für Kotlin/Jetpack Compose finden.

Cross-Platform-Design

iOS- und Android-Systemfarben beim Entwerfen von Cross-Platform-Apps vergleichen.

Figma/Sketch-Bibliotheken

Design-Tool-Bibliotheken mit genauen Plattform-Systemfarben einrichten.

Technical Guide

Die iOS-Systemfarben sind semantische Farben, die automatisch zwischen hellen und dunklen Erscheinungsbildern wechseln. Zum Beispiel ist systemBlue im hellen Modus #007AFF und im Dunkelmodus #0A84FF - leicht heller, um visuelle Prominenz gegen dunkle Hintergründe beizubehalten. Die Farbwerte sind in Apples UIKit (UIColor) und SwiftUI (Color)-Frameworks definiert. Android Material 3 verwendet ein tokenbasiertes System: Primär-, Sekundär- und Tertiärfarben für Schlüsselfarben, Oberfläche und Hintergrund für Container sowie On-*-Varianten für Inhalte auf diesen Oberflächen. Die Material-3-Tokens sind dafür ausgelegt, mit dynamischer Farbgenerierung aus Benutzerhintergründen über das Material You-System zu funktionieren. Beide Plattformen wählen leicht unterschiedliche Farben für den Dunkelmodus, um die wahrgenommene Helligkeit und den Kontrast gegen ihre jeweiligen dunklen Hintergrundfarben zu optimieren.

Tips & Best Practices

  • 1
    iOS-Systemfarben passen sich automatisch im Code an - verwenden Sie stattdessen UIColor.systemBlue anstelle von hartcodierten HEX-Werten
  • 2
    Android-Material-3-Token sollten über MaterialTheme in Jetpack Compose verwendet werden
  • 3
    Dunkle Modusfarben sind leicht heller als helle Modusfarben, um das visuelle Gewicht auf dunklen Hintergründen beizubehalten
  • 4
    Verwenden Sie semantische Namen (Systemfarben) anstelle von hartcodierten Werten für automatische Unterstützung des Dunkelmodus
  • 5
    iOS verfügt über sechs Graustufen (systemGray bis systemGray6) für verschiedene Hierarchieebenen

Related Tools

HEX zu RGB Konverter - free online tool

HEX zu RGB Konverter

Konvertieren Sie HEX-Farbcodes in RGB-Werte sofort mit einer Live-Vorschau.

🎨 Color Tools
Farbpicker - free online tool

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

🎨 Color Tools
Kontrastverhältnis-Prüfer - free online tool

Kontrastverhältnis-Prüfer

Überprüfen Sie die Kontrastverhältnisse von WCAG zwischen Vordergrund- und Hintergrundfarben.

🎨 Color Tools
Markenfarbpaletten - free online tool

Markenfarbpaletten

Durchstöbern Sie offizielle Farbpaletten von über 50 beliebten Marken und Technologieunternehmen.

🎨 Color Tools
Material Design Farben - free online tool

Material Design Farben

Durchsuchen Sie die vollständige Material-Design-Farbpalette mit allen Schattierungen und Akzentfarben.

🎨 Color Tools

Frequently Asked Questions

Q Warum sind dunkle Modusfarben anders als helle Modusfarben?
Dunkle Modusfarben werden angepasst, um das visuelle Gewicht und die Lesbarkeit auf dunklen Hintergründen beizubehalten. Die einfache Umkehrung von hellen Modusfarben ergibt keine guten Ergebnisse, da die menschliche Wahrnehmung von Helligkeit nicht linear ist.
Q Sollte ich diese genauen HEX-Werte in nativem Code verwenden?
Verwenden Sie die Plattform-APIs (UIColor.systemBlue, MaterialTheme.colorScheme.primary), da sie automatisch Änderungen des Erscheinungsbilds verarbeiten. Verwenden Sie diese HEX-Werte für Design-Tools und als Referenz.
Q Stimmen diese mit den neuesten OS-Versionen überein?
Diese stellen die Standardplattformfarben dar. Apple und Google passen gelegentlich Werte in neuen OS-Versionen an. Überprüfen Sie immer gegen die neueste SDK-Dokumentation für Produktions-Apps.

About This Tool

iOS- und Android-Systemfarben is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.