Color Theory - Guide on Theory and Harmony of Colors in Design

Learn how colors work and learn to use color theory and all its power to your advantage.

color theory

Yeah! Td bele?

Today we will talk about the colors, or rather, about the color theory.

The color is in everything. We use color daily for various things: to choose food, clothing, tennis, car, decoration...

We always find ourselves thinking about "which combination" will be better, which colors will please the most, which colors to avoid ...

That is why color has been intentionally applied over time in all media: in television, cinema, advertising, magazines, books, the internet, architecture, art, etc. And we can use such tactics when studying color theory.

If you work, or intend to work, in areas related to creation and/or communication, you need (this is a minimum and indispensable requirement, Galucho) to know about colors: know how they work, what they can represent and how to use them in the best way.

So I'm going to start here a series of articles, one quadriology actually about the colors.

First I will talk about color theory. later my friend ED Franscisco will come to talk about how to use colors in communication. And finally I come back to help you choose an efficient color palette for your projects. OK? So let's get 🙂. "Let's Go!"

But before we proceed with the article, I want to take the opportunity, since we're talking about Colors, to let you know that we're open for our Visual Design Fundamentals course. The Fundamentals of Visual Design course focuses on the fundamentals, concepts and principles of Visual Design.

In this course, along with the other fundamentals, you can delve even deeper into Colors. Click on the link below and learn about our course.

⭐️Visual Design Fundamentals Course⭐️
Learn more ➡ https://www.fundamentosdodesign.com.br

Basics of Visual Design Course >

In this article you will find out:

What is color theory?

wallpaper-colors by Alessandro Pautasso
Color Wallpaper - by Alessandro Pautasso.

Color theory is the study on colors, ranging from physiology, that is, how it is interpreted by our brain to the application and use in visual communication pieces.

In color theory we can understand how color acts in humans and how we can use it to our advantage, manipulating colors to pass a certain message or convey a certain sensation.

Knowing the theory of colors is something essential for every artist, designer, publicist and everyone who deals with design, art and visual communication.

How do we see colors?

In history several scientists have studied colors. Aristotle, Pliny, Leonardo da Vinci, Le Blon and Goethe, certainly one of the most important and that we will see also in this series.

"Johann Wofgang von Goethe (1749-1832), who in his "Doctrine of Colors", 1810, emphasizes the aesthetic, moral and philosophical sense, defending the physiological functions and psychological effects of colors. Goethe opposed the methodical and mathematical sense of Newtonian optics, a controversial fact with the sympathizers of Newton's works, because it was emphatically contrary to his theories."

But for now we'll talk about the physical part of the thing, the study of Isaac Newton (that guy from the "three laws," remember?) in the 17th century. prism was able to divide a beam of light into seven colors: red, orange, yellow, green, blue, indigo and violet. Not by chance the colors of the rainbow (where the color droplets make the prism function).

24

Colors are bands of waves that are possible to be seen by the human eye. And the length of the waves is what defines the colors, that is, it is what defines it, the green, the yellow, the blue that we see.

26

So color doesn't exist in a tangible way. Color is a sensation produced by the eye. It is the impression produced in the retina of the eye by light reflected/diffused by objects.

And the English physicist Thomas Young in the 19th century formulated the first scientific theory for the sensitivity of the human eye to color (later studied and proven by the German Hermann von Helmholtz).

Young and Helmholtz, came to the conclusion that inside the eye there are receptors that process light, "the cones", and that these are composed of three types of nerves.

22

These three nerves are responsible for the perception of a certain region of the light spectrum, respectively, were red, green and blue and that the rest of the colors we see actually come from the sum of these three "primary" colors.

Oh David, so why do I see the red on my neighbor's beetle?

Simple, the color we see is the color that the object (in this case the beetle) reflects.

It receives all colors and absorbs them except red, which is the color it reflects for us.

23

Primary, Secondary, and Tertiary Colors

Within the theory of colors we have the primary, secondary and tertiary colors. Starting with primary colors, they are colors that cannot be decomposed into other colors and when combined create others. They can be defined by additives and subtractives.

