Tips on using colors in UI Design

Color is like everything else, it’s best used in moderation. You will tend to get better results if you stick to max three primary colors in your color scheme. Applying color to a design project has a lot to do with balance and the more colors you use, the more complicated it is to achieve balance.

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

— Pierre Bonnard

If you need additional colors beyond those you’ve defined in your palette, make use of shades and tints. They will provide a different tone to work with.

60–30–10 Rule

This interior design rule is a timeless decorating technique that can help you put a color scheme together easily. The 60% + 30% + 10% proportion is meant to give balance to the colors. 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.

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, Danger
• Blue: Calm, Responsible, Safe
• Black: Mystery, Elegance, Evil
• White: Purity, Silence, Cleanliness
• Green: New, Fresh, Nature

If you want more check this list — color culture.

Grayscale first

We like to play with colors and tones early in our designs but this behavior can betray you very quickly when you will realize that you’ve spent 3 hours adjusting primary color … It’s really tempting but you should learn to avoid this attitude.

Instead 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.

Keep the contrast

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

When we are talking about UI references then behance is the best place for it. 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 then go here behance.net

Videos, print design, interior design, fashion… there are so many inspiring places to gather from. Simply don’t be inert to those palettes and save everything that looks interesting.

Colourful music video from Avril Lavigne.

Tools

To make things easier, I rounded up some of the best tools for choosing color palettes available in 2017. They will save you a lot of time.

Coolors.co

Definitely my favorite tool for picking colors. You can simply lock 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 cool thing about it is that you are not limited to only one outcome but instead you have a picker that allows you to modify reference point.

Kuler

This tool from Adobe has been with us for a long time. It is available in the browser, and in desktop versions. If you’re using the desktop version you can export a color scheme into Photoshop.

Paletton

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

Designspiration.net

Imagine that you have an idea for your color palette but you want to see examples of this mix. Designispiration is a great tool for this. You can pick up to 5 colors and search images that are matching your query. Really good not only for finding images with the specific palette but also for real implementation of them in design.

Shutterstock Lab Spectrum

You may ask — what if I want to search for photos with my chosen color? Well, Shutterstock has a tool called Spectrum where you can search photos by specific tone. You don’t even need subscription because small preview image with watermark will be enough to generate palette.

Tineye Multicolr

But if you want to search mix of colors in the photo and even specify the amount of each one, then Tineye will help you. This website uses a database of 10 million Creative Commons images from Flickr.

Conclusion

Color is a tricky concept to master, especially in the digital era. Tips mentioned above will ease the job of finding the right colors. The best way to learn to create stunning color schemes is to practice so do yourself a favor and play with colors.

article by: uiplace.com