UI Colors

3 minutes, 12 seconds

Primary, Secondary and Tertiary Colors

I suggest starting with a vibrant, pastel color that is Primary or Secondary. There is no wrong pick. It’s how you use it and what you choose to complement it.

These are the colors used by Apple in their native apps. They’re vibrant and perfect for buttons, icons and actionable items.

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.

Monochrome Colors

The most common scenario is to have one main color and apply 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 Colors

This means picking nearby colors to the main one. From the color wheel, it would be one color next to it. This is especially useful when you have a feeling that your content doesn’t provide enough color variations and you have to resort to new colors to spice it up.
For example, Red is next to Orange, which is next to Yellow.

By changing the Hue value by about 30-50, you get a new Analogous color.

Complementary Colors

The Complementary color is the opposite of the main color. On the color wheel, it’s the one in the opposite end. Complementary colors provide excellent contrast, which is important for energizing the mood of your user interface. However, they’re harder to work with, so thread carefully.

Sketch Palettes

Sketch Palettes lets you easily save and import palettes for both global and document colors. I started a palette using iOS, Material Design and Flat UI colors.

UI Gradients

iOS is known to use beautiful gradients. You can incorporate them inexpensively for your UIs by having two colors that complement each other. This is a nice collection of gradients.

UI Gradients