Color Selection

How to choose colors?

There are some factors to keep in mind while selecting a color palette for your application.

• Color Theory: It's best to acquaint yourself with Color Theory. This will facilitate the process of selecting colors. To read up more about color theory, head over here [link to color theory article].
• Contrast: This is one of the most important aspects of design. Almost all design tools have plugins that help you check whether your design is passing color checks or not. Checkmycolors is a good tool that can help you check the contrast of your site.
• Color Psychology: Color psychology is the branch of science that studies colors and how different shades of colors can evoke certain emotions. There is a good article by Creativebloq, which talks about how colors are associated with people's emotions.
• Overusing Colors: As a beginner, you can select a primary color and stick with it so as not to get overwhelmed with choosing multiple colors.

Color Tools

There are some interesting apps where you can generate color palettes.

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.

Coolors

Coolors helps with generating new color palettes as well as selecting one of the various ones already provided.

Sip Color App

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

Inspiration

The resources provided are very helpful when it comes to seeking inspiration.

Dribbble

Dribbble has tons of UI layouts with various color schemes. It also allows you to sort through designs depending on your chosen color.

Muzli

Muzli by InVision is an amazing tool when it comes to inspiration. Furthermore, it allows you to generate color patterns. What's even more great is that it'll show you a UI that uses the chosen color palette.

Design Guidelines

Apple and Google talk about colors in their guidelines. These guidelines can help designers create a color theme that works best for them.

iOS Guidelines

Apple provides iOS guidelines on how to use colors for iOS applications.

Material Design

Material Design is an open-source color system that has a lot of information on what colors to choose. They also provide a color picker that you can use to test palettes as well as the contrast.

Nix Color

Nix Color is a cool hardware to bring physical colors to your app. What it does is that it scans a real life color and imports it to its mobile app. Although it is not 100% accurate, it does a pretty neat job. So, if you ever wanted to take a specific color from a flower or any surface, this is the tool that will do the job.

How to pick colors from a photo

There are many exciting ways to take colors from our surroundings and use them in our designs. With Adobe Color, you can use your photos or images to extract their colors and create a color palette. Let's go to Adobe Color and let's drag and drop a picture from the exercise files.

You will notice that Adobe Color will scan the photo and will suggest a color palette.

If you like the suggested color palette, you can save and publish it; otherwise, you can move the color pickers and choose the color you like. In our case, we will select a couple of different colors from the photo.

Now that we are happy with our palette, let's save it. Then, add some tags, rename it to Purple Lights DN, and publish it into the Adobe Color Community if you want to.

Let's click on the Explore tab. In the search field, let's type Purple Lights DN so we can find our color palette.

Next, hover over the color palette and download a JPG version of the color palette. Like that, we can upload the JPEG to our Figma file so we can use it as a reference.

Now, press F so we can create a new frame for the Apple watch 44 mm. The point is to use some colors from the color palette to create a background.

Then, press O and create an Oval 245x245. Let's add a radial gradient to it.

Change the colors to #2D038B. As for the second color, let's change its opacity to 10%.

Let's add some effects. Select the circle and add a layer blur with 93.91 Blur.

Duplicate the oval. For the new oval, change the color to another color from the color palette. Below we're changing it to #CA267F.

Next, let's place both circles inside the Apple Watch Frame and you will see the effect that we created inside the frame.

Finally, let's place our logo inside the frame. Make sure to center it vertically and horizontally.

Conclusion

When it comes to choosing colors for your application, it's best to chose colors that reflect your branding. A color scheme can play a very important role in how the users perceive your brand.