How to use 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.

 

Wall paints, furnitures, accesories.

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.

 

One of my work that you can find on dribbble. Simple monochromatic colors and focus on elements.

Stay away from pure grayscale and black

One of the most important color tricks I’ve ever learned was to avoid using gray colors without saturation. In real life, pure gray colors almost never exist. The same goes for blacks.

 

Remember to always add a bit of saturation to your color. Subconsciously it will look more natural and familiar to users.

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