Color 101: the basis for UI designers

Jeehykim
3 min readNov 24, 2020

“People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color.” — 99designs

Photo by Ramakant Sharda on Unsplash

I’m pretty sure everyone’s got a favorite color. Like everyone else, I had a favorite number, color, pen, and even a favorite colored folding-paper looking back at my childhood. In my opinion, the word ‘favorite’ doesn’t mean I dislike the rest but rather represents the current interests. I remember being obsessed with blue (light blue, to be specific) in 4th grade, then with lime-green in 7th, and now… with lavender!

Colors impact the vast majority of our life, and I’d like to share some fundamentals of colors to take advantage of when designing user interfaces.

Color Wheel

We’ve come across this at some point in our life. Yes, this is the color wheel. First created by Sir Isaac Newton, he mapped out the color spectrum in a circle. To this date, designers refer back to the color wheel to identify color harmony.

Source

As you see, the color wheel consists of primary colors, secondary colors, and tertiary colors. A combination of two primary colors (red, yellow, and blue) create secondary colors (orange, green, and purple). Tertiary colors form when primary color and secondary colors mixes.

Color Schemes

There are numerous color schemes out there, but I’m here to share some of the basis. When you walk into a room and find it pleasing, it probably means that whoever decorated the place did a fantastic job finding the balance of colors. Also known as the color schemes, defined as a combination of one or more hues from the color wheel.

Color Schemes

Complementary Colors

You can create a complementary color scheme by choosing colors on the opposite side of the color wheel. As this provides strong contrast, I recommend using lower saturation of the hues for the sake of every eye’s comfort.

Analogous Colors

An analogous color scheme is a combination of colors that are side-by-side on a color wheel. These closely related colors typically send off a sense of harmony and pleasing to the eyes.

Triadic Colors

The triadic color scheme consists of three colors equally spaced colors in the color wheel. To create one, simply take an even triangle and place it on a color wheel. Keep in mind that triadic colors tend to be vibrant and dynamic.

I hope these tips were helpful, and thank you for reading!

--

--

Jeehykim
0 Followers

Hi, I’m a curious UI designer passionate about sharing efficient experience!