iOS and macOS Dark Mode Dynamic Colors Overview

by

While working on adding the integration of Dark Mode on macOS into Xamarin.Forms, I found that there wasn’t an overview for all the Dynamic Colors. I probably just missed it somewhere, but I decided to create my own anyway.

This will be a rather post, it’s mostly just a reference (for myself) to have a quick overview of the actual dynamic color values in light and dark mode for iOS and macOS. Values are presented in RGB and Hex.

Do note that the idea behind the dynamic colors is that they can be changed by Apple whenever they update styles throughout the OS. Always double-check in the current Human Interface Guide for iOS and macOS to see if the values are still current. Also, there are variations for high contrast and vibrant modes etc. Those are not in here. These overviews are just the default light/dark mode variants.

iOS Dynamic Colors Overview

Here is the color overview for iOS. Note that when the alpha is not specified it’s 100%.

Please note that you can’t use these colors with iOS pre-13.

Light Dark Name
R 0 G 122 B 255
#FF007AFF
R 10 G 132 B 255
#FF0A84FF
systemBlue
R 52 G 199 B 89
#FF34C759
R 48 G 209 B 88
#FF30D158
systemGreen
R 88 G 86 B 214
#FF5856D6
R 94 G 92 B 230
#FF5E5CE6
systemIndigo
R 255 G 149 B 0
#FFFF9500
R 255 G 159 B 10
#FFFF9F0A
systemOrange
R 255 G 45 B 85
#FFFF2D55
R 255 G 55 B 95
#FFFF375F
systemPink
R 175 G 82 B 222
#FFAF52DE
R 191 G 90 B 242
#FFBF5AF2
systemPurple
R 255 G 59 B 48
#FFFF3B30
R 255 G 69 B 58
#FFFF453A
systemRed
R 90 G 200 B 250
#FF5AC8FA
R 100 G 210 B 255
#FF64D2FF
systemTeal
R 255 G 204 B 0
#FFFFCC00
R 255 G 214 B 10
#FFFFD60A
systemYellow
R 142 G 142 B 147
#FF8E8E93
R 142 G 142 B 147
#FF8E8E93
systemGray
R 174 G 174 B 178
#FFAEAEB2
R 99 G 99 B 102
#FF636366
systemGray2
R 199 G 199 B 204
#FFC7C7CC
R 72 G 72 B 74
#FF48484A
systemGray3
R 209 G 209 B 214
#FFD1D1D6
R 58 G 58 B 60
#FF3A3A3C
systemGray4
R 229 G 229 B 234
#FFE5E5EA
R 44 G 44 B 46
#FF2C2C2E
systemGray5
R 242 G 242 B 247
#FFF2F2F7
R 28 G 28 B 30
#FF1C1C1E
systemGray6
R 0 G 0 B 0
#FF000000
R 255 G 255 B 255
#FFFFFFFF
label
R 60 G 60 B 67 A 0.6 #993C3C43
R 235 G 235 B 245 A 0.6 #99EBEBF5
secondaryLabel
R 60 G 60 B 67 A 0.3 #4C3C3C43
R 235 G 235 B 245 A 0.3 #4CEBEBF5
tertiaryLabel
R 60 G 60 B 67 A 0.2 #2D3C3C43
R 235 G 235 B 245 A 0.2 #2DEBEBF5
quaternaryLabel
R 60 G 60 B 67 A 0.3 #4CC3C43
R 235 G 235 B 245 A 0.3 #4CEBEBF5
placeholderText
R 60 G 60 B 67 A 0.3 #493C3C43
R 84 G 84 B 88 A 0.3 #99545458
separator
R 198 G 198 B 200
#FFC6C6C8
R 56 G 56 B 58
#FF38383A
opaqueSeparator
R 0 G 122 B 255
#FF007AFF
R 9 G 132 B 255
#FF0984FF
link

macOS Dynamic Colors Overview

Here is the color overview for macOS. Note that when the alpha is not specified it’s 100%.

Please note that you can’t use these colors on macOS pre-14.10.

