Color, properties of color, color wheel. Types of color, color systems, color palettes. Coloristics.

Muhammed Bayram
Bootcamp
Published in
9 min readMar 1, 2023

--

Caution, that’s a lot of text!

Color is one of the fundamental attributes on which design is based. In the hands of a professional, it can be a powerful tool. It affects many factors that play a major role in visual perception. Color has a huge impact on our consciousness, it changes our attitude toward any object in literally seconds, as well as making people react to it and even take certain actions.

At first glance the study of color may not seem that difficult to master, but if you go deeper into the details, it becomes clear that there are many subtleties to consider.

Colorful picture

Color

Before we go any further, it is important to understand the very essence of color. Webster’s Dictionary defines it as a light phenomenon (such as red, brown, pink, or gray) or a visual perception phenomenon that allows a person to distinguish between objects that would otherwise appear to be the same. Simply put, color is a feature of an object that arises from the light emitted or reflected by that object. Color can be visually “checked” by evaluating its properties (tone, saturation, chromaticity, and brightness). To fully understand the meaning of color, let’s give definitions of its characteristics.

Properties of color

The basic properties of color include hue, brightness, chromaticity, and saturation.

Color Hue is a characteristic of color that is responsible for its position in the visible spectrum. As you probably know, people see colors in the range from red to violet, which is the visible spectrum. So the color tone tells us which part of the spectrum the color belongs to: is it blue or red or maybe green. Just by naming a color, we’re essentially indicating its color tone. Different tones are created by light with different wavelengths, and this color characteristic itself is usually pretty easy to recognize.

The term “hue” is often confused with “color,” so we have to dwell on these definitions in more detail. First, it is necessary to understand that “color” is a generalized concept that people use to refer to all hues, halftones and tonalities. On the other hand, hue is exactly what we mean when we ask “what color is this thing?” In general, tone is the totality of the twelve pure and vivid colors represented on the color wheel.

Hue is a base material that can be changed in three different ways: fade, shade, and tint. Depending on the technique used, tone turns into shade, shadow, or tint.

Distinguishing between the two is easy. Tint is created by mixing some tone with white, while shade is the mixing of some tone with black. Hue is a more subtle process, as it requires the addition of both black and white, and so the result will look more natural compared to halftones and shades.

Picture with an examples of Hue, Tones and Shades
An examples of Hue, Tones and Shades
Different color hues
Different color hues
Same color hue
Same color hue

Chromaticity

Chromaticity is a property of color that indicates its purity and the absence in the color of admixtures of white, gray and black. In essence. all colors are chromatic, as there is some degree of hue in them.

Achromatic colors have no hue and do not belong to any part of the spectrum. White, black and the entire gray scale are achromatic colors.

Chroma, or chromaticity, indicates purity of tone. This trait is evaluated based on the presence of white, gray, or black in the color. The twelve basic tones described below have the highest degree of chromaticity because they do not contain any additional elements, Colors with high chroma are bright and vibrant.

Different color hues
Chromatic colors
Achromatic colors
Achromatic colors

Saturation

Saturation is the intensity of a color, its difference from equal light gray. The farther the color is from the gray scale, the more saturated it is; the more similar the color is to a shade of gray, the less saturated it is.

This trait has a lot in common with luminance and chroma, so they can sometimes be confused. It is very important to understand the difference here. Unlike the previous two properties, saturation does not involve mixing tones with other colors. Saturation is what a color looks like under different light conditions, how bright or pale the color seems under daylight or low light. This property is also called color intensity.

Different saturation of the same color
Different saturation of the same color

Brightness(Value)

As mentioned before, colors have certain characteristics by which they can be recognized. Brightness is a property that indicates how light/dark a color is. This attribute is determined by the degree of whiteness. The more white added to a tone, the higher its brightness.

Brightness

Brightness is a concept that is often confused with saturation in everyday life. In fact, brightness is the amount of white light emitted by a color. The closer the color is to white, the brighter it is. Well, the brightest color is white. So it is wrong to say that a red dress is brighter than a pink one: it is just the opposite.

The brightness of color from lower to higher
The brightness of color from lower to higher

Tint

A tint is a color with the addition of white, that is, a lighter version of a color. Shadow is a color with black added, its darker version. And a tint is a color with gray added to it.

Tints
Tints
Shadows
Shadows
Tones
Tones

Color wheel

