Web Design #3 - Colors

Choosing a Color

Just like text, color is one of the most important parts of what makes an excellent web design. Its role is to get attention, convey meaning, tell a story, and most importantly, create memorable user experiences. Choosing what color to use on a website takes very careful consideration and planning because it can influence how a user interprets when seeing the wbebsite as a whole. When used correctly, colors can become a very powerful tool in getting positive reactions from users by stirring emotions and guiding them to take action.

The first thing to do when choosing colors for our website is that they need to have a main color that matches their personality. Depending on the color we choose, the website can express various kinds of atmosphere:

• Red draws a lot of attention, and symbolizes power, passion, and excitement.

• Orange is less aggressive, and conveys happiness, cheerfulness, and creativity.

• Yellow means joy, brightness, and intelligence.

• Greens represents harmony, nature, growth, and health.

• Blue is associated with peace, trustworthiness, and professionalism.

• Purple conveys wealth, wisdom, and magic.

• Pink represents romance, care, and affection.

• Brown is associated with nature, durability and comfort.

• Black symbolizes power, elegance and minimalism, but also grief and sorrow.

When choosing a color, it is recommended to use online color tools instead of the standard CSS named colors.

Color System

For most cases, we need at least two types of color in our color palette: a main color and a grey color. In this case, the term 'grey' does not necessarily mean an actual grey color. It just means choosing a dark color that supports the main color. With more expierience, we may add more colors, also known as accent colors, to diversify our website.

When and How to Use Colors

We place our main colors in order to draw attention to the most important elements on the page while we use grey and accent colors to make other separate components or sections stand out. Using images and illustrations along with colors can make the website even more interesting.

Colors and Typography

The capability of being able to change text colors gives us more options than we realize. Especially on dark colored backgrounds, we can use a tint effect to match both colors. At the same time, texts should usually not be completely black, but rather, more light colored to grab more attention. Setting a contrast ratio between background and text color is very important (4.5:1 for normal text and 3:1 for large text).

Useful Tools

• Open color https://yeun.github.io/open-color/
• tailwindcss https://tailwindcss.com/
• Flat UI Colors https://flatuicolors.com/
• palleton https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• coolors https://coolors.co/
• Tint & Shade Generator https://maketintsandshades.com/