How to pick the right primary color to design a beautiful UI based on color psychology

Color theory: understanding the psychology of colors

Let me cut to the chase here. In my opinion, you don’t have to be a pro at colors to design good-looking UIs. It’s a pretty complex topic you could deep dive into. The main thing I struggled with when starting a new design is picking a primary color. I thought it was a good idea to share my process with you.

Here’s my process of choosing a primary color

First, I think about what message I want to convene to my users with the product I’m designing. What I want them to feel with that color. Excitement? Calmness? Happiness?

This is color psychology. Each color is associated with specific emotions or feelings.

Here’s a brief overview of the psychology associated with each color:

If you know what you want to design exactly it’s easy to pick a starting point for your primary color. For example, if you want to design a tool for freelancers, you might think about a color that will give a sense of confidence, success, sophistication, and ambition to your users. A color between orange, pink, and purple could be a good starting point.

Next, find a design system you love and try to find the color you’re looking for there. In my case, I use Untitled UI. I’d go with the Orange dark color (#FF4405) for the freelancers’ app. You can always tweak the color.

There’s one last and very important step! Accessibility.

Design should be inclusive and accessible to all users. You must have a color contrast of at least 3:1 for graphics (logo or other big visuals), 3:1 for large texts, and 4.5:1 for normal texts. How do you check that? You can use a plugin directly in Figma called Contrast.