How To Create Website Color Schemes Users Will Remember
Sometimes passed over, seen of diminished importance or treated with less attention than it ought to be, the color scheme of a website should nevertheless be of high priority. In designing a website, color schemes are essential for establishing an emotional connection with the readers.
Color Combination Principles
These principles are guidelines on how to combine colors, following the basic rules of visual representation.
Why do these rules exist? Because we seem to perceive some color combinations as pleasant, for biological (due to cells in the eye that identify colors), and psychological (due to our own experiences and the cultural symbolism) reasons.
So, what are the rules underlying fundamental color combinations?
Principle of Complementarity
It refers to focusing on complementary colors, that is on colors directly opposed to each other in the color spectrum. One note though… color complementation should be carefully tackled, as inappropriate use of it will lead to inappropriate color schemes (see the recommendation to avoid complementation in text color versus background color).
Principle of Contrast
This process takes advantage of contrasting colors, to reduce eyestrain and make the webpages pleasant to explore.
Principle of Vibrancy
With this color combination principle, we begin plunging into the immense realm of color psychology. More vibrant colors are intended to arise strong emotions into the readers, while less vibrant colors are meant to relax the readers, with the aim at focusing their energy on something else or of higher importance.
See, for instance:
Communication with a website’s users is highly important. You want to get them understand a particular message or do a specific action. Therefore, colors should not be the “star” of your website, rather they should serve as subtle guidance towards the diverse parts of your message spread on the page. Colors should just connect the dots among these elements, and offer appropriate context for transmitting a message.
Color Combination Models
From these 3 color combination principles lead to different combination models, all useful as an overview of what can be done in terms of color combos.
First, you must know that these models fall into 2 distinct categories:
- The additive color models
In this category of models, the pervasive rule is that, the more light one adds to the color, the brighter and lighter that color becomes. It defines the RGB color system (red, green, blue) and is specific to the digital medium.
- The subtractive color models
In this second category of models, color is obtained by the subtraction of light. This category is specific to arts, i.e. painting, vastly differing from the digital color system.
Let’s focus on the digital color system, as this is the one that concerns us.
There are 6 main models, and 6 starting points to consider before rolling up your sleeves and getting to work
Monochrome models refer to variants of a single color, which differ in terms of brightness, shades and saturation.
Analogous models refer to any 3 colors placed next to one another, in the color spectrum. They create harmony and a very cohesive visual representation.
Complementary models combine one color with its opposite in the color wheel.
Triadic Color Scheme
Triadic models combine colors placed at the 3 corners of an equilateral triangle drawn into the color spectrum.
Split-complementary models combine colors placed at the 3 corners of a triangle drawn into the color wheel. This triangle unifies one color with its opposite (complementary) color, plus the two colors adjacent to this opposite.
This rectangle/tetradic model combines 2 colors with their opposite colors in the color wheel. The shape that defines the combination is a rectangle, hence the name of this model.
The square model combines 2 colors with their opposites in the color wheel, like in the tetradic model, with one difference: the 2 colors and their opposites are distributed evenly in the color wheel, and unified, give the form of a square.
Keep in mind that, whichever color model you choose, there are some best practices to consider. Here are the recommendations:
- The 60-30-10 rule (60% is the dominant color, 30% is the secondary color, 10% is the accent color). If we take the example of the Mesmerize theme, the customizer includes a dedicated section where you define colors. You have options to select the primary color, the secondary color, the third (accent) color, and make tweak and refines with additional hues.
- Design in grayscale first. This is the best way to check for possible issues and to quickly spot any disruption in the website layout. Hence, you can check the design against the rule of continuity and make changes to ensure a consistent experience on the website.
You can try your hand at generating color schemes with Paletton, or this color scheme generator. Also, you can combine colors according to each of the color models, as simple as that.
So, experiment with any of the above color models, practice and perfect, until the colors balance triggers emotions into your readers.
Emotions Triggered by a Good Color Scheme
Now that you master the techniques of color combinations, it is time to consider the psychological implications of using some color schemes, instead of others. You already control the “how” and the “what”, but let’s dive deeper, to discover the “why” behind your choices.
This is where the Muller formula comes in. It states that certain color schemes are pleasant to the eyes and subject to favourable perceptions, while other color schemes are “ugly” and negatively perceived by most people. How is this possible? The formula says that if a color scheme follows the natural brightness of colors, that combination will be perceived as pleasant. If, on the contrary, a color scheme doesn’t follow the natural brightness of colors, that combination won’t be liked by people.
Therefore, you should be aware of what works and what doesn’t, in terms of color combinations.
On top of that, your selection depends on the message you want to convey to your users, its tone and intended impact.
Below is a basic breakdown of color psychology. We list some simple colors that are suited for certain messages, with the corresponding meanings and emotions they create (keep in mind that emotions are set off by both personal experience and cultural perceptions/the symbolism of colors):
- Blue – soothing, calming; security, trust and communication.
Blue color schemes in websites:
- Green – nature, natural, freshness, growth, balance, peace.
Green color combination in websites:
- Yellow – brightness, cheerfulness, energy and optimism.
- Orange – enthusiasm, passion, energy and joy; vitality, fund and abundance.
- Violet – spiritual awareness & contemplation; also, power of introspection.
- Pink – femininity, soothing, warmth.
- Red – a simple, yet powerful color: luxury and abundance, strength, warmth, increased velocity.
- Brown – reliability, support, earthiness.
- Black – elegance, mystery, power and authority; it can also be associated with the unknown.
- White – cleanness, purity, hygiene, simplicity and sophistication.
Create Your Own Color Schemes
Armed with good knowledge of the colors theory, you can further explore the magic of combining colors, test with different emotional implications, put color schemes at work for you.
The color combination standards make it easier to create your own color combination and limit the blunders in your color scheme creation.
There are tools that help you combine colors in beautiful ways, unleashing your creative powers:
Khroma comes with a wide array of colors, that represent the basic elements to start with. Then, it allows you to make a selection of no less than 50 colors that will feed a color generator. Based on a customized algorithm, these colors will be mixed and arranged to result in viable color schemes.
Here is what the trained color generator suggested in one session:
Colormind, like Khroma, provides a color generator tool. Its color generator uses deep learning, as it can learn new color schemes from photos, movies and art.
Apart from that, you can define the colors for your own template, and Colormind will adjust their hues, shades and brightness to look fine.
Here is the color generator in action:
This tool lets you start from a color, and adjust luminosity, saturation and hue until you get the perfect version of that color.
Here is the tool at play:
Colorme is another great tool for finding the perfect version of one color. It is similar to the previous tool, but it includes additional parameters you can adjust. So, for instance, in the RGB system, you select the amount of red, green and blue that the final color will contain, and preview the results.
Here is an example:
A tool that you cannot help loving. It is interactive, and thus puts your skills to test, for some color models (analogous, triadic, tetradic). For any selection of you, the tool will give you an assessment of the color combination quality (it ranges from ”poor” to “very good”). This way, you will be able to identify the color combination method you are more skilled at, and base your color scheme creation upon this data.
Below is a screenshot of Color.Method in action:
Professional-Looking Color Schemes
Once the perfect fit found, all that remains to be done is check it against professional standards.
But what does professional mean, in fact?
Let’s say “professional” can be applied to all kinds of niches and business types. It refers to the compliance with the quality standards of web design. It includes seriousness about the subject, attention to every bit of detail, as well as the care and personality put to work in adjusting those details.
There’s no general recipe for professionalism in designing website color schemes. If we talk about following your intuition, it’s too elusive to guarantee compliance with the quality standards.
Luckily, there are some guidelines that will help you combine colors professionally and limit the risk of making inappropriate selections.
As we’ve already said, for a color scheme to be perceived as pleasant to the eye, it should follow the natural brightness of colors. However, it might not always be that easy to determine which is the “natural” color brightness. In these cases, it is safe to separate colors with some black, white or grey. As a result, you avoid color clashing and some mistakes you might make as a beginner at configuring color schemes.
There are some criteria against which to check how professional the selected theme looks:
- First, pick up to 5 different colors that will play their role in your color scheme
- Second, set the limits up to which colors can vary in saturation, brightness and shades
- Third, test how well the colors variations work against white and black.
- Fourth, stay safe by adding black, grey or white in between colors that otherwise clash.
A simple, yet powerful way of enhancing the visual expression of your website is to add both colors and images. In this case, how do you make image colors and simple colors match? One can either adapt the image to the overall color scheme or adapt the color scheme to the images. Maybe the latter is simpler to put in practice and increases the chances for the visual representation to be successful.
Any of the above guidelines is intended to help website owners achieve the level of professionalism that makes possible a real connection with the readers. Each of them is a starting point in choosing color schemes, from a technical point of view. Build on top of that by following your guts and enjoy the results!
Wrapping up, colors and color combinations belong to the emotional side of communicating with the website readers. Hence, their elusive nature when it comes to drawing a plan and creating a color scheme. There are, nevertheless, techniques and theories that help systematize the process of combing colors. By following them, error is minified, and success can thrive in an excellent color scheme. So, trust your quality standards, and you will see them reflected in YOUR OWN excellent color scheme for YOUR OWN website.