Our New Color Demo

We have launched a small demo site where you can try out how different color combinations affect you on a website. Here, we explain a bit more about its purpose and how it works.

Why a Color Demo at All?

Colors and their effects are something very individual and intuitive. Everyone associates different things with various colors—mostly subconsciously. While there are similar associations within certain cultures, everyone feels and sees colors a little differently.

Why is this a challenge for us as designers?

Well, on the one hand, many clients already bring a fairly advanced corporate identity when it comes to a project with us. Colors, shapes, and a specific language have already been established for a company. These aspects should, of course, be considered in a new design. However, there is still a lot of room for interpretation when implementing a corporate identity on a website. With the color demo, one can already experiment a bit and see what works and what doesn't.

On the other hand, we, too, are humans, and we associate colors on a very personal level. Sometimes a dialogue arises where one realizes: the other person connects entirely different feelings with a color. This dialogue is often tedious. Initially, not every red is just a red; it depends on the shades. And then, of course, on specific combinations of colors. Often, small changes are enough, and the feeling is entirely different. Putting this process into words is extremely difficult.

So far, we have managed by specifically asking in advance about websites or other designs that the client associates with positive or negative feelings. With some experience, one can already narrow down quite well how someone thinks, what they like or dislike. Although it is primarily about the target audience of the client and not their own feelings, the website should still appeal to the client and represent them well. Therefore, it is always exciting to present a design to a client for the first time.

To simplify this process and support the dialogue about colors, shapes, and ideas, we have released this color demo in its initial version. We will likely expand and improve it later, and we are very grateful for your feedback!

How Does the Color Demo Work?

On the website, you will find five starting colors (the Netjutant colors) in the upper left corner of the screen. They are:

• The primary color - the most prominent color next to the background color, which can be found in many places on the website (usually in larger areas).
• The secondary color - a color that is meant to support the primary color but can also introduce some tension.
• The accent color - for important but smaller elements of the website, such as buttons or notifications.
• The background color - the color that represents the standard page background, as well as
• The secondary background color - usually a color with only slight deviations from the primary background color. It is often used for large areas that should be clearly separated yet visually calm and unobtrusive.

By clicking on one of the five colors, you can adjust that color accordingly. There are no limits. You can also directly paste color values in various formats that you may have found on sites like coolors.co.

Because the page should look reasonably good with all selected color combinations, we have mostly refrained from coloring the headings in one of the colors. Where we have done so, it may happen that the contrast between the heading and its background becomes too small to meet the strict accessibility requirements of modern websites. In this case, we will display a small warning.

The other fonts are set to remain as readable as possible, regardless of whether the page has a dark or light background. Of course, in a real project, one can also play more with the font colors, as one knows in advance what color the background will be.

We have deliberately refrained from using photos. They bring their own color language and may not harmonize well with the chosen color combinations. However, a good designer can later embellish the website with color-coordinated images and avoid such clashes.

If you find a color combination that you like, you can either take a screenshot or click the button "Copy Colors to Clipboard." This will load the five color values into the clipboard of your device, and you can send them via email, WhatsApp, or other text messages.

Please note: Your combinations will be lost if you reload the page for any reason.

We Welcome Your Feedback

We would be very pleased if this tool could be useful not only for us and our clients but also for you and your clients. If you have any feedback, please feel free to contact us! You can reach us at kontakt@netjutant.de, by phone at +49 8685 30998-22, on LinkedIn, and on Instagram. We also appreciate it if you follow us there—this way, you will never miss similar actions and news again.