iOS Colors - iOS Design Handbook

Primary, Secondary and Tertiary Colors

Starting with a vibrant, pastel color that is Primary or Secondary is highly recommended. There is no wrong pick when it comes to choosing one. It’s how you use it and what you choose to complement it with.

Color Theory

iOS Palette

These are the colors used by Apple in their native apps. In general, blue is used system-wide as the universal color for buttons, icons and actionable items. But other colors can be used to set the brand like yellow for Notes, pink for Apple Music, green for Messages, etc. If you’re in doubt, use blue. When designing, please keep in mind that red is generally used for destructive actions and green for successful actions. Please take a look at the official documentation for more details.

colors

Dynamic System Colors

In addition to system colors, iOS gives you access to certain dynamic system colors that adapt to both light and dark mode perfectly. These include colors for links, labels, placeholder text, separators, etc. A more comprehensive list can be found in the documentation.

Neutral Tones

Perhaps the most important aspect of colors are the neutral tones. These are the neutralizers and as such these keep your designs from feeling too heavy. Most importantly, the neutral tones are easy on the eye and defer the user's attention to the content. You can use these as backgrounds.

Hue, Saturation, Brightness

When manipulating colors, it is important to understand the properties relevant to colors. A lot of people use RGB, but personally I found HSB to be a lot easier to manipulate. That’s because it is hard to tell how much Red, Green or Blue there is to a color. On the other hand, I can easily map in my mind how much Hue, Saturation and Brightness. Those values make a lot more sense to me.

Monochromatic

A monochromatic color is created when we use one strong color with multiple variations of that one color. The most common scenario is to have one main color and then, applying a 10-90% white or black layer on top. Sticking to one main color can prove to be a wise decision, especially for those who are not comfortable with colors yet. Simplification always helps new concepts.

Analogous

Analogous colors refer to colors that are next to each other on the color wheel like red, orange and yellow. Although it is a difficult color paletter as colors can end up overpowering each other, an analogous color scheme is very pleasing to the eye as it can be often found in the nature such as the sunset.

Complementary

A complementary color palette consists of two colors that are opposite on the color wheel such as red and green. Since there is a strong contrast of complementary colors, it is useful to select one color that is dominating and another that highlights other important elements in the page.

Cool and Warm Colors

Cool colors are generally associated with peace, serenity or calmness. These include shades of green, blue and purple. Such colors are not very overpowering and are soothing in nature. Warn colors are in turn associated with energy, brightness, action and warmth. Such colors include shades of yellow, orange and red.

Contrast

Colors shouldn’t be in the way of legibility. Contrast is needed to allow comfortable reading and to immerse the viewer. For good contrast, use opposite ends: white against black, light blue against dark blue, high brightness against low brightness.

Guidelines for Light UI

The content should be lighter than the background. Objects in focus are usually better lit than the background.
Don’t overuse colors. They really grab your attention. Use colors to give importance to buttons and highlighted states.
Avoid average colors. 90-100% white is usually the best range.

Guidelines for Dark UI

Don’t use absolute black. It’s very hard to see the details in pitch black and the contrast can be too high against white.
If you must use black, make sure to have variations of dark gray to alleviate the high contrast.
Avoid grays when using blue. Dark blue complements blue better than gray.

Colors Tools

There are numerous tools out there that make the process of selecting colors for your iOS applications and application in general easier. Let's discuss some of these!

Coolors

If you are adventurous and like to experiment with random color palettes, Coolors is the tool. You can look at different color palettes from other designers and create yours; on its mobile version, you can quickly generate color palettes based on different methods like monochromatic, analogous, complementary, triadic, square, and more.

Adobe Colors

Adobe Colors allows you to create color themes via the color wheel. It also gives you the option to generate colors as well as gradients from an image by uploading it. Adobe Colors also has an accessibility tool.

Paletton

In Paletton, you first select the scheme you’d like: mono, complementary, triadic, tetradic, analogous or accented analogous. Then, when you change one color in the color wheel, the rest change to match it.

Sip Color App

Sip is a color picker that allows you to organize and share colors. This app is available for macOS and iOS.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Intro to iOS 14 Design

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

ios-design-handbook-ios-colors

Intro to iOS 14 Design

A complete guide to designing for iOS 14 with videos, examples and design files