Designers sometimes can spend so much time to select the right color palette. In this article, we’ll give you some useful tips helping designers choose powerful decent colors for UI design and make this process easier and more productive.

“Color does not add a pleasant quality to design — it reinforces it. ”

— Pierre Bonnard

Color meaning

Scientists have studied the physiological effects of certain colors for centuries. Besides aesthetics, colors are the creators of emotions and associations. The meaning of colors can vary depending on culture and circumstances. That’s why you see black&white fashion stores. They want to appear elegant and sublimely.

Red — Passion, Love

Blue — Responsible, Trust
Black — Elegance, High-end
White — Purity, innocent, Cleanliness
Orange — Energy, enthusiasm, happiness

Read more about color meaning — color culture.

The Iconic is pure black&white with blue CTA. It’s made for a reason.

60–30–10 Rule

A simple rule known as ‘60–30–10’ can help you to create a proper balance. This technique came from the interior design — it’s often applied for house decorating. By following this rule, you’ll have 60% of your dominant color, 30% for your secondary color and 10% for accent color. This formula works because it creates a sense of balance and allows the eye to move comfortably from one focal point to the next. It’s also incredibly simple to use.

60% is your dominant hue, 30% is secondary color and 10% is for accent color.

Always Grayscale

We like to explore with different colors and tones in our designs but this behavior can take you to the wrong way when you realize that you’ve spent 10+ hours adjusting primary color or changing accent colors.

On the other hand, you should force yourself to focus on spacing and laying out elements. It will save you a lot of time. That sort of constraint is very productive. On the flips side, it doesn’t need to look boring. Try different tones if you want to make it good looking.

Contrast is the king

Some colors go well with each other, while others will clash. There are definitive rules for how they will interact that can be best observed on a color wheel. You should be aware of this methods but it’s not necessary to do it manually.

If you want to learn more about color theory check this article — Color Theory For Designers: Creating Your Own Color Palettes

Get inspired

Behance is always the best place for inspirations. It also has tool for searching by colors so when you want to do visual research on how particular color was used by other designers.

Check it out here behance.net

Tools

We rounded up some of the best tools for choosing color palettes for your UI design. They will definitely save you a lot of time.

Kuler

Kuler is from Adobe and has been with us for a long time. It is available in the browser on desktop. If you’re using the desktop version you can export a color scheme into Photoshop right away and start using them for your product.

Coolors.co

You can simply set selected color and press space to generate palette. Coolors also gives you the ability to upload an image and make a color palette from it. The magic thing about it is that you are not limited to only one outcome, instead you have a picker that allows you to modify reference point and generate a better result.

Designspiration.net

Imagine that you have an rough idea for your color tone but you want to see examples of this mix. Designispiration is an awesome tool for this job. You can pick up to 5 colors and search images that are matching your query. It’s very good not only for finding images with the specific palette but also for real implementation of them in UI design.

Paletton

It’s similar to Kuler but the difference is that you are not limited only to 5 tones. Paletton is the useful tool when you have primary colors and want to play with additional tones.

Conclusion

Color is the cornerstone of UI design. Our tips mentioned above will ease the job of selecting the right colors in your UI design process. Take some times to create a palette that works the best for your websites or mobile apps and apply it harmoniously across the UI.

Tips on using colors in UI Design