As a UI designer (or visual designer), it’s always important to be color sensitive and use common sense. Qian Feng take you to understand how to make the UI design interface color match more harmonious?
1, tonal
Hue is the color in its most primitive state. Such as blue, green, yellow, red, etc., it is not affected by any changes in light and shadow. Here’s an easy example to understand: a hue is what you see in the color wheel, regardless of any shading or saturation factors.
2, lightness
Lightness indicates the degree of brightness and shade of color. As we walk along the road, we can see some elements change color in the morning and night. For example, a mountain is brown in color, lighter in the morning and darker in the evening.
In the UI, lightness plays an important role, not only in getting good contrast, but also in building different hierarchies in the interface.
The different performance of lightness can give us a sense of hierarchy. When a color is 100 percent bright, you get white. When a color has a brightness of 0%, it produces black.
3. Saturation
Now let’s talk about saturation, which refers to how bright a color is. When we saturate the color, it becomes more intense and vivid. When we desaturate a color, it becomes more dull, and when we desaturate it to a minimum, it becomes gray.
It is important to note that since color saturation is limited in the real world, it should not be used too much in print, such as books or posters. In the digital world, we obviously have more possibilities.
Another important proposition when we talk about colors is how to combine colors. This always reminds us of the color theory lessons we took, especially the contrast and harmony part, but contrast doesn’t always mean harmony.
1. Rule 60 30 10
“Rule 60, 30, 10.” This is not a standard measure of supermodels, but the percentage of successful combinations of colors. We first choose a main tone and then apply it to 60% of the space. Choose a secondary hue and use it for 30% of the space, leaving 10% for the final color. This theory has been used extensively in interior design.
Inspired by nature, did you know that the human eye can see over 10 million colors?
Nature’s palette is always surprisingly harmonious. Trees, animals, Spaces, everything has its own color, and we just have to focus on finding it.
3, dark ≠ black, light ≠ white
A common mistake we make when using color to express light and shade is to use opaque black for shadow and opaque white for light. But if we look at real life, darkness always has a tone.
Darkness is never black, darkness is only the shade obscured by the lightness of the object. As in the image above, the shadow of the lemon is a very dark green, and the shadow of the wood is a very dark brown, neither of which is black. Black only appears when there is no light at all.
4, saturation test color harmony
To make the color scheme in our work more harmonious, we can remove the hue from the color and keep only the light and shadow, which give a sense of reality and depth. When only grayscale is left, we can clearly see the difference between light and shade, which will help us adjust the brightness and transparency between colors to create a more harmonious color match.
Many of us see colors that aren’t saturated or vibrant enough, and that’s normal because the world isn’t perfect, and neither are the colors. Most of us came from a physical world where only CMYK was used and color was limited.
In the digital world, the color possibilities are many and we have to be prepared. So it’s highly recommended that you look at some of your inspirations every day and draw on the best of them.