Specialists are constantly looking for unique color solutions for websites that will be interesting and attractive to users. Effective advertising cannot do without bright banners, and the work of a blogger depends on the colorfulness of photographs and creatives - all this affects the quality of promotion of goods, services and personal brand.
Working with color may seem complicated, but this is only at first glance. The main thing is to understand the basics. If you, like the author of this material, do not have a clear understanding of where to start, let’s figure it out together based on a tool - the Itten circle.
What is Itten's circle
Itten's color wheel is a graphic scheme of 12 color sectors for finding the right combination of shades. It is divided into primary and secondary colors, as well as cold and warm tones.
Note. Named after the Swiss artist Johannes Itten, who reworked the classic color scheme. He applied in his work not only knowledge from the field of art, but also chemistry, psychology and physics.
Circle of color combinations. Source
Designations of colors in a circle and their meanings
The primary or basic colors are blue, yellow and red. They cannot be obtained by mixing, so they are located in the center.
Secondary, or additional , are obtained by mixing two colors.
- Yellow + Blue = Green
- Yellow + Red = Orange
- Red + Blue = Purple
Tertiary, or composite - mixing primary and secondary colors.
Examples:
- Yellow (primary) + Green (secondary) = Yellow-green
- Red (primary) + Orange (secondary) = Red-orange
Designation of colors and shades
In practice, you can use variations of primary colors - for example, from bright yellow to dark yellow, to get your own Itten circle with a new range.
How the colors of the circle work:
- The maximum contrasting colors are located at the maximum distance from each other.
- Shades from green to crimson are cool.
- Tones from red to yellow-green are warm.
Dividing the circle into warm and cold shades
Combination of colors in the interior: curtains and wallpaper, as well as furniture - how to combine?
In most cases, textiles are purchased when the room has already been renovated and furniture has been placed. In this case, when selecting the right fabrics, many difficulties arise that affect the combination of colors in the interior. Curtains and wallpaper, as well as furniture, are much easier to select at the same time.
Successful color combination
The procedure for selecting the color of furniture and textiles will be as follows:
- determine the first and second basic shades;
- wallpaper is purchased in a light shade of the first color;
- furniture in two different colors of the second option;
- curtains should be made of fabric with a pattern consisting of the first and second colors;
- the same fabric will be used for decorative pillows;
- pillows can be made from fabric in a rich first color.
Bright room
This is a conditional algorithm and each designer can develop his own, but if you are new to this business, then focus on the described technology and you will be able to correctly design your home yourself.
Itten's color wheel for designers - meaning
It is an assistant for those who are just starting to study color solutions and do not fully understand how exactly the palette affects style and design.
Itten’s scheme can be used everywhere: in photographs, videos, illustrations, paintings, website design, when choosing an outfit, in the interior and much more. This way you can train your eye and your perception of the harmony of shades every day.
Simple but powerful landing page builder
Create a mobile landing page, online store or multi-link for Instagram and promote it through chatbots in instant messengers, email and SMS - all on one platform!
Create a landing page
The color wheel for designers is an opportunity to visualize a combination of shades and understand what contrasting elements need to be added to the site and what background to choose.
Several features when working with color, which Itten also noted in his book “The Art of Color”:
- If you want to get a combination of two colors, use them in equal proportions.
- When you need to highlight a certain color or subject among other elements, add a monochrome background. It would be appropriate to place green buttons on a white background on the site. The photo shows a blue sky and a man in an orange suit.
- When using three colors, focus on one shade and add the other two as accents. Everything is in different proportions - for example, in the ratio 60% x 25% x 15%.
- White can be combined with any colors and shades.
- Black can be combined with any, but it is better with soft and bright shades.
Red
In 2005, Durham University scientists published a study that showed that athletes who compete in red uniforms win more often. The color red is associated with urgency, danger and power. It seems like a shade that should be avoided, but if used in moderation, it can improve sales performance.
How does the color red affect sales?
The color red provokes a person to take action. If you have already attracted the visitor’s attention with an impeccable design and interested him with high-quality text, then a red button with a clear call to “Start”, “Search” or “Buy” will come in handy.
Where can you see red calls to action?
At any sale in shopping centers, discount signs are usually red. This works especially effectively, for example, during Black Friday, when people already know that they can buy goods at a deep discount and they only need a final “push” to make a purchase. That's why posters announcing sales are usually bright red—they convey a sense of urgency.
Where should you use red?
Red works best when it comes to impulse purchases. Therefore, it is often used in online stores. However, red is also effective for other sites, such as online booking sites for accommodation and airline tickets.
Red CTA button on Airbnb website
Red pop-up and buttons on the website of the Internet giant Aliexpress
Basic combinations on the Itten circle
In this section we will discuss options for using a circle. There are four main types of color combinations. For each of them, geometric shapes are used - line, triangle, square, rectangle, which can be rotated and new combinations of shades can be obtained.
Complementary combination of two shades
This is a combination of two opposite colors. For example, yellow and purple. Such combinations are considered harmonious and pleasing to the eye. The selected colors can be used in equal proportions.
Example: choosing contrasting colors for a button and text - CTA.
Example of a complementary combination
Poster for the film "Fight Club". A combination of two primary colors - green and pink.
Poster option with two primary colors. Source
Triad
There are two types of triads, which combine three opposite shades:
- Contrasting - refers to a complementary combination, but the complementary color is replaced by two others located next to each other. This is a less contrasting combination.
Example of a contrasting triad - Classic - three colors are taken, equidistant from each other. The result is a balanced range in which shades are used in different proportions: one tone sets the composition, the second plays it out, and the third is added as an accent.
An example of a classic triad
Poster for the movie "Jojo Rabbit". The simple illustration uses the main color red as the background and accents with blue and yellow.
Variant of the image using the classic triad. Source
Monochrome
It is also called an analog triad. It allows a combination of three to five adjacent colors with soft transitions and without sharp contrast. The combination can be considered a kind of gradient - the colors smoothly transition into each other.
Example of an analog triad
Poster for the film "John Wick", which is decorated in analog colors - a smooth transition from purple to orange.
Poster option with a monochrome palette. Source
Polychrome
Using four colors. To correctly enter all the colors, you will need to study the rules of color. There are two types of combinations:
- The square scheme is a harmonious and bright combination of equidistant colors. It can be used, for example, when developing bright websites with a complex structure.
Example of a square diagram - The rectangular scheme is another combination of complementary colors: pairs of shades are close to each other. One shade becomes dominant, and the rest become auxiliary.
Example of a rectangular diagram
Poster for the film "Once Upon a Time in Hollywood". The main color used as the background is red. Additional shades are blue, green and yellow.
An example of a poster with a color combination of four shades. Source
Type 3 – Stylish and creative sites with lots of graphics
If you are going to create a website related to creativity (fashion, design, restaurant business, beauty, etc.), there are no restrictions for you.
For these types of sites, there are no rules for using a background color. You can make the menu bar black to add drama. Or create a background using all the colors of the rainbow to cheer up resource visitors:
Always try to stick to one rule: never choose a background color that makes the text on it difficult to read.
The ideal background color allows the content to stand out and blends harmoniously with the dominant and supporting colors. The right background color makes the user's experience on the site pleasant.
When in doubt, use a white or light gray background. They may not be the most inspiring, but you will be sure that your content is clearly visible.
Color characteristics
Color is not limited to Itten's circle of 12 shades. In this section we will understand the types of color and its characteristics.
Colors are divided into:
- Chromatic - colored.
- Achromatic - white, gray and black shades.
Quality color characteristics
Color can change towards saturation, hue or lightness. Let's take a closer look at these characteristics.
Color tone
This is the place of color in the light spectrum. Helps to identify a shade, give it a name and compare it with others.
Light spectrum
Saturation
Helps identify contrasting bright or dull colors. Saturation depends on the admixture of gray tint.
Saturation example
Lightness
It is also called brightness. It is she who determines what the color will be: light or dark. Depends on the admixture of white or black shades.
Lightness example
Type 1 – Resources with a lot of content or e-commerce
Have you noticed that information resources and online stores often use white or neutral color schemes for their websites?
This is all because the purpose of these resources is to promote ideas or products.
In such cases, the focus should be on the product or service rather than the website design. The background color is just a basis to make the content more visual and readable.
For information resources and online commerce, it is best to use a light background, bright dominant and auxiliary colors. The brightness of the predominant and accent colors guarantees the uniqueness of the site and allows details to stand out. At the same time, a neutral background in the color scheme for a sales website helps the user focus only on the content or products.
Palette selection tools
To help you quickly find the shades you need and determine the colors for your project, use online tools. All services presented below are free and do not require registration.
Paletton
Paletton is a tool in English that allows you to select shades from basic color combinations.
Peculiarities:
- Adjust saturation and lightness settings.
- View page design options.
- Create your own color schemes.
- Fine-tune four parameters: hue, saturation, brightness and contrast.
- View information about color modes - RGB, LAB.
- Export the color scheme for the site in code format.
Paletton Circle Review
Adobe Color
Adobe Color is a service from Adobe that is constantly updated with new features.
Peculiarities:
- Saving the palette in cloud storage for further use in Adobe services.
- Ability to adjust brightness and each color mode parameter - RGB, LAB, HSB, CMYK.
- There is a tool for determining the contrast of background, text and graphic elements.
Adobe Color interface
ColorScheme
ColorScheme - the functionality is similar to that presented in Paletton, the menu is completely Russian.
Peculiarities:
- Checking the color scheme on the website page.
- Fine-tuning - saturation, brightness and contrast.
- Shows primary and secondary colors.
- It is possible to run randomly and select shades at random.
- Save as PNG, style sheet, palette or HTML.
- Customizing the palette for people with disabilities.
ColorScheme functionality overview
getColor
getColor is a nice tool for quickly finding color combinations.
Peculiarities:
- Adjust hue, saturation and brightness.
- Modern instrument design.
- Provides a choice of four Itten color combinations.
- Simple controls.
- It is possible to copy the shade number.
Decorating a circle in getColor
Common mistakes when designing rooms
Let's look at the most popular mistakes:
- using only white when decorating will make the room boring and dull, sterile from emotions and mood;
- Space zoning needs to be done carefully. The wrong choice of the shade of the partition or interior wall for zoning will spoil the appearance of the home;
- It is possible to follow modern fashion trends in decoration, but selectively. It's better not to follow trends that violate basic design rules;
- artificial and natural lighting will certainly affect the perception of colors;
- the shade of the floor color is selected after the overall creation of the interior, and not simultaneously;
- incorrect combination and redistribution of the color palette. First, the base is selected, and then auxiliary accent shades;
- illiterate combination of contrasting shades. If you overdo it with bright colors, you will get bad taste, a feeling of discomfort and imbalance;
- room design in one color. It will turn out sad. A few bright and catchy spots of a different shade will enliven the room and make it elegant.
Choosing the color of the walls of an apartment is an important task. Its decision must be taken responsibly. Otherwise, the interior will turn out to be uncomfortable for existence.
The combination of colors of furniture, walls, ceiling and floor in the bedroom interior
The bedroom is intended for relaxation and privacy of a person. The elements and colors of the final interior should create a pleasant, calm and cozy atmosphere.
The main color of the room is selected based on the concept chosen by the designer. Most often, bedrooms are made in a beige shade, with the addition of dark wood elements.
The walls of the room must be made in calm, preferably coffee tones. The floor is made of dark wood, which will go well with wooden inserts in furniture of the same color.
If we talk about a bedroom in bright colors, in this case there is even more variety. Most bright shades match each other both in furniture and decorative elements.
