UX Questions

How should I choose colors for UI design? UX Question #94

Watch on YouTube

YouTube player

Listen to the podcast

Read the transcript

Selena from Virginia asks: How should I choose colors for UI design?

I love that question. Thanks for asking, Selena. This is UX Question number 94 and I am Ben Judy.

How should I choose colors for UI design? I’m going to answer this in a similar manner to how I answered an identical question about fonts back in episode 62.

I believe owning your own knowledge about colors, your own sense of taste, and your own decision-making process is the way to go. I’m not going to give you a precise, step-by-step process to follow, and you shouldn’t just adopt someone else’s process.

Instead, I’m going to give you the categories of knowledge necessary to confidently develop your own approach to color selection.

You need to know eight things about colors in interface design.

First is terminology. Read all that you can about designing with color and stop every time you see a term you don’t understand. Look it up and learn. Soon you can annoy your friends by correcting them when they say shade when they really mean hue.

Second: your brand guidelines. Practically speaking, unless you’re designing an entirely new app or site for a new company, you’ll have to work with an existing brand. Learn to interrogate brand guideline documents or the current product UI. Determine where you can deviate or flex, and where you cannot violate existing color standards.

Third, learn about proportion. Many designers like the 60-30-10 rule. It’s just a rule of thumb, so do something different with good reason, but UI screens usually look better with a primary, secondary, and tertiary colors in roughly those proportions.

Fourth, learn about color harmony. There are established schemes that make a color palette feel harmonious: monochromatic, analogous, complimentary, triadic, et cetera. Learn them.

Fifth, learn digital color models such as RGB and CMYK. Keep studying until you understand the difference between HSV, HSB, and HSL. Master related concepts like hue, saturation, and brightness.

Sixth, master the color tools in your design application of choice. If you’re using Figma, get curious about all the ways you can apply color, build gradients, use variables and tokens. When you see a color related feature you don’t understand, watch tutorials and play with it.

Seventh, study accessibility guidelines. If you’re doing web design, the WCAG guidelines for color are your best friend.

Eighth, learn to build light and dark palettes. It’s become very common now for apps to offer both a dark theme and a light theme.

There are many other aspects of color theory and psychology to learn about, but these eight areas are enough to begin.

Keep asking your questions about UX. Next time, I’ll answer the question: What’s the difference between Service Design and UX Design?

Referenced in this episode:

Support UX Questions

Visit us on Patreon and check out the great perks at each level of support!

Become a sponsor

You can advertise your products or services—our promote yourself as a UX professional—by sponsoring episodes of UX Questions! See the Sponsor page for details.

Hire Ben Judy

Ben is available for consulting engagements as a workshop facilitator, mentor, design coach, and more! See the Ben page for details.

UX Questions

,