Skip to content

Instantly share code, notes, and snippets.

@CreatureSurvive

CreatureSurvive/iOS System Colors.md

Created March 21, 2022 21:51
Show Gist options
  • Save CreatureSurvive/1788cd3d2587886ff70344e716c5af53 to your computer and use it in GitHub Desktop.
Save CreatureSurvive/1788cd3d2587886ff70344e716c5af53 to your computer and use it in GitHub Desktop.
Download ZIP
iOS System Colors with their light and dark values
Raw
iOS System Colors.md

iOS System Colors

Background Colors

Color Name Light Color Dark Color
systemBackground #FFFFFFFF rgba(1.0, 1.0, 1.0, 1.0) #000000FF rgba(0.0, 0.0, 0.0, 1.0)
secondarySystemBackground #F2F2F7FF rgba(0.95, 0.95, 0.97, 1.0) #1C1C1EFF rgba(0.11, 0.11, 0.12, 1.0)
tertiarySystemBackground #F2F2F7FF rgba(0.95, 0.95, 0.97, 1.0) #1C1C1EFF rgba(0.11, 0.11, 0.12, 1.0)
tertiarySystemBackground #FFFFFFFF rgba(1.0, 1.0, 1.0, 1.0) #2C2C2EFF rgba(0.17, 0.17, 0.18, 1.0)
systemGroupedBackground #F2F2F7FF rgba(0.95, 0.95, 0.97, 1.0) #000000FF rgba(0.0, 0.0, 0.0, 1.0)
secondarySystemGroupedBackground #FFFFFFFF rgba(1.0, 1.0, 1.0, 1.0) #1C1C1EFF rgba(0.11, 0.11, 0.12, 1.0)
tertiarySystemGroupedBackground #F2F2F7FF rgba(0.95, 0.95, 0.97, 1.0) #2C2C2EFF rgba(0.17, 0.17, 0.18, 1.0)

Label Colors

Color Name Light Color Dark Color
label #000000FF rgba(0.0, 0.0, 0.0, 1.0) #FFFFFFFF rgba(1.0, 1.0, 1.0, 1.0)
secondaryLabel #3C3C4399 rgba(0.24, 0.24, 0.26, 0.6) #EBEBF599 rgba(0.92, 0.92, 0.96, 0.6)
tertiaryLabel #3C3C434D rgba(0.24, 0.24, 0.26, 0.3) #EBEBF54D rgba(0.92, 0.92, 0.96, 0.3)
quaternaryLabel #3C3C432E rgba(0.24, 0.24, 0.26, 0.18) #EBEBF52E rgba(0.92, 0.92, 0.96, 0.18)

Placeholder Colors

Color Name Light Color Dark Color
placeholderText #3C3C434D rgba(0.24, 0.24, 0.26, 0.3) #EBEBF54D rgba(0.92, 0.92, 0.96, 0.3)

Separator Colors

Color Name Light Color Dark Color
separator #3C3C434A rgba(0.24, 0.24, 0.26, 0.29) #54545899 rgba(0.33, 0.33, 0.35, 0.6)
opaqueSeparator #C6C6C8FF rgba(0.78, 0.78, 0.78, 1.0) #38383AFF rgba(0.22, 0.22, 0.23, 1.0)

Tint Colors

Color Name Light Color Dark Color
systemBlue #007AFFFF rgba(0.0, 0.48, 1.0, 1.0) #0A84FFFF rgba(0.04, 0.52, 1.0, 1.0)
systemGreen #34C759FF rgba(0.2, 0.78, 0.35, 1.0) #30D158FF rgba(0.19, 0.82, 0.35, 1.0)
systemIndigo #5856D6FF rgba(0.35, 0.34, 0.84, 1.0) #5E5CE6FF rgba(0.37, 0.36, 0.9, 1.0)
systemOrange #FF9500FF rgba(1.0, 0.58, 0.0, 1.0) #FF9F0AFF rgba(1.0, 0.62, 0.04, 1.0)
systemPink #FF2D55FF rgba(1.0, 0.18, 0.33, 1.0) #FF375FFF rgba(1.0, 0.22, 0.37, 1.0)
systemPurple #AF52DEFF rgba(0.69, 0.32, 0.87, 1.0) #BF5AF2FF rgba(0.75, 0.35, 0.95, 1.0)
systemRed #FF3B30FF rgba(1.0, 0.23, 0.19, 1.0) #FF453AFF rgba(1.0, 0.27, 0.23, 1.0)
systemTeal #5AC8FAFF rgba(0.35, 0.78, 0.98, 1.0) #64D2FFFF rgba(0.39, 0.82, 1.0, 1.0)

Gray Colors

Color Name Light Color Dark Color
systemGray #8E8E93FF rgba(0.56, 0.56, 0.58, 1.0) #8E8E93FF rgba(0.56, 0.56, 0.58, 1.0)
systemGray2 #AEAEB2FF rgba(0.68, 0.68, 0.7, 1.0) #636366FF rgba(0.39, 0.39, 0.4, 1.0)
systemGray3 #C7C7CCFF rgba(0.78, 0.78, 0.8, 1.0) #48484AFF rgba(0.28, 0.28, 0.29, 1.0)
systemGray4 #D1D1D6FF rgba(0.82, 0.82, 0.84, 1.0) #3A3A3CFF rgba(0.23, 0.23, 0.24, 1.0)
systemGray5 #E5E5EAFF rgba(0.9, 0.9, 0.92, 1.0) #2C2C2EFF rgba(0.17, 0.17, 0.18, 1.0)
systemGray6 #F2F2F7FF rgba(0.95, 0.95, 0.97, 1.0) #1C1C1EFF rgba(0.11, 0.11, 0.12, 1.0)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment