The color Wheel in UI Design

Walden Systems Geeks Corner Tutorial The color Wheel in UI Design Rutherford NJ New Jersey NYC New York North Bergen County

There are a lot of colors to use in interfaces, where we have more opportunities to take combinations of colors, using high contrasts, choosing brighter colors to attract more attention. Color is one of the principal characters of UI design along with other characters such as typography, space, etc. In this article, we will be talking about the famous Color Wheel. There are 3 important things about color that you should know: Hue, Value & Saturation.

Hue is the color in natural state. For example blue, green-yellow, yellow, red, etc. Without any variation of light and darkness. Another example that can help you understand this is define hue as each of the colors you see in the Color Wheel without any other alteration of light and shadow.


The Value is the amount of light or darkness in each color. This gives us a feeling of surfaces. When a color has the value at 100% it results in a white color. When a color has the value at 0% it results in a black color. Value is the amount of light and darkness color has, an example is seeing things closer to light with white tones and other things that are in the background with more darkness. When we walk, we see some elements change color in the morning and at night. For example, a mountain has a brown color, in the morning has lighter tones and at night it has dark tones. In UI design, the value plays an important role, because when we use it well, we can get a good contrast and also different surfaces in our interface.

Saturation is the intensity of the color, when we saturate a color, we have more intense and vivid color. When we desaturate color, we have a dull color, an example of this is when we completely desaturate a color, we have a gray color. There is an important point that we must touch when we talk about saturation in interfaces. Unlike the real world where very rarely we see vivid and intense colors, in the digital world we can do it this, because we use RGB and not CMYK. That's why it’s very important to use carefully.

Many of us see colors that are not as saturated or as vivid, that's normal. The world is not perfect and neither are the colors. Many of us come from a physical world where we only used CMYK and where color had a limit. When we are in the digital world, the possibilities of colors are almost endless.