Algorithm for automatic harmonious color selection for the image
based on the color theory of Johannes Itten
During the work on the web or a mobile product there is often a need to set aside a certain information block with an image, some text or controls. A common practice is to use the blurred magnified image on the backgrounds.
In my opinion, this approach has a number of disadvantages as it creates a visual dirt, does not work well with bright images and is no longer novel.
I like to use pure colors in the backgrounds, especially if they are the corporate colors of the project, with the use of the automated algorithm, which will be discussed below.
The work of the algorithm, I will describe on the example of music service Yandex.Music, where it was introduced by me.
The algorithm can be divided into four stages:
- Build a color wheel and define additional colors
- Determine the average color of the image
- Substitute the average color of the image in the color circle and define its complementary color (harmonious)
- Calculate the area of the color objects to determine the saturation of the complementary color
1. Build a color wheel and define additional colors
Let’s decompose the Yandex company colors in the color wheel of Johannes Itten. The missing colors (orange and red and purple) are obtained by mixing the neighboring.
We get a pair of complementary colors, which are located on opposite sides of the Itten color wheel. The principle of complementary colors is the basis of compositional harmony, because if it is met, there is a feeling of complete equilibrium in the eyes.
2. Determine the average color of the image
There are many ways to determine the average color of the image, but the simplest and most beautiful, in my opinion, is to reduce the image to 1px.
3. Substitute the average color of the image in the color circle and define its complementary color (harmonious)
We determine which of the color range includes the average color of the image, and define its complementary color in the color wheel (diametrically).
We will work with the HSB the color model (but feel free to used the others, such as CMYK, RGB, Lab). To determine what the range of the color wheel gets the average color of the image, we define its parameters Hue / tone (ranges 0–360°).
4. Calculate the area of the color objects to determine the saturation of the complementary color
Since the area color objects differs, it is necessary to equalize them by changing the saturation or lightness of color.
Determine the image area and substrate:
Image 200x200px = 40000px (S = a*b)
Substrate 950x260px = 247000px (S = a*b)
Calculating the coefficient:
247000/40000 = 6.175 (substrate larger than image 6.17 times)
Relationship of lightness of basic complementary colors:
yellow : purple = 9 : 3 = 3: 1 = ¾ : 1/4
orange : blue = 8 : 4 = 2: 1 = 2/3 : 1/3
red : green = 6 : 6 = 1: 1 = 1/2: 1/2
average: 2 : 1
6.17/2 = 3,085
100% / 3,085 = 32% = 32.41491085899514
We reduce the lightness of the substrate by overlaying the white substrate with 68% opacity (100%-32% = 68%).
We get the colors of the substrates:
Output results
Generation of unlimited numbers of additional colors from existing
In order to generate an infinite number of additional colors from existing, it is necessary to mix neighboring colors
PS
In my opinion, this algorithm can be applied not only in digital, but also in video / advertising / printed materials.
—
