The combination of colors in the interior is selected according to the color wheel - a spectrum presented in the form of a circle, where different brightness (luminosity) corresponds to different distances from the center.
Any table of color combinations in the interior is a special case because... Using a circle you can generate an infinite number of such tables.
This is difficult material, but if you master it, you will gain a fundamentally different level of understanding of design. And not only the interior.
Itten Circle
Johannes Itten is a Swiss artist who created the Bauhaus curriculum. This course became the basis for art school teachers. Itten wrote many books about color circles, their application, and selection rules.
The use of Itten's color wheel teaches you to harmoniously combine different colors. It consists of three parts:
1. The inner triangle contains three primary colors - blue, red and yellow. They are completely combined in pairs or all together. The combinations are bright and emotional. 2. A hexagon of analog colors is outlined around the main triangle. They are obtained by merging the basic ones - green, orange, purple. 3. The last part is a multi-sector circle containing various shades of analog and basic colors. They are combined in the same key or use opposite shades.
Other color schemes were created based on Itten's circle. The circle is conventionally divided into 2 parts:
1. Warm. The warm part includes yellow, orange, and red. The colors are reminiscent of sun rays and fire. 2. Cold. Cold colors include blue, green, and purple. These are the colors of snow, ice, water, night. In modern circles there is a dark and a light zone. Dark colors include saturated colors, light colors include soft, muted colors.
Methods for combining several colors according to Itten’s scheme
There are many ways to achieve harmonious color combinations using the Itten circle. Below I will list some of the most effective and frequently used ones.
Complementary combination
Here two maximally contrasting tones are taken, located opposite each other according to the specified pattern. They are also called complementary or complementary colors.
This combination option is suitable for creating an expressive accent - one shade is taken as the base, and the second is used not too often to brightly highlight certain objects against the general background. As in the example with the text in the image above, the background is a base color, and the inscription is perfectly highlighted due to the strong contrast.
Classic triad
If there is no need for such strong emphasis and contrast of elements, you can use the principle of the triad. Although it has several types, the first one is classic. Using this principle, you can choose one main one and select two different, but harmonious additional tones for it.
An equilateral triangle is used to form the combination in this combination. Three colors in different corners form a balanced range.
Analog triad
Second color combination option. In this way, you can not limit yourself to three, but take, say, five shades. Moreover, those located nearby on the Itten circle. In this combination, strong or sharp contrasts are excluded. If you use it to select tones, the final combination will be restrained and calm, with smooth transitions.
Contrasting triad
In this case, a complementary combination is taken as a basis, but the additional color is replaced by two others located next to each other in the color scheme. The result is a kind of isosceles triangle. This triad is good because it allows contrasts, but not as sharp as in the case of additional tones.
Tetrad
If two or three colors are not enough, you can use the tetrad principle; it covers a fairly wide spectrum. Using a square, you can choose 4 different colors that will combine perfectly with each other.
Rectangle
Also a good scheme for defining four colors for a design, but not as contrasting as in the above scheme. Using a rectangle, you can select two complementary pairs that are close to each other in shades.
Complementary combination
Complementary colors are colors that are opposite each other in the color scheme. The combination looks contrasting, the colors emphasize each other, increasing the saturation. This method looks bold and original.
The color table allows you to select different color saturations. But in a complementary combination, the most saturated shades look most advantageous.
Triad - a combination of 3 colors
This is a color combination of tones that are equidistant from each other on the circle. For selection, use the triangle rule. Select one tone and draw lines from it to form a triangle with equal sides.
Use the colors that lie at the corners of the triangle. The compatibility is good, the composition looks beautiful even when using desaturated shades.
Choosing a palette
You have seen an example of working with color in practice and theory, now we choose 1 of 3 approaches just for you:
- No accent colors at all, just a basic palette: white, shades of gray, wood. For most small apartments this is enough and it is the safest. Next I’ll look at why it’s good.
- 1 additional accent color + its shades. Also an easy way when you still want brightness.
- Several colors - here the rules of combination come into play, it is not as difficult as it seems, but it is important to know the theory, so in the end.
The interior is not a painting or an advertising poster - brightness is not required. Combining colors in the interior is about choosing one or two right tones and carefully adding them to a generally neutral palette.
Natural
Briefly about interiors without accent colors with a neutral palette - white, gray, black and wood.
They are enough to create a stylish interior. They fit together seamlessly. This is a safe color scheme, where the worst option is a slightly boring interior. Ideal is also quite possible. But adding accents can make the design both better and worse.
Let's break down some real photographs of interiors into palettes:
Stop.
They seemed almost monochrome, but it turns out there are a lot of shades!
That's the whole point! The point is the heterogeneous texture, the play of light and shadow, reflections, and the color temperature of the selected lamps. That is why it is not necessary to always add bright colors.
If you like the last photo, see more in the article about loft-style kitchens. And in a general article about kitchen design, I collected a bunch of non-standard interiors, half of them are implemented without color accents!
Shades of the same color
Also a simple approach:
- Select 1 tone. Standard - blue, light blue, yellow. But you can use any color, even pink, as long as it has low saturation and is good.
- We distribute it among different parts of the interior, observing the rule: the brighter the color, the smaller its share can be.
- Don’t forget about the combination of brightness and saturation with the floor and other wood in the interior.
This can be realized even after renovation solely due to the decor, without using any finishing at all:
It is more difficult with decoration and furniture - with them there is a higher probability of making a mistake and it is not so easy to correct it.
For many examples of this approach, see the material about kitchens in gray tones.
We combine several
There is no place without a color wheel, you can open the color wheel (in English) or just follow the pictures here.
In the upper right corner, click “Harmony” and select the type of combination. Then we move the mouse in a circle. All parameters except saturation are adjusted by moving the mouse in a circle. Saturation is changed with the second slider from the top in the right column “Saturation”. It will change the circle itself.
There are different types of color combinations and each type has its own geometric illustration on the circle.
- Analogous . A set of flowers located on a circle nearby.
- Contrasting , they are also complementary , they are also complementary . They are located opposite each other on a line drawn through the center. For example, brown and blue.
- Conflict . Located on lines intersecting in the center of the color wheel at right angles. For example red and blue.
- Triad . Equidistant from each other (forming an equilateral triangle). For example, red, green and blue - the three primary colors form just such a triangle.
- Two pairs . Actually 2 pairs of complementary colors whose lines intersect in the middle of the circle at a right angle.
In interiors, it is best to use the first similar and complementary ones. With the rest, the requirements for proportions are too strict - they made a slight mistake and ended up with conflicting ones.
The basic neutral color is white or gray - easy and correct because... they are suitable for standard finishing materials.
I advise you to never leave them unless you have experience or haven’t hired a really cool designer. Use brown, peach, black or any other as a background - if you want to suffer.
For interiors, we are interested in 2 inner rings (pastel colors) and 2 outer ones (dark) and they are the same but with a different saturation (amount of gray).
In the selected areas there are colors that I do not recommend using in the interior . This doesn't mean they are bad. Rather risky. It is difficult to combine them in the interior. I warned you.
Pastels from the middle of the diagram can also be used in decoration, but without fanaticism. Dirty dark colors are good for textiles: curtains, carpet, bed linen, upholstered furniture.
Why are the others bad?
They do not combine with natural materials and natural finishing tones. The most common mistake of amateurs is that the color of the floor ruins everything. Choose an accent from the middle of the circle or even from dangerous zones, without thinking that most floor materials imitate wood, which neither in terms of luminosity nor saturation is combined with anything bright:
By the way:
That's why I recommend white furniture for children's rooms. This is the only way to use the bright colors that children like so much.
Pure red, green, and blue should absolutely not be used in interiors. They are too aggressive, they put pressure on the psyche and draw all the attention to themselves.
And no, dirty colors look cool and not boring. In the last paragraph of the article about an interesting kitchen interior, I collected options with exactly these color combinations.
Total we exclude from our interior:
- Pure red, blue, green.
- Bright rich pinks, reds, purples, oranges.
- Dark and dirty greens (keep natural grass greens, pale pastels and all mixtures like pistachio).
- Pale peach finish (in textiles possible). The reason is that peach became boring in the European-quality renovations of the early 2000s.
Where and what to add?
Bright accent colors should be added with anything other than trim. There is no need to make the walls themselves, or even worse, the ceiling, aggressive, this is not how design is done. Furniture, carpets, paintings, all kinds of pillows, curtains and accessories - they make accents. They are easy to add and remove. Leave the finish in natural tones.
Good complex examples where many shades are used and the resulting interior is harmonious: kitchen interiors in the Provence style.
By the way, we are in:
Services for selecting color schemes for a website
With the development of the Internet, online color circles appeared. There are various color matching apps. In them you can choose not from 12 tones, as in the original Itten circle, but from hundreds of colors.
Popular online applications:
- Canva;
- ColorScheme;
- BrandColors;
- AdobeCuler;
- Paletton;
- Color Palette Generator.
The sites offer a wide palette, a variety of tools for processing photographs and creating backgrounds.
Other ways to select colors
There are many other tables with color combinations, including advanced ones, with which you can choose the ideal options for a variety of occasions. But sometimes it’s easier to use special tools available on the Internet. For example, a tool from Paletton that allows you to select the required number of shades from the general spectrum. It is very easy to adjust the saturation and brightness parameters. You can then get more detailed information about the desired shade by simply clicking on the desired area.
There is another tool - Adobe Color. It uses the same combination rules, but is a little more complicated to work with. If necessary, you can set the optimal color harmony rule and mode (RGB, CMYK, HSB or LAB). The code for the resulting shade is very easy to copy - it is given in the lower right corner and depends on the scheme that was previously specified.
That's all for me. I hope these principles and tools are useful in your work!
Johannes Itten "The Art of Color"
The book by the artist Johannes Itten gives all the basic concepts and subtleties of the color scheme. The author explains what color is and what its physical basis is. The following is a description of the main colors of the spectrum and their combination.
In subsequent chapters, the author describes the compatibility of colors and the selection of contrasts. Itten examines the interaction of form and color and explains the rules for composing compositions. Cassia St. Clair "The Secret Life of Color"
The author of the book is an English journalist who is interested in studying color circles. The book reveals stereotypes, beliefs, and cultural traditions associated with various shades. Cassia goes deep into history, making the book read like a fascinating encyclopedia.
How to use the Itten circle in the interior
There are several schemes for working with a spectral cheat sheet. Each is based on a combination of different types of shades. There are ten combinations in the circle of color combinations in the interior:
- Main;
- Composite;
- Complex;
- Additional;
- Contrasting;
- Related-contrasting;
- Related;
- Monochromatic;
- Neutral;
- Achromatic.
You will find a detailed analysis of shades in the video. Your main initial task is to understand the basic principles of combining shades. We offer simple schemes.
Monochrome
Another name is analog. To get a successful combination, you need to take three adjacent shades on the circle. These will be tones from the same color scheme that will play in the interior in exactly this combination.
Complementary
This scheme is otherwise called contrasting. The combination is made of two shades located on opposite sides of the circle. Sometimes it seems that these colors cannot be combined, but they look amazing in decor.
Triad
The combination is based on three main tones. To choose them correctly, build a triangle with equal sides on the color wheel for interior designers. You can use bright pure shades or midtones. In the second case, you will get a calmer, unobtrusive decor.
Polychrome or tetrad
Color composition: main tone, two additional and one accent. To find it, you need to inscribe a square in the circle of the spectrum and take the shades that will be in the corners. This scheme is suitable for many modern interior styles. If you find the right combination, such a design will become a design find for your home or apartment.
Color Selection Schemes
Examples of using schemes for choosing shades
Susan Weinschenk's 100 Essential Design Principles
This book is about the design of websites, products, brands. The author is a doctor of psychology who understands what worries people. Only by understanding the reasons for a person’s behavior can we offer him something that will interest him.
Part of the book is devoted to colors and their influence on human behavior. The author offers various design solutions that help attract different target audiences.
Combination of colors in the interior
It is known that with the help of color you can control a person’s mood and certain functions of his body. Therefore, when creating an interior, it is important to create the right color scheme, choose safe colors that a person will feel comfortable surrounded by. The interior of a bedroom or children's room should be designed with special care. Professional designers recommend choosing the following shades for different rooms:
- kitchen - soft tones of yellow, turquoise, sand;
- hallway - bright colors of green, blue combined with beige, red;
- living room - based on neutral, pastel colors, diluted with bright contrasting splashes;
- bedroom and children's room - pastel colors;
- bathroom - blue, blue, purple shades.
The selection of shades allows you to visually enlarge or reduce the room and smooth out its shortcomings. Warm colors can add coziness to a large room. A small room will be visually enlarged by white or blue walls.
In the interior, the same compatibility rules are used as in the design of websites and clothing:
- complex - classic tones in combination with any others;
- triad - a combination of three saturated tones or halftones;
- tetrad - a combination of four colors;
- a similar combination is a combination of tones lying sequentially on a circle.
There is no clear distinction between the circle into feminine and masculine shades. However, there are tones that women like more - lilac, pink, blue, purple, green. Men prefer cool colors. Also, representatives of the stronger sex are worse at distinguishing halftones.
The appearance of color wheels is associated with mystical and physical theories of color. They were used in painting, with the help of circles they explained the interaction of colors and the creation of new colors by mixing others. Nowadays, color circles are used by artists and designers, and they are necessary in the fashion world.
Do you use color wheels in your life? Share your stories in the comments, and don’t forget to tell your friends on social networks about the article.
Form style
Naming
Package design
Brand book
Brand audit
Brand strategy
Red, white, blue: eight rules for choosing a color palette that everyone should know
Human interaction with a computer relies heavily on graphical interface elements, and color plays an important role in this process. As Pierre Bonnard once said: “Color not only makes a design pleasing to the eye, but also reinforces it.” When designing a new product, designers often find it difficult to come up with a color scheme, since there is an unlimited number of possible combinations. In this article we will look at eight basic rules that can help you with your choice.
Limit the number of colors
When adding colors to a design, it is essential to maintain balance;
and the more there are, the more difficult it becomes to achieve this. The result will be better if you adhere to the rule of “maximum three primary colors” when creating a palette. In a study from the University of Toronto on how people use Adobe Color CC, the majority of respondents said they preferred simple combinations based on two or three colors. If you need additional colors beyond those already added to the palette, use different shades.
How to build a palette
But how to choose these two or three colors? The color wheel will help you here.
This circle of 12 colors is one of the main materials for creating a palette.
There are a number of ready-made standard schemes that can make the process of creating a palette easier, especially for beginners:
— Single-color palettes
Single-color schemes leave a very pleasant impression (especially if made in shades of blue or green). As you can see from the Facebook example, the palette looks very neat and elegant.
Single-color palettes are the easiest to work with: they contain only one color with different variations in hue and saturation. All shades of color combine well with each other and create a calming effect.
— Palettes of related colors
Related colors are those that are located next to each other on the circle.
Such scales are built on the basis of related colors: one of them becomes the reference color, and the rest are used to enrich the palette. Everything here is also quite simple, but the trick is to choose the right brightness of the colors used - it will set the tone for the entire gamut. For example, Clear, a gesture-controlled to-do list utility, uses flashy colors to visually draw attention to the tasks the user is currently performing. In contrast, the meditation app Calm favors the related color pair “blue+green” to create a sense of calm and tranquility among users.
— Palettes of complementary colors
Using complementary (opposite) colors, you can easily visually highlight an element.
The simplest varieties of this type consist of two colors that contrast sharply with each other. This scheme allows you to attract the attention of the beholder. When using a complementary palette, you need to decide on a primary color, and use a secondary color to highlight key elements. For example, when the human eye sees an object painted in different shades of green, a stroke of red will stand out very strongly against its background.
— Custom palettes
Pops of color against a gray background are a great way to attract the eye. The design, made in white and gray colors with blue accents, can be seen on the Dropbox website.
Creating your own palette is not as difficult as many people think. There is a very simple trick you can use to get a great look: simply add bright accents to a neutral color scheme (that is, what is usually called black and white). The resulting palette will look very impressive.
Find inspiration in nature
The best color combinations are those we take from the natural world. Why? Because to our eyes they look the most natural. Just looking around is enough to get ideas. If you notice a particularly beautiful or eye-catching shade in your everyday life, try creating a color scheme based on it. Just take photos of beautiful landscapes and choose colors for your palette from them.
Nature creates the best color combinations. This photo can make a great color scheme.
Try to stick to the ratio 6/3/1
When creating a palette, you will also find the ever-current rule from interior designers useful: the proportion of 6/3/1 allows you to create the perfect balance of colors in any space.
Making this concept a reality is very simple: your main color should be 60%, your secondary color should be 30%, and 10% should be your accent color. The main idea is that the complementary color should serve as a support for the main one, but at the same time be easily distinguishable from its background. Color for visually highlighting individual areas accounts for 10% of the screen - you can use it for a call to action or any other element.
Design in black and white first
Playing with colors is fun.
It is not surprising that work on a project often begins with the choice of palette. It's tempting to make finding the perfect color scheme your first step, but I would encourage you to resist yourself and design your interface in grayscale first. Make a black and white prototype of the application and use it as a baseline. Without colors, you'll be forced to focus on spacing and placement of elements. Introduce color last and very deliberately.
A bright spot on a gray background is a simple and effective way to direct the eye to the desired object.
Avoid black
In reality, black color is practically never found.
All “black” objects that we come across in the world around us reflect some amount of light, which means that they are no longer black, but dark gray. Fresh asphalt, for example, is not black at all. And shadows too. If you add black to your set of carefully selected colors, it will “crush” all the others. It is so striking precisely because it is not perceived as natural. Many of the apps we use every day add supposedly black colors to their interfaces that are actually dark gray. For example, the darkest color in the top bar of the Asos app is not #000000, but #242424. So don't forget to adjust the saturation.
Build visual hierarchy using contrast
Color is a tool that guides the eye along the desired path. The more you need to draw attention to a subject, the more you should rely on contrast. Typically, high contrast is reserved for the most important information or key elements. If you want your users to notice something or click something, you need it to be eye-catching! Contrast makes one area of the screen noticeably different from the rest.
Use color to influence the user's emotional state
It's no secret that colors express certain ideas and can influence people's moods.
These ideas will directly influence how people feel about your product. When creating a palette for an interface, it’s not enough to think only about how everything will look—you also need to think about how it will be perceived. The colors you choose can either support or contradict the brand image you are trying to create. To give you a place to start, I've put together a little reminder for you with the basic associations for each color (in Western culture).
Red, Orange, Yellow
Red
(passion, power, danger, significance): Red is a very stimulating color. It leaves a feeling of speed and strength and is associated with energy. It has already been proven that it affects us even on a physiological level, accelerating metabolism and blood circulation. This is why people even read faster and louder when they see the color red. It’s good to use to quickly attract the user’s eye or highlight a specific element that requires their attention.
Orange
(naughty, cheerful, attractive, cheap): Orange is a warm and bright color. It creates an atmosphere of cheerfulness and gives users a feeling of warmth and comfort. Some researchers argue that orange expresses the idea of cheapness.
Yellow
(cheerful, welcoming, stimulating, attention-grabbing): Yellow is an extremely versatile color that combines shades with different meanings. Thus, light yellow is associated with the sun, that is, with something positive and friendly. More saturated tones leave an impression of ancient times and monumentality. They are often used when you need to show something as unshakable and wise.
Green, Blue, Purple
Green
(natural, safe, fresh): Green expresses the idea of merging with the outside world and being close to nature. It is also associated in our minds with growth, as a result of which it is widely used in business. Green can also be associated with ethical attitudes.
Blue
(calm, responsible, trustworthy, reliable): The color blue is usually associated with feelings of calm and tranquility, as well as strength and reliability, which generally gives a feeling of professionalism and inspires trust. Blue tells us that we are safe. For this reason, it is actively used by banks and IT companies. Many titans in the social networking market (Facebook, Twitter, LinkedIn) also feature blue in their interface.
Violet
(luxurious, mysterious, romantic, spiritual): Purple has historically been considered a color associated with people of royal blood and hints that the product is high-end.
Pink, Black, White, Gray
Pink
(femininity, innocence, youth): The most widely known association with the color pink is that of femininity.
Black
(strong, sophisticated, mysterious, challenging): Black attracts attention faster than any other color, even red. As a rule, it is used only for text and accents.
White
(purity, health, innocence, virtue): White highlights the colors that surround it, so it is often chosen as a complementary color.
Grey
(neutral, formal, sophisticated, sterile): Gray leaves a neutral feeling and can take on the characteristics of both black and white.
Acting as the main color, it creates a formal atmosphere. It is important to note here that the meanings of colors can vary greatly depending on circumstances and cultural context. To delve deeper into this topic, read the article Symbolism Of Colors And Color Meanings Around The World.
Make design accessible
Accessibility is one of the key considerations when using color in design. These days, food should be accessible to anyone and everyone, regardless of physical ability.
Don't use color as the only indicator
Approximately 8% of men and 0.5% of women suffer from some form of color blindness - that is, every twelfth man and every two hundred women. There are different types, but the most common is red and green blindness. A person who is colorblind usually has difficulty distinguishing between any shade of the two colors. From left to right: the color wheel through the eyes of an ordinary person - The color wheel through the eyes of a person with deuteranopic type of color blindness - The color wheel through the eyes of a person with protanopic type of color blindness.
Because color blindness comes in many forms (some people cannot distinguish between red and green, others cannot distinguish between yellow and blue, and some see everything in shades of gray), it is necessary to use several visual markers at once to indicate the most key conditions in the product. In addition to color, you can also use styles, symbols, patterns, textures and text to describe actions or content.
Avoid conveying information through red and green colors - this will be extremely inconvenient for people who cannot distinguish between them.
Make the text as contrasting as possible
Contrast is an area of color theory that is critical to usability. When choosing a color for your text, keep in mind that overlapping two colors with low contrast will make it very difficult to read.
Low contrast can be a death blow to usability.
Monitor contrast to ensure that the text color will stand out enough from the background color so that even a person with colorblindness or very low vision will be able to distinguish the words. Contrast ratio is a mathematical expression of how different one color is from another (usually written as 1:1, 21:1). The greater the difference between the numbers, the more the colors differ in brightness. The W3C recommends the following ratios between the brightness of text and images:
- If the text is small, the ratio should be at least 4.5:1;
- For large text (that is, 14 pt and above for bold font, 18 pt and above for regular font), the optimal ratio is 3:1 or more.
But the good news is that you don't have to check everything manually. Using Color Contrast Checker, you can calculate the coefficient in a few clicks.
Bonus: Tools needed for a UX designer
To make it easier for you, I also provide a list of the most useful tools for choosing colors.
Adobe Color CC
Adobe Color CC (formerly known as Kuler) is a great solution for finding, editing, and creating palettes.
You can modify each color included in the range, or set it as a reference color in just a couple of clicks. Ready-made palettes can be saved and added to the library; In addition, a large number of color schemes created by other members of the community are publicly available on the site. Dribbble Search-by-color
If you want to see how other designers use a particular color in their designs, go to dribbble.com/colors and select the shade you want.
Material Design The
Material Design Guide offers a great color scheme that you can use for illustrations or choosing brand colors.
All the colors it covers are chosen so that they will harmonize with each other in any combination. Colorzilla
Colorzilla is an extension for Google Chrome and Mozilla Firefox that includes a whole bunch of color tools, including a color picker, a CSS gradient generator, and a palette viewer.
Coolors.co
Coolors.co is a powerful tool for building a multi-color palette. You can simply lock the color you want and press the space bar to get a new range. What’s especially cool is that here you are not limited to just one option - you can create different palettes by changing the parameters at the start. I especially like making palettes using photographs. This tool allows you to upload a photo and build a palette of colors that are present on it.
The Colorblindness Simulator in Adobe Photoshop
Photoshop allows you to test how universally accessible your design is.
Just go to the View > Proof Setup tab and select the type you are interested in (Protanopia type or Deuteranopia type). NoCoffee Vision Simulator for Chrome To make sure your design is accessible to everyone, it's a good idea to experience colorblindness yourself during the design process. NoCoffee Vision Simulator provides the ability to create a simulation for any interface that shows what it looks like to people with color blindness or low vision. For example, if you apply the "Deuteranopia" filter in the "Color Deficiency" tab, you will see the website in grayscale. This will help you adapt the interface to the needs of people with eye problems. Color is one of the most powerful tools in a designer's arsenal, but it's also not easy to master. I hope the rules I have listed will be useful for beginners to lay a foundation. The next step is practice: after all, the only way to get better at creating palettes is to do it as much as possible.
