DEV Community

Cover image for A colorful web designer
Julian Belmonte
Julian Belmonte

Posted on

A colorful web designer

If I ask you: What is your favorite color? For sure you will have an answer, and that answer has a special reason. We like a certain color for a reason, for what it generates, for the sensations it produces in us.

As children, we learned colors at school. We learned to differentiate colors through words and they constitute one of the main things to know from an early age. But, the color itself has life and is not only a word or something we see, color is also something we can feel, it's something that reflects ideas, emotions, and even helps us perceive our reality.

Color relates to philosophy, art, mathematics, psychology. Anyway, we could say that the color is everywhere.

Through color, a company can reflect its identity. Without the color, it would be very difficult to add identity or image to a brand. Without color, expressing an idea in a visual way would be an impossible task.

When we learn languages ​​such as HTML and CSS, at some point we realize that it is not enough to know all the theoretical aspects that constitute each language, it's also necessary to understand our design proposal, our intention when designing. Color is an essential element to consider when designing a website.
Web designers are experts with color management, they know how to identify colors that best represent an idea, a concept, they are experts in generating sensations through the visual.

This article aims to show the importance of color when developing a website. To do this, next we will do an exercise.

How many colors can you identify in this image?. Count them:

Alt Text

Now, I invite you to click on the link: https://htmlcolorcodes.com/ and try to find each color separately and save its hexadecimal code, like the next example:

Alt Text

Well, below, you can see the colors related to the image:

Alt Text

o you want to try again?

Now, try with the next image, how many colors can you identify?

Alt Text

Go to https://htmlcolorcodes.com/ and try to find all the colors you can, related to the image.

How many colors do you see? I will show you the colors related to the image at the end of the article.

Well, I created this exercise because it can be helpful to learn to observe and analyze better the things around us. This exercise helps us to get a better level of accuracy when designing and proposing the colors that our web projects will have.

Now, I want to share with you some curious facts about colors:

Many times we relate to the color green as a calm and peaceful color, and it represents certain aspects such as hope, health, and peace. When we are surrounded by nature, we feel at peace. We feel that our health is better in an environment of peace and tranquility. The green color also represents the commitment to care about the environment and the planet heart:

Alt Text

Yellow is a bright and warm color and reflects qualities such as optimism, clarity, and light:

Alt Text

The orange color is dynamic and radiant, and gives a friendly feeling:

Alt Text

Purple is a color that reflects creativity, as well as imagination and wisdom:

Alt Text

Gray sets the balance between white and black, giving an aspect of solemnity, neutrality, and calm. Black and white are often used together, transmitting a sense of seriousness like gray:

Alt Text

A website that I highly recommend you and that will surely serve as an inspiration base to you is http://colrd.com/.

This is a very nice website where you will find a lot of images. Below each image, you'll see its color palette.

Alt Text

Also, I want to recommend you the website http://brandcolors.net/ where you can find the colors used by the most successful companies and brands in the world. Pay close attention to the different colors that make up each brand:

Alt Text

From here, I want you to answer the following questions:

What colors will you use in your next web projects?

If you get hired to create a website, what colors will you use to reflect an idea or concept?

I think these questions are very important and represent a differentiating factor as a web developer.

Do you remember the image of exercise 2?

Alt Text

Here you have the answer:

Alt Text

Try it again. Go to https://htmlcolorcodes.com/ and try to find as many colors as you can, related to the next image:

Alt Text

How many colors can you identify?

Finally, I want you to remember these words:

Color is a language.
Color is emotion.
Color is life.

Learning to work with colors can take us one step further to be better web developers.

Top comments (0)