Aqua Dark Name
R 0 G 122 B 255
#FF007AFF
R 10 G 132 B 255
#FF0A84FF
systemBlue
R 162 G 132 B 94
#FFA2845E
R 172 G 142 B 104
#FFAC8E68
systemBrown
R 142 G 142 B 147
#FF8E8E93
R 152 G 152 B 157
#FF98989D
systemGray
R 40 G 205 B 65
#FF34C759
R 50 G 215 B 75
#FF32D74B
systemGreen
R 88 G 86 B 214
#FF5856D6
R 94 G 92 B 230
#FF5E5CE6
systemIndigo
R 255 G 149 B 0
#FFFF9500
R 255 G 159 B 10
#FFFF9F0A
systemOrange
R 255 G 45 B 85
#FFFF2D55
R 255 G 55 B 95
#FFFF375F
systemPink
R 175 G 82 B 222
#FFAF52DE
R 191 G 90 B 242
#FFBF5AF2
systemPurple
R 255 G 59 B 48
#FFFF3B30
R 255 G 69 B 58
#FFFF453A
systemRed
R 90 G 200 B 250
#FF5AC8FA
R 100 G 210 B 255
#FF64D2FF
systemTeal
R 255 G 204 B 0
#FFFFCC00
R 255 G 214 B 10
#FFFFD60A
systemYellow
R 0 G 99 B 255
#FF0063E1
R 0 G 88 B 208
#FF0058D0
alternateSelectedControl
R 255 G 255 B 255
#FFFFFFFF
R 255 G 255 B 255
#FFFFFFFF
alternateSelectedControlText
R 255 G 255 B 255
#FFFFFFFF
R 30 G 30 B 30
#FF1E1E1E
controlBackground
R 0 G 0 B 0 A 0.8 #D8000000
R 255 G 255 B 255 A 0.8 #D8FFFFFF
controlText
R 0 G 0 B 0 A 0.2 #3F000000
R 255 G 255 B 255 A 0.2 #3FFFFFFF
disabledControlText
R 204 G 204 B 204
#FFCCCCCC
R 255 G 255 B 255 A 0.1 #19FFFFFF
grid
R 0 G 0 B 0 A 0.8 #D8000000
R 255 G 255 B 255
#FFFFFFFF
headerText
R 255 G 255 B 255
#FFFFFFFF
R 180 G 180 B 180
#FFB4B4B4
highlight
R 0 G 0 B 0 A 0.8 #D8000000
R 255 G 255 B 255 A 0.8 #D8FFFFFF
labelColor
R 0 G 104 B 218
#FF0068DA
R 65 G 156 B 255
#FF419CFF
linkColor
R 0 G 0 B 0 A 0.2 #3F000000
R 255 G 255 B 255 A 0.2 #3FFFFFFF
placeholderTextColor
R 0 G 0 B 0 A 0.1 #19000000
R 255 G 255 B 255 A 0.1 #19FFFFFF
quaternaryLabelColor
R 0 G 0 B 0 A 0.5 #7F000000
R 255 G 255 B 255 A 0.5 #8CFFFFFF
secondaryLabelColor
R 0 G 99 B 225
#FF0063E1
R 0 G 88 B 208
#FF0058D0
selectedContentBackgroundColor
R 179 G 215 B 255
#FFB3D7FF
R 63 G 99 B 109
#FF3F638B
selectedControlColor
R 0 G 0 B 0 A 0.8 #D8000000
R 255 G 255 B 255 A 0.8 #D8FFFFFF
selectedControlTextColor
R 255 G 255 B 255
#FFFFFFFF
R 255 G 255 B 255
#FFFFFFFF
selectedMenuItemTextColor
R 179 G 215 B 255
#FFB3D7FF
R 63 G 99 B 139
#FF3F638B
selectedTextBackgroundColor
R 0 G 0 B 0
#FF000000
R 255 G 255 B 255
#FFFFFFFF
selectedTextColor
R 0 G 0 B 0 A 0.1 #19000000
R 255 G 255 B 255 A 0.1 #19FFFFFF
separatorColor
R 0 G 0 B 0
#FF000000
R 0 G 0 B 0
#FF000000
shadowColor
R 0 G 0 B 0 A 0.2 #3F000000
R 255 G 255 B 255 A 0.2 #3FFFFFFF
tertiaryLabelColor
R 255 G 255 B 255
#FFFFFFFF
R 30 G 30 B 30
#FF1E1E1E
textBackgroundColor
R 0 G 0 B 0
#FF000000
R 255 G 255 B 255
#FFFFFFFF
textColor
R 150 G 150 B 150 A 0.9 #E5969696
R 40 G 40 B 40
#FF282828
underPageBackgroundColor
R 220 G 220 B 220
#FFDCDCDC
R 70 G 70 B 70
#FF464646
unemphasizedSelectedContentBackgroundColor
R 220 G 220 B 220
#FFDCDCDC
R 70 G 70 B 70
#FF464646
unemphasizedSelectedTextBackgroundColor
R 0 G 0 B 0
#FF000000
R 255 G 255 B 255
#FFFFFFFF
unemphasizedSelectedTextColor
R 236 G 236 B 236
#FFECECEC
R 50 G 50 B 50
#FF323232
windowBackgroundColor
R 0 G 0 B 0 A 0.8 #D8000000
R 255 G 255 B 255 A 0.8 #D8FFFFFF
windowFrameTextColor

That’s it!

I hope you find this Dynamic Colors Overview useful, at least I do 🙂 this overview is quite handy when you want to quickly have a look at what a color is in both light and dark mode. If you find any errors, please let me know. This was a lot of manual labor that went into this, so I probably have copy/pasted something wrong somewhere.

If you want to get started with dark mode support go check out the docs here. It is under an experimental flag right now, but don’t let that stop you!

The code I used for this is in Xamarin and up on Github here. Note that I have used a custom NuGet package because I needed some latest and greatest features. So it might not run out of the box for you. I will update this later when it is released.

Oh and did you know I have a YouTube channel? Could I persuade you to subscribe? Thanks!