Light Color - additives

It's color through the incidence of light ray. The light is emitted by the object.

It can be natural, like the sun, or artificial as TVs, monitors, digital cameras, etc. The sum of the three primary colors produces white.

This system is the RGB (red, green and blue) that we use when we produce something for the web, for example.

It is the opposite physical/mathematical system to CMY.

17

There are also HSB (HSV), HSL, HSI systems that use hue, saturation, and brightness for color definition.

Color Pigment- subtractive

It is the color derived from the absorption of light, that is, the visible color is that which was not absorbed by the object.

Pigment colors can be divided into opaque and transparent:

Opaques - RYB:

It is a system widely used in the fine arts, home-made fabrications, weaving and etc.

The primary pigment colors are yellow, blue and red (RYB – red, yellow and blue).
The mixture of the three colors produces gray through subtractive synthesis.

The RYB system requires the addition of white (to lighten) and black (for darkening) color.

This system does not have another equivalent system (as is the case with RGB & CMY), so it is not possible to make an exact conversion to any other system, at most an approximation.

21

Transparent - CMYK:

It is the system used by printers, graphics, graphic arts, etc. It is the industrial version of CMY which is the physical/mathematical opposite system to RGB.

The primary colors are magenta, cyan, and yellow. And the mixture of the three colors produces gray through subtractive synthesis.

The system, of course, used is CMYK.

16

The letter "K" at the end means "black". The addition of black is due to the fact that although the mixture of cyan, magenta and yellow colors produce a gray very close to black, it is still unfeasible in matters of materials (worn with colors and papers) and unsatisfactory in quality issues in the finish.

Secondary and tertiary

All other colors that exist come from mixing the primary colors.
When we combine two primary colors, we get a secondary color, and by combining a secondary color with a primary we acquire a tertiary color.

29

Color property

Colors have three properties: hue, saturation, and brightness.

18

Matiz

It is the first attribute of the color. It is the result of our perception of reflected light. Hue is color name: red, blue, green, yellow, etc.

11

saturation

Also known as chroma, refers to the purity of color. It is defined by the amount of gray that the color contains. Then, the saturation of a color adjusts by adding amounts of gray, so the purer the color, the more saturated it is.

15

Shine

Also called Value or Luminosity, it concerns the clarity, or lack thereof, of color. One color can be brighter than the other, for example, yellow is brighter than blue. And also a color can have variation in its own brightness, adding white (more luminosity) or black (less luminosity).

12

Color Temperatures

Colors have temperatures. In fact this issue is more subjective and has much more to do with the experiences and perceptions of those who see them. However, we can define them between hot and cold.

10

Hot colors:

They are the colors in which red and yellow predominate. They are called hot because they create a feeling of warmth, proximity and are associated with the sun, fire, etc.

cold colors:

They are the colors in which blue and green predominate. They are associated with ice, water, and create calm sensations, freshness and tranquility.

The question of temperature is also relative and depends on the combination made. For example: if yellow is applied with red its temperature decreases, because the red is more intense, but if it is combined with blue it becomes warmer.

Harmony of colors

To obtain a pleasant, effective look, you need to combine the colors in a harmonious way. There is no dogmas about it, it all depends on the purpose you intend to achieve. But there are efficient combinations that can help you choose the right one.

To complement what has been on board so far, I will leave here a video where I explain on the theory of colors in more detail. Check:

Next we will use the Chromatic Circle to visualize the main harmonic schemes.

Let's check it out?

Color Theory - Complementary Colors

The complementary color of a primary is the sum of the other two primary in equal proportions, that is, a secondary color.

It is the combinations that have the most contrast: red and green, blue and orange and yellow and violet.

To find them, in the chromatic circle, just check that the color that is in the position directly opposite the chosen color.

01

Split Complementary Colors

This harmony is a variation of the complement. It uses one main color and two adjacent colors as complementary.

This harmony has a lot of contrast, but it is more "soft" than the direct complement.

