Apple’s Human Interface Guidelines provides two primary color palettes for each platform, light and dark.
On iOS, each palette is accompanied by an accessible variant where the temperature and transparency of colors are adjusted to provide higher contrast and brightness. Both light and dark palettes can be used with theme_sf_light()
and theme_sf_dark()
themes. However, we recommend using light palettes with light themes, and dark palettes with dark themes.
iOS Light Palette
iOS Accessible Light Palette
On macOS, in addition to light and dark palettes and their accessible forms, each palette is accompanied with a vibrant variant where the contrast between colors is even higher.
macOS Light Palette
macOS Vibrant Light Palette
On watchOS, only one color palette is provided. The watchOS color palette is specifically designed to provide higher level of contrast and brightness, and it is best accompanied by dark themes.
watchOS Dark Palette
Collectively, sfthemes offers 17 color palettes:
- iOS Light
- iOS Accessible Light
- iOS Dark
- iOS Accessible Dark
- iOS Gray Light
- iOS Accessible Gray Light
- iOS Gray Dark
- iOS Accessible Gray Dark
- macOS Light
- macOS Accessible Light
- macOS Vibrant Light
- macOS Accessible Vibrant Light
- macOS Dark
- iOS Accessible Dark
- macOS Vibrant Dark
- iOS Accessible Vibrant Dark
- watchOS Dark
Color’s Order
Each palette in sfthemes can be sorted in two ways. The default
order returns colors of the palette according to their appearance in Apple’s HIG document, and the contrast
(default) order returns an optimized ordering of colors to maximize their in-between contrast.
iOS palette ordered for more in-between contrast
iOS palette ordered for more in-between contrast