iOS System Colors Reference
Browse all iOS system colours as defined in Apple’s Human Interface Guidelines - 13 semantic system colours (Red, Orange, Yellow, Green, Mint, Teal, Cyan, Blue, Indigo, Purple, Pink, Brown, Gray with 6 grayscale variants), label/text colours at 4 emphasis levels (Primary through Quaternary), fill colours at 4 opacities, background colours with system and grouped variants, separator colours, and link/tint colours. Each colour includes light and dark mode HEX and RGB values. Search by name or HEX, filter by 6 categories, toggle between light and dark mode, and copy values with one click.
Browse all 37 iOS system colors across 6 categories - semantic system colours, text/label colors, fill colors, background colors, separator colors, and link/tint colors. Each colour includes light and dark mode HEX and RGB values with one-click copy.
Showing 37 of 37 iOS system colors · Dark mode
Apple HIG · iOS 18
Why Use Our iOS System Colors Reference?
Complete iOS 18 System Color Reference
Browse all iOS system colors as defined in Apple's Human Interface Guidelines - 13 semantic system colours (blue, red, green, orange, yellow, pink, purple, indigo, teal, mint, cyan, brown, gray with 6 gray variants), 5 text/label emphasis levels, 4 fill opacities, 6 background variants, 2 separator styles, and link/tint colors.
Light & Dark Mode Values Side by Side
Every color includes both light mode and dark mode HEX and RGB values. The light/dark toggle lets you switch the display instantly to see how colors adapt between appearances. Mini swatches show both variants at a glance for easy comparison.
Search & Filter by Category
Quickly find any iOS system colour by searching by name, HEX value, or category. Filter by 6 categories - System Colors, Text & Label, Fill Colors, Background Colors, Separator Colors, and Link & Tint Colors. Copy HEX or RGB with one click.
One-Click Copy for HEX & RGB
Every colour card includes Copy buttons for both HEX and RGB values. The copied value matches the currently selected theme mode (light or dark) so you always get the correct value for your design context.
Common Use Cases for iOS System Colors
iOS App Development (SwiftUI & UIKit)
Reference the exact HEX and RGB values for UIColor.systemRed, UIColor.label, UIColor.systemBackground, and all other system colours when building iOS apps. Use the light and dark mode values to ensure your custom UI components match the native iOS appearance in both themes.
Web Apps with iOS Design Language
Design web applications that look native on iPhone and iPad by using iOS system colours as CSS custom properties. Copy the HEX values directly - use light mode values for light-theme websites and dark mode values for dark-theme sites. Match the iOS aesthetic without any native code.
UI Design Mockups & Prototypes
When designing iOS app mockups in Figma, Sketch, or Adobe XD, use the exact system colour values from our reference to ensure your designs match the platform. Toggle between light and dark mode values to create accurate mockups for both appearances.
Accessibility & Contrast Verification
Use the label, fill, and background colour values as reference when verifying WCAG contrast compliance for your iOS app or web design. Apple designs all HIG system colours to meet WCAG 2.1 AA requirements when used according to guidelines.
Choosing the Right System Color for UI Elements
Browse the 13 semantic system colours (red for destructive actions, blue for primary actions, green for success states, orange for warnings, etc.) to understand which colour to use for which purpose. Each colour includes a description of its recommended use case.
Design System Documentation
Reference the iOS system colour tokens when documenting a cross-platform design system. Use our reference as a quick lookup table for iOS-specific colour values, ensuring consistency between your design docs and the actual Apple HIG specifications.
Understanding iOS System Colors
What Are iOS System Colors?
iOS system coloursare a set of predefined semantic colours defined in Apple’s Human Interface Guidelines (HIG). They provide a consistent visual language across all iOS apps and are designed to work seamlessly in both light and dark mode. Instead of using arbitrary colour values for UI elements, Apple recommends using system colours - they automatically adapt to the user’s accessibility settings (like Increase Contrast and Reduce Transparency) and ensure a native look and feel.
The iOS Color System Architecture
iOS system colours are organised into several functional groups, each serving a specific purpose in the UI hierarchy:
- System Colors - 13 semantic colours (Red, Orange, Yellow, Green, Mint, Teal, Cyan, Blue, Indigo, Purple, Pink, Brown, Gray) plus 6 gray scale variants. These are used for specific semantic meanings - red for destructive actions, green for success, blue for primary actions.
- Label Colors - Primary, secondary, tertiary, and quaternary label colours that establish a clear text hierarchy. Primary label is nearly black/white for headings, while tertiary and quaternary are progressively more transparent for lower emphasis content.
- Fill Colors - Four fill colours at varying opacities (system fill through quaternary fill) for different UI element thicknesses. Lighter fills are used for thin elements like slider tracks; heavier fills for large background areas.
- Background Colors - System and grouped background colours with primary, secondary, and tertiary variants. These create visual hierarchy through surface depth.
Light & Dark Mode Adaptation
Every iOS system colour has distinct light mode and dark modevalues. The system automatically switches between these values based on the user’s appearance setting or the current light environment. For example,Label is pure black (#000000) in light mode for maximum contrast against white backgrounds, and pure white (#ffffff) in dark mode for optimal readability against dark surfaces. Some colours, like System Gray (#8e8e93), remain the same in both modes for consistency. Our reference tool lets you toggle between light and dark mode to see how each colour adapts.
Accessibility & Best Practices
Apple designs all HIG system colours to meet WCAG 2.1 AA contrast requirements when used according to guidelines. The four-tier label opacity system (primary → quaternary) ensures that more important text has higher contrast. System colours also work with accessibility features like Increase Contrast (which adjusts system colour values for even greater differentiation) and Reduce Transparency (which affects how fill and separator colours render). When building iOS apps, always prefer system colours with semantic meaning (like UIColor.systemRed for destructive actions) over arbitrary colour values - they ensure your app adapts correctly to all accessibility settings and future iOS updates.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output - free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database - free online color name finder.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components - live preview, HEX and RGB input. Free online color contrast checker.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors - enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Frequently Asked Questions About iOS System Colors
iOS system colours are predefined semantic colours defined in Apple's Human Interface Guidelines (HIG). They include semantic system colours (red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown, gray), text/label colours at four emphasis levels, fill colours at four opacities, background colours, separator colours, and link/tint colours. Each colour automatically adapts to light and dark mode.
In SwiftUI, use Color.red for semantic colours or Color(.label) for label colours. In UIKit, use UIColor.systemRed, UIColor.label, UIColor.systemBackground, etc. These automatically adapt to the current appearance mode and accessibility settings. For web development, copy the HEX or RGB values from our reference and use them as CSS custom properties.
The four label colour levels create a visual hierarchy through decreasing opacity. Primary Label (100% opacity) is for headings and primary content. Secondary Label (approx 60% opacity) is for subtitles and supporting text. Tertiary Label (approx 30% opacity) is for placeholder and metadata. Quaternary Label (approx 18% opacity) is for the lowest emphasis content like disabled labels and read-only fields.
Yes. Apple designs all HIG system colours to meet WCAG 2.1 AA contrast requirements when used according to guidelines - including text/background combinations using label and background colours. The primary label colour achieves 21:1 contrast ratio against system background colours in both light and dark modes. System colours also work with Increase Contrast and Reduce Transparency accessibility features.
iOS system colours use different values in light and dark mode to maintain optimal contrast and readability in each appearance. For example, Label changes from black (#000000) to white (#ffffff). Background colours invert (system background goes from white to black). Some colours like System Gray (#8e8e93) stay the same in both modes. The automatic switching ensures your UI is always readable regardless of the user's appearance setting.
Fill colours are semi-transparent colours used for UI element backgrounds: System Fill (approx 20% opacity) for thin elements like slider tracks; Secondary Fill (approx 16% opacity) for medium-thickness elements like button backgrounds; Tertiary Fill (approx 12% opacity) for thick elements like search bar backgrounds; Quaternary Fill (approx 8% opacity) for large background fills like table view backgrounds. The higher the fill level, the thinner/deeper the element.
The tint colour (also called accent colour) is defined by Apple's blue #007aff by default, but developers can customise it in their app. In SwiftUI, set .tint(). In UIKit, set window.tintColor or a view's tintColor. The tint colour is used for buttons, toggle switches, slider thumbs, and selected states. Our reference lists the default values, but your app's actual tint colour will be whatever you set.
System Background (#ffffff / #000000) is for plain, non-grouped views like standard table views and plain content screens. Grouped Background (#f2f2f7 / #000000) is for grouped table views and form sheets where content is organised into sections. In light mode, Grouped Background is slightly gray to visually separate sections. In dark mode, both are black since the dark background already provides sufficient section separation through the grouped cells' lighter backgrounds.