One of the most difficult aspects of designing a screen design is choosing a color scheme for the website.
To find a color combination that suits the theme and whose colors especially match and harmonize with each other. A color combination that is easy to read in texts and also clarifies the content structure and the visual hierarchy of the website.
Color Scheme Requirements – Color Selection Criteria
There are a few aspects to consider before frolicking wildly in the graphics program on the colors. Because not all over 16 million RGB colors are available, or are useful for the website project.
Corporate analysis and corporate design
First, one should deal with the company in more detail. Sure, you should be intense anyway, but also in terms of possible shades.
What does the company stand for, what values does it represent, what goals does it want to achieve? How does the company see itself, which attributes suit the company? Questions that should (anyway) be asked in a meaningful conception anyway. And whose answers are also helpful in the color selection.
And of course the question of corporate design specifications! These are not always recorded in writing in a design manual, but can also be in the form of already produced communication media. Which colors were used in the flyer, in the business cards, in the logo? Even that can be design and color specifications that you can / should comply. It must be clarified to what extent these colors are binding or clearly defined.
If there are no clearly defined color values, then the website design is the time to catch up.
Website goals and color psychology
What goals should the website achieve? Which effect should be generated? Which mood should be conveyed?
The answers are important to be able to select suitable colors. Because every color evokes associations in the viewer. This knowledge of the psychological effect of the colors are helpful, as well as the desired effects, the website should achieve.
Only then can color combinations be found and designed that fit the theme and the goals.
Colors achieve certain psychological effects.
To the upper point also necessarily the target group, thus the visitors / observers of the Website belongs. For the effect is created in them, they have certain associations that need to be controlled. Depending on age, gender, culture, etc., the color association may look different.
Since the target group analysis is also part of the website concept , you can build on it well and expand it with the color theme.
Which colors do the competitors use? Are there industry-specific shades that are used again and again?
And just as important: Are there certain shades that are never used?
Whether you then use industry-standard shades, is an individual project decision. On the one hand, this can strengthen the recognition / affiliation and the trust. On the other hand, it can increase the interchangeability and arbitrariness.
Together with the client’s corporate design, the desired goals and effects, it can then be decided whether to opt for the classic path like many competitors or consciously control color in contrast.
Usability and accessibility
It does not use the most beautiful color combination if it does not make sense to use it on a screen medium.
On the one hand, colors (as already described above) should evoke certain associations. On the other hand, but also facilitate the operation. Colors create orientation and give meaning to the elements. They thus support the visual hierarchy of the website and guide the viewer’s gaze through the content.
Since website content consists mainly of texts, readability is the deciding factor.
For example, it is not enough to have found a nice pastel-colored color scheme – but the light blue text on a pale yellow background is no longer legible.
The contrast between text color and background color determines the readability.
There is support to find a sufficient light-dark contrast so-called accessibility tools , with which one can check color combinations:
Check color combinations for accessibility guidelines using the Color Contrast Checker tool.
There are hurdles in the perception of color, such as the red-green visual weakness, which affects many. The color scheme should also take this into account and not create unnecessary hurdles.
Many useful information about accessibility can be found in the article Designing for Color Blindness .
Also, no extremely bright backgrounds should be present. Or two colors are superimposed, which correspond to the complementary contrast .
Rarely too many different shades are useful (exceptions also confirm the rule here). Visitors quickly get used to a color scheme on the website and then intuitively know which elements are designed and how. To overstrain this by too many color designs or even to irritate by changing color design is unfavorable and unnecessary.
Also with the color choice applies:
Less is more.
But with a little common sense you can achieve a lot (anyway in life, but also in the color choice):
Just look at the color design of the website soberly and analyze: Can you recognize all the elements well and read. What is the color hierarchy of the website, but for the content perception fade and purely on the optics limited. This results already well a first image for assessment.
Methods for coloring
Of course, there is not just one way for DEN to get to a color palette. Presumably every designer has his own method, which does not have to be the same for every project.
I myself do not always find colors for my website projects in the same way. This is partly due to the different starting conditions. Sometimes a color scheme is already strictly defined and only needs to be supplemented at certain points. Sometimes only initial ideas or wishes are available to the customer and sometimes you are completely free to choose.
In addition, I always like to “drive” and surprise by artistic-creative coincidence, what happens.
However, there are always some methods that can be helpful in finding a color scheme that is suitable for a website. I introduce you to some of them here:
1. Collect color inspirations
If you still do not know the color direction or are very uncertain, you will find enough inspiration – offline as well as online. From all possible sources color combinations can be extracted:
Nature / Offline Life / Photographs
The “true” life offers enough incentives for successful color schemes. Just go around the world with open minds. Alone nature offers so many great color combinations. In addition, in the cities the houses, architecture, facades, posters etc.
It can be summarized here almost under the term “photography”, because usually the colors of landscapes, cityscapes, etc. are obtained by digital repoduction and less locally.
Color combinations from the “real” life.
Even the diverse world of graphic design can deliver great color samples. Flyers, posters, logos, advertisements, album covers, interior design / interior design, product design etc.
Here, too, one has only to look well and examine such design products for their color.
Color inspirations from the wide world of graphic design.
Sure, it’s about designing websites, so it’s a good idea to analyze other websites and include their color schemes. It is not about a 1zu1 copy, but about suggestions.
Extracted color inspirations from websites.
Even further than the website design, you can look at the corporate designs of other companies. With which color values do they form their visual branding, not a few companies that have captured them in a corporate design style guide.
Color inspirations from brandings of other companies.
Color schemes websites
And how could it be different on the net: There are also websites that collect and present only color schemes. This too can be a first point of contact.
There are websites like Design Seeds that deliver the same color inspirations free home.
Other websites offering ready-made color inspirations:
Color matching tools
And there are plenty of color tools to find color combinations. These are so abundant that I present here only a selection:
Properties of color combinations
Often, suitable colors / color combinations are searched for specific properties and functions.
The following selection shows keywords / attributes and matching color combinations:
Activity / dynamics: red, orange, yellow (together with blue as a contrast the effect of the mentioned colors can be increased)
Honesty: white, blue, green
Relaxation: blue, white, green
Functionality / Objectivity: White, Gray, Black, Blue
Hope: green, blue, white
Wisdom / wisdom: white, blue, silver
Performance: Blue, Gold, Red
Luxury: Gold, Purple, Black, Gray, Silver
Masculinity: Blue, Black, Brown
Modernity: white, black, red
News: White, red, yellow
Originality: silver, orange, yellow
Speed: silver, red, yellow
Safety: green, blue, white
Sympathy: blue, green, white
Confidence: blue, green, white
Femininity: Violet, white
Reliability: blue, green, brown
But also remember that it always depends on the individual case and sometimes just an alternative selection can be more interesting.
2. Select colors
If you have found a palette that could correspond to your own ideas, it is important to continue working. Rarely does an external color combination or your own design also suit a website implementation equally well.
On the contrary:
In most cases, some corrective actions are necessary to get a color palette suitable for the job.
As a basis, a palette of five to six shades is helpful. Sometimes only three are enough to create enough contrasts and accents (the principle could be enough to use two shades if you work with other design tools, which is a rare exception.) An example would be black and white to design).
Six shades give you a variety of design options. After all, elements such as headers, individual content areas, the surrounding block, footer, as well as interaction elements such as buttons, navigation and links, as well as texts, are to be designed.
This can also mean that the range must be correspondingly larger, especially for content-rich websites that require more design variations.
3. Note color properties
One color can be divided into three properties:
The hue, the brightness and the saturation.
Each color can be categorized by these three properties, and each property can be changed independently of the others.
These three color properties are interesting because they allow the individual shades to be adjusted. Because, as described above, is not equal to the first designed palette suitable. This is where the properties come into play, where you can “turn” to match the individual colors to each other.
The three properties at a glance:
The color tone
The hue is the color characteristic denoted by words such as blue, yellow, green, etc.
It is the qualitative difference to other bright colors and to achromatic colors. For slight differences, colors have the same name. If the color changes more strongly, the color name also changes.
All colors are arranged on a color wheel. The color tone is specified as the position on the standard color wheel:
The color wheel with exemplary color tone selection.
For a screen design, it is often enough to select two or three color shades and then add gradations. But then the other color properties are suitable.
The saturation of a color is also called chroma and often circumscribed in terms such as cloudy, dull, strong or clear. One can understand something like the intensity or luminosity of a color underneath.
The more colorful or pure a color is, the more saturated it is. The lower the saturation of a color, the cloudier and less noticeable it is perceived.
The saturation is something like the relationship between the color and a gray part. The more gray there is, the dimmer the color appears.
Different shades and with different saturations.
From top to bottom, the saturation decreases.
The brightness of a color means something like light or dark. By adding white or black, the brightness value can be changed.
Colors can have the same color, but have different brightness:
Different shades with brightness gradations.
Understanding the three color properties is important to be able to implement the following points.
Digital color values - the HSB color model
In graphics programs such as Adobe Photoshop, color values can be defined using different color systems.
In addition to the familiar color models such as RGB and CMYK, there is also the option to individually define the three color properties hue, brightness and saturation (the so-called HSB color model ):
H for Hue (hue):
Shades are specified according to the color wheel at an angle between 0 ° and 359 °.
The setting of the hue.
S for saturation:
Percentages between 0% and 100%.
100% corresponds to a bright color. At 0% a gray tone appears.
The setting of saturation.
B for Brightness:
Percentages between 0% and 100%.
100% corresponds to a light shade. At 0%, the tone is black.
The adjustment of hue, saturation and brightness.
Brilliant, saturated colors are achieved when the saturation (S) and brightness (B) are at 100%.
If the saturation is 0%, it is a dull, gray hue (or black or white, depending on hue and brightness).
If the brightness is 0%, the color is black.
The three color properties and their knowledge are the basis for observing the following aspects:
4. Create contrasts
In my web design courses, which I manage and supervise, I regularly see beautiful color palettes that look aesthetically pleasing in their own right. Often, however, you have a “problem”: the contrasts are not big enough. Colors on websites should not only look beautiful, but are mainly used to differentiate content-related elements from each other. For example, a button on a background surface or text on a solid background.
It is about creating sufficient contrasts – between the shades themselves and between the brightnesses.
First, it should not be too many strong shades.With different brightness levels and saturation levels of the hues, exciting contrasts can be achieved:
Variants with different brightnesses and saturations.
Please note: Not every color is used the same amount! The subtle – and usually bright (he) en colors are used extensively. On the other hand, the striking, luminous, saturated hues tend to be rarer and to a lesser extent.
5. Design text colors
It is also important to create sufficient light-dark contrast between the text colors and the background colors. Readability is the be-all and end-all of the design.
That means to see whether from the existing palette a dark color (with a light background) exists as a text color. Often, not just one is enough, as more text colors with high contrast are needed for headlines and / or link texts.
If there are not sufficient matching text colors, these must be supplemented or the chosen color tones adjusted. For continuous texts mostly dark gray tones are suitable. Pure black rather not, because black on white on screens is too rich in contrast. At least for continuous texts, it is advisable to add a dark gray tone (or, if the background is not pure white, a deep black as text color # 000 ).
With the tool Accessible color palette builder the color combinations can be checked for accessibility .
In the case of the upper hues, there would be just six suitable text color-background color combinations. The turquoise and red-pink hue would therefore not be suitable as a text color – regardless of their aesthetic impact. With the very dark gray tone there would be twelve possible combinations.
6. Insert color scheme
Whether a color palette has succeeded can actually only be judged when it is used on the website. It may look just as appealing in the first place, but its suitability can only be assessed in practice.
So it can happen that color properties have to be adjusted again. Or even new shades must come to it, because not all elements with the selected hues can be covered.
The color combinations in a screen design.
That looks pretty good, the color combinations make a pleasant contrast. On the one hand between light and dark tones and also between saturated and unsaturated colors, as well as the two striking shades turquoise and pink-red.
But, as seen above, according to accessibility rules, the tones would only be of limited suitability because too many would fall through the Contrast Checker . To do this, the brighter hues would need to be dimmed to be eligible for a text color-background color combination:
The color combinations in a screendesign according to accessibility guidelines.
Quite nice to look at, not quite as radiant as the combination before.
7. Design variations
Depending on the project requirement and your own working method, it may be helpful to create / try out several color variants. Or. to implement different screen design variations with the selected shades.
In comparison, then different (color) designs, which can be compared to each other well, possibly also discuss with customers and discuss.
Another screen design variant with the same color shades.
Practical example screen design
Below, I’ve incorporated different color combinations into the screen design to show how well different designs can be implemented:
Analog color scheme
If you choose colors that lie next to each other in the color wheel, these combinations usually work harmoniously. How strictly “side by side” is defined is a matter of interpretation.
These color combinations are called analogue color scheme. If a starting color is available, for example due to the customer’s corporate design specifications, it is easy to add other colors that are close by in the color circle in order to arrive at an appealing combination:
Color scheme Bunt-Unbunt
One of the easiest and most effective ways to get a color pick is the mix of colorful and achromatic colors. These combinations are usually visually appealing and rich in contrast.
A – mostly powerful – color is mixed with achromatic tones. These are then grayscale and / or black and white. There are quite a few websites that are built on such a combination.
And the change of the main color shows how quickly another screen design variant can be created:
Color scheme with the complementary contrast
Complementary colors face each other in the color wheel – such as red and green. This makes it possible to implement a very high-contrast design, which is correspondingly distinctive / striking.
You just have to be careful that these color combinations are only next to each other and not used on each other. So red text on a green background does not work. Next to each other, the color tones increase enormously.
If one of the two complementary colors is only discreetly used, eg for highlights such as buttons and links, then the screen design can be pleasantly rich in contrast:
Color scheme trend pastel
Pastel colors are bright, bright colors that blend well with each other. They create a bright and friendly mood, but can also be bland and boring, since the (light-dark) contrast is low.
Color scheme trend color blue
In my article on the Hex Colors of the Year , I’ve named a blue tone as the trend color, blue, which is used on every second page. This blue shade is, however, strong, striking, almost luminous. He takes less back, as most blues make, but comes across striking, confident.
This shade of blue is often used by agencies or on portfolio pages and also likes to be very large. Then you do not need any more colorful shades or multicolored pictures as a supplement:
The color scheme of a website is a very important design element. It decisively influences the perception and usability of the website. Therefore, knowledge of how to get good color combinations is very important.
With this article I have shown some possibilities and ways to create a harmonious color combination. Rarely (actually as good as never) will be the first attempt to succeed. Adjust the color combinations until you feel like they are harmonious and the braces are sufficient for legibility.
How do you get to your color combinations? Do you make them completely free or from which sources do you get inspired?