If you’ve ever taken a painting class, you’ve definitely seen a circle made up of different colors. It’s called a color wheel, and it helps you understand how colors relate to each other and how best to combine them. The color wheel is made up of primary, secondary, and tertiary colors, also known as tones.

Color Wheel
Color Wheel

Types of color

By type, color is divided into primary, secondary, and tertiary; and into cool, warm, and neutral.

Primary colors.

They are the three pigment colors that cannot be created by mixing other colors. They are the foundation of the entire color system. Primary colors vary depending on the type of color system. The subtractive color model CMYK is based on blue, purple and yellow, the additive color model RBG is based on red, green and blue. And in the historical color model of artists RYB include red, yellow and blue.

Secondary colors.

These colors appear by mixing the two primary colors. Since each system has its own primary colors, the secondary colors also vary. Below is a schematic explanation of what secondary colors can be formed in each model.

RGB:

green + red = yellow

red + blue = violet

blue + green = blue

CMYK:

yellow + purple = red

violet + blue = blue

blue + yellow = green

RYB:

yellow + red = orange

red + blue = purple

blue + yellow = green

Tertiary Colors (Intermediate Colors).

The mixing of primary and secondary colors results in tertiary colors, which usually have compound names, such as red-lilac or yellow-orange.

Cold, warm and neutral colors.

All of the colors described above can also be divided into three types: cool, warm and neutral.

Cool colors are on the blue-green part of the color wheel. They are called cool colors because they create a feeling of coolness. Warm colors are their opposite because of their associations with warmth. Yellow, orange and red are the tones that belong to the warm color type. Last but not least, neutral colors are not part of the color wheel. They include black, brown and beige.

Color patterns

There are several color models: RGB, RYB, CMY, CMYK.

RGB.

The primary colors of the RGB model are red, green and blue. This is the primary model for all colors used on the screen. Combining the primary colors of this model in equal proportions results in the secondary colors cyan, violet and yellow, but remember that the more you add light, the brighter and lighter the color becomes. The results obtained after mixing the complementary colors are often unexpected for people who are used to a subtractive color model of paints, dyes, inks and other tangible objects.

RYB and CMY

RYB (R for red, Y for yellow, B for blue) is another color model that is often used in art education, especially in painting. It was the basis for modern scientific color theory, in which it was found that blue, purple and yellow were the best three-color combination for mixing. This is how the CMY color model came about.

CMYK.

The CMY model was modified with the advent of photomechanical printing. Black ink became its key component, and the model was renamed CMYK (C for cyan, M for magenta, Y for yellow and K for black). Without this extra pigment, the closest shade to black would be a dirty brown. This color model is currently the most commonly used in printing.

Difference between RYB, CMYK and RGB
Difference between RYB, CMYK and RGB

Color Palettes

In design, color balance is of utmost importance, because users’ impression of a site or app is created at first sight, and colors have a strong influence on this. Designers have defined the basic and most effective color palettes, or color harmonies.

Monochrome.

It is based on one color and its different tones and shades. The monochrome palette is always a win-win, because here you have to try hard to make a mistake and make everything tasteless.

Analog.

To create an analog palette, you use colors next to each other on a color wheel. This type of color palette is used where contrast is not needed, including in the background of web pages or banners.

Complementary.

A complementary palette is a mixture of colors that are opposite each other on the color wheel. This scheme is the opposite of a similar and monochrome one, as its purpose is to create contrast. For example, in any interface, it would be hard not to see an orange button on a blue background.

Separate-complementary.

This palette works similarly to the previous one, but uses more colors. For example, if you choose blue, you need to add two adjacent shades of its opposite color, i.e., yellow and orange. Here the contrast will not be as sharp compared to the complementary scheme, but you can use more colors.

Triadic.

When a design needs more color, you can resort to a triadic scheme recommending the use of one color as the dominant and the other two as accents.

Quaternary/Double Complementary

The Quaternary color scheme is intended for use by experienced designers, as it is the most difficult to achieve balance. It uses four colors from the circle that make up complementary pairs. If you connect the dots on the selected colors, they form a rectangle. In this scheme, it is quite difficult to achieve harmony, but if you do it right, the results will be amazing.

In the next article you will learn about the psychology of color.

DISCLAIMER: Some materials in the form of text and images is taken from the Internet for educational purposes. The author decided to collect a collection of rules and basic knowledge necessary in graphic design. The materials are not used for commercial purposes.

--

--