Mastering colors in UI design
Adding colors to your design can be a hectic task, but once you know the golden rules-the reason and feel behind the color, you will be able to design a faster interface.
What are Colors?
Color is a light that is emitted by an object when all light waves are passed to it. It sounds tricky but, imagine you have a white light — consisting of every possible color and you pass that light on an object, now depending on the frequency of the object, the object will absorb all colors, and reflect what it cant absorb, so the reflected light the color of the object.
How do we see colors on the screen?
Screens are everywhere, screens are made of pixels, a pixel is the tiniest part on the screen, Pixel is made of three light-emitting diode — RGB (red, green and blue)
Now each diode act as a light and its brightness can vary in 255 segments
- Brightness Value — 0 (No light)
- Brightness Value — 255(Colored light)
and when we mix this light we see different colors, we can see this same thing in our color-chooser as HSL.
Colors and Emotion
Every color sets the mood of the design, using colors as emotions have been in the industry since very far. Each color has a very different sense of creating mood, Also according to research, 78% of consumer products are sold based on color. These are some common emotions emerging from the color
Red- Love, Anger, and Passion
Blue- Friendliness, trustworthy and security
Green- Safe, Calm, Growth and Earthy
Purple- Young, Royal and Energy
Yellow- New and Happy
Orange- Fresh
Black- Mystic, Dark, and Depth
White- Purity, Clarity and Clean
Rules for using colors in UI design
1. Follow 60–30–10 Rule
This is the simplest rule used in Interior designing and the fashion industry. Nowadays this has been used in Interface designing also, The Rule goes like — Your composition must consist of 60% main color, 30 % secondary color, and 10 % accent color, using these rules will create a pleasing composition in your design.
2. Start with the grayscale
While designing interfaces, start with grayscale, it will help you keep components and maintain the hierarchy, it allows you to precisely focus on the arrangement of content, it makes you forgot the colors, use a gray tone to make the design more visually appealing. Afterward, we can add the color palette to the design.
3.Creating a color-palette
For selecting colors in UI design, there are various tools available online, but before creating the color palette we must understand the need for the color, In UI we mostly use Color to attract the user’s eye, it may be for action buttons or to highlight any important information. To create good harmony in our design we must use 3 or less than 3 colors, more than that will make the design look busy. Either we can use the colors with the psychology behind or we can use the colors of brand identity, however in most of the companies they select their brand color understanding the psychology of color.
Tools for creating the color palette
2.Paletton
4.Coolors
4.Accessibility in Colors
Color blindness can have an impact on user experience if the colors are not selected properly, vastly there are three types of color blindness
To overcome these problems, adobe color has a tool, that checks the color is safe for use or not. Visit https://color.adobe.com/create/color-accessibility
5. Applying the Color Palette
Applying colors is easier when you understand the hierarchy of the content. It becomes easier when you understand where to guide the user’s eyes. In UI the action button is always prominent on the screen because we want users to click on it.
6.Validation Colors in UI
There are four types of validation used in the system — Error, Info, Warning, and Success. And the colors are
Success-Green
Info-Blue
Warning/Alert-Orange/Yellow
Error-Red
There is a challenge when your Brand colors are closer to the Validation colors, but to overcome these, we can use a slightly different color tone Some of the examples are
- Netflix
Netflix uses chrome yellow to represent the error since red is their primary color.
2. Airtel
Airtel uses light orange color to indicate the error.
Adding colors to the design can be easier if we follow the proper process — psychology, hierarchy, accessibility, and validation.
