7. Colors
Written by Prateek Prasad

In the last chapter, you focused on learning the fundamentals of one of the more subtle yet influential design aspects, typography. You started with a quick primer on typography fundamentals, then built a typographic scale from scratch.

In this chapter, you’ll focus on another essential element: colors.

Note: If you’re reading a version of this book printed in grayscale, I’ve included colored versions of the screenshots from the informational sections of this chapter with the project files. I highly recommend looking at them while reviewing the informational sections.

Colors, like typography, play a vital role in design — as well as in everyday life. Colors evoke certain emotions and elicit a deep psychological response in our brain.

Colors convey information without words.

When you use them correctly and tastefully, colors help users and provide visual feedback for eventful interactions, like highlighting errors and providing confirmation.

Colors are crucial for establishing brand identity and helping a product stand out. They bring uniformity and cohesion to a family of related products. While they’re a subtle aspect of design, colors make a big impact on how users perceive and remember your brand.

Great examples of products that leverage color to establish their identity are Coca-Cola’s brilliant red, McLaren’s papaya orange and Apple’s use of white across their products and packaging. Often underrated, colors build an instant association with a brand identity.

Before getting into building a palette, you’ll walk through some fundamental concepts of color theory to help you pick the right colors for your project.

Basics of Color Theory

Simply put, color theory is a collection of guidelines that designers use to pick colors. These guidelines are based upon how humans perceive colors, which emotions and messages they convey and what visual effects you can achieve when you mix them.

Now, you’ll start from the ground up by understanding what a color is.

Color is a perception. When our eyes see an object, they send signals to our brains, which our brains use to define the color.

These signals are wavelengths of light reflected by objects.

Color Wheel

The first color wheel was designed by Sir Isaac Newton in the 1600s. Designers still use it today to mix and match colors to build a palette.

Hue

Hue is the name of the color: red, blue, green, yellow, orange and so on.

Saturation

Saturation is the intensity or purity of a hue. High saturation makes a color look bright and vibrant, whereas a desaturated color is more washed out and subtle.

Value

Value determines the degree of darkness or lightness of a hue, ranging from pure white to pure black.

Shade

A shade is a hue produced by adding black in varying amounts. The image below shows various shades of red with increasing amounts of black added to it.

Tint

A tint is a hue produced by adding white in varying amounts. The image below shows various tints of red with increasing amounts of white added to it.

Color Temperature

Divide the color wheel vertically into two halves. The colors on the left half are the warm colors — reds, oranges and yellows. The ones on the right half are the cool colors — purples, blues and greens.

Contrast

In color theory, contrast is the difference in the visual properties of an object that distinguishes it from other objects and its own background. In other words, it’s the difference between two colors.

Color Schemes

Color schemes are formulas based on color harmony. In color theory, color harmonies are sets of colors that look good together.

Monochromatic Scheme

The simplest form of a color scheme is the monochromatic color scheme. You start with a single color on the color wheel, then create variations using the knowledge of saturation and values.

Analogous Scheme

An analogous color scheme uses colors next to each other on the color wheel, like reds and oranges or greens and blues.

Complementary Scheme

A complementary color scheme uses colors opposite one other on the color wheel, like blue and orange or red and green.

Split Complementary Scheme

A split complementary color scheme uses colors on either side of the complement of the base color. This scheme provides the same contrast level as the complementary scheme, but gives you more colors to work with.

Triadic Scheme

A triadic color scheme uses three colors that are evenly spaced on the color wheel, forming a perfect triangle.

Tetradic Scheme

A tetradic color scheme uses four colors that form a rectangle on the color wheel, and the diagonals are complementary pairs.

Finding the Right Scheme for Your Project

While colors are an important part of design, they’re by no means a must-have requirement for every project, whether print or digital. An informational website, like a blog or an online journal, can deliver a great experience while sticking to a monochromatic palette that uses black text on a white background.

Building Your Palette

Compared to building the type scale, your palette is much more straightforward because you’ll just convert the colors you’re already using into reusable styles. This saves you the trouble of manually copy-pasting the hex codes going forward.

Turning Your Colors Into Reusable Styles

Now, it’s time to finalize the color styles for this app. Create a new page and name it Colors.

Creating the Text Color Styles

Keep moving along to create the text color styles. Add another 30×30 ellipse (O) and give it a #000000 fill and create a style named text/primary.

Using Gradients in Color Styles

Color styles aren’t limited to solid fills; they can also hold gradients. The movie posters in the app use a gradient scrim to make the text more visible. Your next step is to make this gradient a style, so if you need to change things later, you only need to do it in a single place.

Styling the Rating Component

For your final step in defining your palette, you’ll create styles for your rating component.

Applying the Color Styles

Head to your Components page to apply the color styles you just created. First up: the posters. Select the backdrop-gradient layer from the Poster/Birds of Prey component.

Styling the Icons

Before tackling the navigation component, take a moment to work with the icons. Select the individual icon paths in the Icons frame.

Updating the Details Screen

Great job with the styles so far. Since the app uses components in most places, Figma will make a good chunk of the changes automatically. You only need to change the app’s details screen.

Advantages of Color Styles

After all that work, none of the visuals in the app have changed. However, you’ve introduced flexibility that allows you to change the palette and, in turn, the app’s styling — without impacting the rest of the design.

Key Points

You learned the basics of color theory and its importance in design.

Then you learned about the importance of contrast in design for accessibility.

You created color styles for the UI elements of the app.

You then applied the color styles to the components.

Finally, you learned about the benefits of using reusable styles.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Chapters

App Design Apprentice

Before You Begin

Section I: Design & Tool Fundamentals

Section II: Components & Design Systems

Section III: Interactive prototypes & Developer Handoff

7. Colors
Written by Prateek Prasad