03

Analogous colors

It is a combination with three consecutive colors (neighboring) in the color circle.
It is usually composed of a primary color and its adjacent. Because colors have the same base, this is a little contrast composition.

02

Analogous plus a Complementary

Uses combination of three adjacent colors plus a complementary one. The inclusion of one more color gives more contrast to the combination, breaking the rhythm of analogous colors.

09

Related analogous

This harmony consists of choosing two analog colors and skipping the third color, to the right or left, adding the next color. It has more contrast than the simple analog.

05

interspersed colors

This harmony consists of choosing three colors interspersed in chromatic circles. It's a scheme with good contrast, but it's a composition sometimes a little harder to deal with.

07

Triadic colors

It consists of the use of three colors with the same distance (equidistant) in the chromatic circle. It is a combination that has a high contrast with richness of colors.

08

Terádic colors

This color theory scheme uses two complementary color pairs. It is a combination with a lot of contrast and that allows numerous variations.

06

Squared colors (90° harmony)

It is very similar to the terádic scheme, but with equidistant colors forming a square within the chromatic circle.

04

Monochrome

It refers to harmony that uses only one color, changing only the tint of the chosen color, that is, changing only the saturation and brightness of the color.

It is a combination with very little contrast, but it can create a pleasant visual effect, such as the "gradient" effect.

13

Color Contrast

Contrast is a powerful element in design.

Chromatic contrast is the relationship between colors that defines their differences. When two different colors come in contrast, this intensifies the differences between the two.

There are numerous ways to create contrast, as we have already seen in the harmony of colors, but below I will show some applications in the practice of contrast.

pure color

The contrast that uses the saturated colors chromatic circle.
HBW, Cluster amaryllis!

Complementary

This is the contrast between a color and its complement. It's one of the strongest contrasts we can get.
Cosmos in pink

light and dark

This contrast exploits brightness, white, black and gray gamma.
Occurs when you place a light color next to a dark color.
Reversed city

Hot and cold

It refers to the contrast of warm colors with cool colors and vice versa.
Curves with colors

saturation

Only one color was used. This contrast uses the intensity, tone and luminosity of the color.
Abstract (cake waves)

Conclusion

The correct use of colors makes it possible in addition to something pleasing to the eye an efficiency when transmitting the message we want to convey. That's why we need to know the color theory and know how it works. Whether you are a designer or not, if you work with visual communication you need to understand about color theory. It's some indispensable.

But don't hold on to any cake recipe. Galuchos, use your creativity and critical sense to create amazing things with colors.

Check out the second article in the series where we will talk about the psychology of colors in a different way than you find out there on the net.

Check out the meaning of colors→
https://www.chiefofdesign.com.br/significado-das-cores/

Check out accessibility and →
https://www.chiefofdesign.com.br/cores-e-acessibilidade/

Check out how to create an effective color palette→
https://www.chiefofdesign.com.br/paleta-de-cores

Check out the psychology of color →
https://www.chiefofdesign.com.br/psicologia-das-cores/

So stay tuned to the blog to follow this series of articles on colors.

And if you liked it, leave your comment below and if you liked it very comment and share with your friends. 🙂

Until later.

Strong hug.

References

http://www.belasartes.br/revistabelasartes/downloads/artigos/3/cor-luz-cor-pigmento-e-os-sistemas-rgb-e-cmy.pdf

http://www2.ic.uff.br/~aconci/curso/percep~1.htm

http://www.auladearte.com.br/

http://www.colormatters.com/

http://pt.wikipedia.org/wiki/Cor

Image of eye anatomy:http://cbernardo-cordigital.blogspot.com.br/

Pink Floy disc image:http://almanaquedossentidos.files.wordpress.com/

Images examples of contrast:https://www.flickr.com/photos/[email protected]/

David Arty

Hi I am David Arty, founder from the blog Chief of Design.
I am from São Paulo, Brazil. I work with design, mainly with web design, since 2009. I try to transform crazy and complex ideas into simple, attractive and functional pieces.