Color is one of the most important things in design. Learning to use color on the right way can be challenging, but once you learn, it will open whole new world for you.
Color is a science. There is a separate branch in psychology that study the influence of colors on human mood and behavior, which we will cover in some of our future articles dedicated to Color Psychology.
“Color is the place where our brain and the universe meet.” Paul Klee
In this article, we will cover the essentials of color in UI design. We will also share some useful websites to help designers get a better understanding of color theory.
Color
Color is a perception. When our eyes see something, the data sent from our eyes to our brain tell us it’s a certain color. Objects reflect light in a combination of waves, our brain picks up that waves and translates them to a color.
There is a multitude of other definitions about color theory, and for us right now are important visual verified colors by its properties such as hue, saturation, chromaticity, and value and we are going to define its characteristics.
Color Properties
Hue
This is one of the most important color properties. Hue is our color perception which can be used to communicate color ideas. Basically, it ranges from 0 to 359 degrees and can be transformed into tint, shade or tone.
Don’t get confused with them, a tint is a mixture of an original color with white. Shade is a mixture of an original color with black.A tone is a bit more complex, it’s a mixture of both black and white color added to the original color. That’s why all tints and shades are also considered to be tones. Tones can also be created by adding any grayscale color to the original color, excluding black and white.
Chromaticity
Chromaticity or Chroma is measured by the presence of white, black or grey in a color. Chromaticity is similar to saturation since color with a low chromaticity value is not very colorful.
Brightness
Brightness is an amount of whiteness or darkness original color has received. The more dark has been added to the hue, the lower value is received.
Saturation
Unlike chromacity and value, this color property doesn’t depend on mixing hue with any color. It is about how the color looks under different lighting conditions. Saturation influences the grade of purity of vividness of a color. Desaturated color is dull and less colorful. Also, a good example of a saturation is how the color looks under the daylight or week light.
Color Systems
A color model is a system for creating a full range of colors from a small set of primary colors. There are two types of color models: additive and subtractive. Additive color models use light to display color, while subtractive color models use printing inks. The most common color models that graphic designers work with are RBG, RYB, and CMYK.
RGB
RGB is a color system that considers red, blue and green as primary colors. This system is a basis of all colors on the screen. By combining this three colors we produce cyan, magenta and yellow, and the more light you add, the brighter color becomes, as we mentioned above. Basically, with this colors, we make all other colors digitally. That’s why these colors are also known as additive colors.
RYB
RYB consists of red, yellow and blue color and it is also known as painting color system, often used by artists in painting.
CMYK
CMYK system is primarily used in modern printing and it’s a subtractive color model. The printed ink reduces the light that would otherwise be reflected. That’s why this model is called subtractive because inks ‘subtract’ brightness from a white background from four colors: cyan, magenta, yellow and black. CMYK is able to produce the entire spectrum of visible colors due to the process of half-toning.
Color Types
There are several color type we are going to mention here that are important for UI design: primary, secondary, tertiary, cool, warm and neutral colors.
Primary Colors
Primary colors are a combination of three colors, that by combining them can create all other colors. That, of course, vary if they are additive or subtractive and can be RYB, RGB, and CMYK.
Secondary Colors
These colors are created by a combination of two primary colors. Since every system has different color combinations, secondary colors can vary too.
Tertiary Colors
These colors are created by combining primary and secondary color. That is why usually have a two-word name, such as blue-green, red-violet, yellow-orange.
Cool, Warm and Neutral colors
All these three types of color can be found on the color wheel. Cool colors are on the blue-green side of the wheel and they are called like that because they bring cold feeling. Warm colors are on the opposite side of the color wheel yellow-red. They are related to warm types as they express cheering and happy feel. Neutral colors are the ones that include grey, brown, beige and they bring rather conservative and dull feel.
Color Schemes
In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience. When something is not harmonious, it’s either boring or chaotic. That’s why designers need to learn how to use colors which work efficiently and effectively.
Monochromatic
This color scheme consists of one main color and their shades. It is easy to use since you need to combine just one color and that’s why a winning choice. Monochromatic colors are good to accentuate brand color.
Analogous
Analogous color harmony is created by using colors that are next to each other on the color wheel. This color scheme is most commonly found in nature and is eye pleasing. It’s important to use enough contract when going with this scheme and the best way to communicate is to choose one color as a dominant one. In UI design, they are commonly used as a background color.
Complementary
This color scheme is created by using a mix of colors in front of each other on the color wheel. This type of colors is used to produce high contrast, especially if some elements are needed to stand out ( CTA — Call to Action button). For example, a blue color is hard to miss on an orange background, or red color on the green background.
Split-Complementary
This color scheme works similar like complementary colors, but they use two adjacent colors in front of the main color on the color wheel. This color scheme has a strong visual contrast like complementary but has less tension. It’s a good choice for beginners because it’s easy to use.
Triadic
Triadic or Triad color scheme uses colors that are evenly spaced around the color wheel. This color scheme tends to be quite vibrant. To use a triadic harmony successfully, the colors should be carefully balanced — let one color dominate and use the two others for accent.
Tetradic
This color scheme is very difficult to balance since using four different colors arranged in two complementary pairs on the color wheel. Just like triadic color scheme, let one color be dominant. Also, pay attention to a balance between cool and warm colors in your design.
Color Wheel
Now, after we saw all important color types, systems, schemes and properties, it’s time to see how to combine them on the color wheel.
A Color wheel or color circle is the basic tool for combining colors. The first color diagram is designed by Issac Newton in 1666. It is designed that virtually any colors you pick from it will look good together. Color wheel changed over the years, so now most common version is a wheel of 12 colors.
To learn how properly to combine and use colors take time and effort, but with hard work everything is possible.
Useful Color Websites
It doesn’t matter which tools you are working with, but with the right tool, you are master of your craft. We evolve as human beings, so does design. Nowadays, designers are covered with tonnes of different projects at the same time and to respect all deadlines, designers are pushed to use many different tools in order to do it. That’s why we will share with you list of useful color websites that you can use in your projects, let’s see what they are.
Coolors.co
On this website, you can organize your color palettes, share them, upload images and eye drop colors from them. It’s a very useful and powerful website for colors with an also CSS export option, chrome extension and if you don’t know exact color you want to use, pressing “space” on your keyboard will scroll random colors for you. Only negative thing is that it doesn’t have color wheel option, so you are unable to use any color scheme.
Adobe Color
This is almost a perfect color picking website. It has all you need to find the right color scheme or type for your project. Also, a great thing is that it’s integrated with your Adobe account and creative cloud, that way it’s easier to use in Adobe tools.
Sessions
A great educational website for a designer that has an excellent color wheel integration. You pick a color, choose a harmony and then see results. It’s very useful for beginners, and you can find lot more things there.
Grabient
Grabient is a great website for creating and sharing gradients. If you have Sketch it can also be integrated with it. Copy CSS and edit options are available too.
Dribbble
Dribbble is one of the most popular designers sharing website. You can’t literally find a designer who doesn’t have Dribbble account. But one of the very good things there is that you can pick colors directly from projects and even search projects by that specific color.
Originally published at www.broworks.net.
