We’ve all experienced the situation:
You make a beautiful app and choose every color carefully. It looks clean and polished. Then you switch to dark mode. Suddenly text is hard to read, buttons disappear and your design falls apart.

Let me show you how to avoid these problems when using colors on iOS and macOS.

All iOS and macOS colors are listed in this article. You might want to bookmark it for later reference.

Warning: not all “blue” colors are the same blue color.
Read to end to find out why.

Also, check out these colors: Blue and Red and Purple (last is for anime fans). Which is your favorite? (send your response to [email protected]).

Why use system colors instead of fixed colors?

iOS and macOS provide a set of system colors. Use these instead of fixed colors to always adapt to the environment (light or dark mode, high contrast accessibility setting).

Since they adapt to the current environment, the displayed color changes based on the current settings. (e.g. .systemBlue in light mode differs from dark mode)

Using system colors ensures that your app always looks great and is accessible to everyone.

For detailed usage instruction, check Apple Design Guidelines: Color.

Fixed colors (UIKit and AppKit)

There are fixed colors that always stay the same regardless of the OS or environment.

SwiftUI doesn't have built-in fixed colors; however, you can convert UIKit colors to SwiftUI colors. To convert to SwiftUI Color, simply pass the UIColor to the Color(uiColor:) constructor.

How to access colors:

• UIKit: UIColor.colorName (e.g. UIColor.blue)
• AppKit: NSColor.colorName (e.g. NSColor.blue)

System colors (UIKit, SwiftUI and AppKit)

System colors change according to the current settings.

There are two types of system colors:

• standard colors — usual colors (e.g. blue, red, yellow, …)
• element colors — used for UI elements (e.g. labels, backgrounds, …)
  • their names signify their usage pretty clearly (e.g. .labelColor is mainly used for text)

Standard colors

iOS (UIKit: UIColor)

macOS (AppKit: NSColor)

iOS and macOS (SwiftUI: Color)

SwiftUI uses by default adaptive colors when using the Color data structure. These provide the same result as the colors with the “.system” prefix.

• Color.red is the same as
  • UIColor.systemRed (on iOS)
  • NSColor.systemRed (on macOS)
• And so on …

UI element colors

iOS (SwiftUI: Color)

SwiftUI doesn’t provide distinct colors for specific UI elements. Instead, it offers a limited set of colors that broadly reflect their purpose.

• primary — primary labels
• secondary — secondary labels, similar to primary but it’s a bit transparent
• accentColor — accent color of the app, can be set for each app

iOS (UIKit: UIColor)

macOS (AppKit: NSColor)

Since iOS and macOS are different platforms, they have different UI components so they also have a different set of UI element colors available.

Easter egg: What color is the dress?

This is an edge case, but luckily iOS developers don’t need to handle it.