
This is echoing what others have said, you can check this excellent observation at the source. Brighter color variations are made by increasing brightness and lowering saturation.” “ Darker color variations are made by lowering brightness and increasing saturation. But in all, they look good, harmonious and work with each other. The theme color is Blue, and the other elements are darker color variations and brighter color variations. Regardless of it’s blue again, let’s focus on the variations. If you have no better choice, just use blue.ģ) Color variations between the background and the elements

and as I enter the words, I see the interface of Microsoft Word is in blue.īlue is definitely a safe color that can cultivate user’s trust and be accepted, blue is a typical example of color in UI design. Blue is like everywhere, in nature, in sites, in clothes, etc. Various kinds of blue.Īccording the research, blue is the NO.1 color that women and men both like. What's in there? Yes, you’ll see, they are all in blue. Just have a look at your most commonly used Apps or sites, Facebook, Twitter, Microsoft, Safari, etc. Unless you would like to take a big risk to be unique. If you want to use color in UI design wisely, please pay attention to the above chart, I am serious. Use it wisely means hit the 5 “rights”: choose the right color, at the right time, in a right usage pattern, with the right users, and target the right goals. Imagine this, if Mcdonald’s uses gray and black instead of yellow and red, you still have a hungry appetite? Women wear black dress and red lipstick at party, why?ĭifferent color conveys different meanings and senses. We can’t say a color is “bad-looking”, only you use it wrong, then it may look bad. Tricks to use color wisely 1) Choose the right color in the right usage pattern Read the meaning of each language, please have a look here.ģ.

Fundamental concepts about colorsĮach color hasformed its unique meaning and connotation in the long run of human life. Nowadays, many companies take Colors, especially color in UI design, as one of their marketing strategy.

Also, research from QuickSprout indicates that 90% of all product assessments have to do with color. 3) Influence the purchasing decisionĪccording to Kissmetrics, the visual appearance of a product is the key factor influencing consumers’ purchasing decisions. In all, to create clear and harmonious style that meets users’ needs. Beside, it can increase usability sharply, such as strengthencall-to-actions, enhance navigation, stimulate intuitive interactions, satisfy aesthetic needs and visual solutions. The right choice of color can support better readability of the information. A research made by CCICOLOR says that users only take 90 seconds to estimate products online, and between 62% and 90% of the judgment of their initial view is upon the colorscheme. So, what color can do actually? 1) Reflect the personality ofa brandĬolor can set the basic tone,mood, connotation and conception of a brand or a product. Think back whenever you encounter a site or a product, it is the visual appearance, which largely depends on color, that always leaves you the very first impression. The magic power of colorĬolor can speak, as powerful as language. If this is actually useful, please leave me a comment. A serious note first, what I wrote can’t turn you into an excellent UI designer magically, but I promise you’ll learn something here.
Html color ui how to#
So here, I’d like to make a conclusion about how to use color in UI design wisely. It is always the color that steals my heart at the very first look. After learning, making use of or simply viewing it again and again, I finally realized something in common.

Now I have a collection of more than 100 UI interfaces. Whenever found an interface that looks nice, clean and elegant, I save it.
