Skip to content

iOS System Colors

DesignTypography and Icons

A name returns that colour; a hex code returns the closest system colour.

Appearance
Hex value —
UIKit name
—
SwiftUI
—
UIKit code
—
RGB
—
HSL
—
Other appearance hex
—
RGB distance from your hex
—

The iOS system colours are Apple's 13 adaptive tints, from systemRed to systemGray, each with a light and a dark value. systemBlue, the default tint, is #007AFF, or RGB(0, 122, 255), in light mode and #0A84FF in dark mode. Type a name or a hex code to see both values with the SwiftUI and UIKit names.

About this tool

Designers mocking up an iPhone screen in Figma and developers matching a web view to native controls both need the exact values behind names like systemTeal or systemIndigo. This lookup takes a colour name, with or without the system prefix, or any 3- or 6-digit hex code. A name returns that colour; a hex code returns the nearest system colour for the chosen appearance and how far away it is in RGB units. You get the hex, RGB and HSL forms, the matching value in the other appearance, the SwiftUI and UIKit spellings, and a table of all 13 colours in both modes. The values are Apple's default sRGB ones; the increased-contrast accessibility variants and the semantic label and background colours are not included, and Apple can adjust the palette in a new iOS release.

How to use it

  1. Type a name or hex

    Enter blue, systemBlue, .blue or a code such as #34C759. Letter case does not matter.

  2. Pick the appearance

    Choose Light mode or Dark mode; every output switches to that set of values.

  3. Copy the format you need

    Take the hex, rgb() or hsl() string for CSS, or the SwiftUI and UIKit names for code.

  4. Scan the full table

    The table lists all 13 system colours with their light and dark hex codes side by side.

Examples

systemBlue in light mode

Colour name or hex code
blue
Appearance
Light mode

Result Hex value: #007AFF
UIKit name: systemBlue
SwiftUI: Color.blue
UIKit code: UIColor.systemBlue
RGB: rgb(0, 122, 255)
HSL: hsl(211, 100%, 50%)
Other appearance hex: #0A84FF
RGB distance from your hex: 0

  1. "blue" matches the name systemBlue.
  2. Light value: RGB(0, 122, 255) = #007AFF.

The default iOS tint colour, with its dark-mode partner #0A84FF shown alongside.

systemGreen in dark mode

Colour name or hex code
systemGreen
Appearance
Dark mode

Result Hex value: #30D158
UIKit name: systemGreen
SwiftUI: Color.green
UIKit code: UIColor.systemGreen
RGB: rgb(48, 209, 88)
HSL: hsl(135, 64%, 50%)
Other appearance hex: #34C759
RGB distance from your hex: 0

  1. "systemGreen" matches the name systemGreen.
  2. Dark value: RGB(48, 209, 88) = #30D158.

Dark mode lifts the green slightly brighter so it holds contrast on a black background.

A hex one step off systemRed

Colour name or hex code
#FF3B31
Appearance
Light mode

Result Hex value: #FF3B30
UIKit name: systemRed
SwiftUI: Color.red
UIKit code: UIColor.systemRed
RGB: rgb(255, 59, 48)
HSL: hsl(3, 100%, 59%)
Other appearance hex: #FF453A
RGB distance from your hex: 1

  1. Read #FF3B31 as RGB(255, 59, 49).
  2. Nearest light system colour by RGB distance: systemRed at 1.
  3. Light value: RGB(255, 59, 48) = #FF3B30.

#FF3B31 differs from systemRed by one unit of blue, so the match distance is 1.

How it is calculated

distance = √((R₁ − R₂)² + (G₁ − G₂)² + (B₁ − B₂)²)

R₁, G₁, B₁
channels of the hex code you typed, 0–255
R₂, G₂, B₂
channels of a system colour in the chosen appearance

Names are matched directly against Apple's published table. For a hex code, the tool measures the straight-line distance in RGB space to each of the 13 colours and returns the smallest. A distance of 0 is an exact match; above about 40 the colours look clearly different and a warning appears. HSL is derived from the same RGB values with the standard hue, saturation and lightness conversion, rounded to whole numbers.

When not to use it

  • Matching semantic colours such as label or systemBackground, which are not in this palette.
  • Checking the increased-contrast variants that apply when that accessibility setting is on.
  • Judging perceptual similarity precisely, since plain RGB distance is only a rough guide.

Common mistakes

  • Hard-coding #007AFF in an app instead of using systemBlue, which loses the dark-mode switch.
  • Using the light value on a dark background, where the dark value was tuned for contrast.
  • Assuming systemGray has a different dark value; both modes use #8E8E93.

Frequently asked questions

What hex code is iOS blue?

systemBlue is #007AFF, RGB(0, 122, 255), in light mode and #0A84FF, RGB(10, 132, 255), in dark mode. It is the default tint for buttons and links in UIKit and SwiftUI.

Why do the dark mode values differ from the light ones?

Apple lifts most tints slightly in dark mode so they keep enough contrast against near-black backgrounds. systemRed, for example, moves from #FF3B30 to #FF453A. Gray is the one colour that stays the same in both appearances.

How many system colours does iOS have?

This table covers the 13 tints Apple lists: red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown and gray. Mint and cyan arrived with iOS 15. iOS also has six extra grays (systemGray2 to systemGray6) and semantic colours, which are listed separately.

Can I use these values in CSS for a web app?

Yes. Copy the rgb() or hex string and pair the light and dark values with a prefers-color-scheme media query. Safari also exposes some system colours through the -apple-system-* keywords, but the plain values work in every browser.

What does the RGB distance number mean?

It is how far your hex code sits from the matched system colour, measured as a straight line across the red, green and blue channels. 0 means identical; small values like 1 to 10 are hard to tell apart by eye.

Are these the same colours used on macOS?

macOS uses the same named tints, but several of its values differ slightly from iOS, so check Apple's macOS column before reusing these codes in a Mac app.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 28). iOS System Colors. Tools Directory. Retrieved October 28, 2026, from https://tools.milunir.com/design/typography-and-icons/ios-system-colors/

MLA

Tools Directory Editorial Team. “iOS System Colors.” Tools Directory, 28 Oct. 2026, https://tools.milunir.com/design/typography-and-icons/ios-system-colors/. Accessed 28 Oct. 2026.

Chicago

Tools Directory Editorial Team. “iOS System Colors.” Tools Directory. Last modified October 28, 2026. Accessed October 28, 2026. https://tools.milunir.com/design/typography-and-icons/ios-system-colors/.

Link<a href="https://tools.milunir.com/design/typography-and-icons/ios-system-colors/">iOS System Colors – Tools Directory</a>