Color Selection Techniques For Websites

Web designers often use hit and trial methods to get beautiful colors for their websites. Understanding color theories and its techniques will help you to build your website faster and make it look more professional. I this post I will am writing all about creating beautiful and professional looking colors.

Before you continue with this article make sure you read my article on RGB colors.

Color Models – RGB vs HSL

A color model is a mathematical representation of a color.

RGB is a color model in which every color is represented in terms of intensity of red, green and blue colors. Similarly we have an another color model called as HSL, in which every color is represented in terms of hue, saturation and lightness. Browsers(or computers) understand colors in terms of RGB model therefore after we select a HSL color we need to retrieve its RGB value to use it in browser.

HSL Color Picker is a online tool which allows you to pick colors in terms of HSL and then it returns the RGB value of that color.

Why Are We Learning HSL?

Its difficult to understand color selection techniques using RGB model. Whereas HSL makes it easy to understand color selection techniques. Therefore in this post I will be explaining all theories and techniques in terms of HSL.

As computers process RGB colors, similarly humans process colors in terms of HSL.

Color Wheel, Hue, Saturation and Lightness

Before getting into techniques let’s understand these terms:

Color Wheel
A color wheel is a circle containing all primary colors(red, green and blue), some secondary colors(colors produced mixing primary colors) and complementary colors(pair of colors when combined with right proportions produce black and white color).

A color in color wheel is represented in degree starting from 0^o to 360^o.

Hue
Hue is simply any color picked up from the color wheel.

Saturation
Saturation is the percentage of difference between a color and gray.

Lightness
Lightness is the amount of light in a color. If there is no light or 0% light then the color becomes black and if there is 100% light then the color becomes white. Therefore 50% lightness gives us the original color.

HSL Color
A HSL color is a hue with its saturation and lightness.

HSL Red Color Example
To get pure red color in HSL color model the hue need to be 0⁰, saturation need to be 100% and lightness need to be 50%.

Creating a Color Scheme

A color scheme is a selection of 4-5 HSL colors for your website theme. These colors can be used in buttons, background etc. But don’t use these selected colors in text, we will see text color selection later.

Before creating a color scheme we have to choose a base color first. Choose a base color that suits your brand or mood of your website.

Color Moods

1. Red: Red color represents heat, passion and excitement.
2. Orange: Orange color represents warmth and vitality.
3. Yellow: Yellow color represents optimism and creativity.
4. Green: Green represents serenity and health.
5. Blue: Blue represents security, truth and stability.
6. Purple: Purple represents spirituality, intelligence and wealth.
7. Pink: Pink represents fun and excitement.
8. Brown: Brown represents durability and class.
9. Black: Black represents power and drama.
10. White: white represents simplicity and cleanliness

Once you have selected base color now its time to select 4 other colors based on the base color.

There are three popular techniques to select colors based on the base color: monochromatic, analogous and complementary.

Monochromatic
In monochromatic method the hue of other four colors is same as the hue of base color. They five differ by saturation and lightness.

The middle color is the base color.

Analogous
In analogous method we use hue that is next to each other in the color wheel i.e., hue increases and decreases adjacently. Saturation and lightness also changes.

Here also the middle color is the base color.

Complementary
In complementary method we use two hues that are opposite to each other in the color wheel.
The saturation and lightness also changes.

The middle color is the base color.

In all these techniques you can play around with the saturation and techniques to get more beautiful and matching colors for the scheme. But follow the hue rules.

There are many other methods to select color scheme but these are the popular and most used methods.

Font Color Selection Technique

Selection color for text is very simple. Text color is selected based on its background. The text color and background color much have very high contrast(difference between hue, saturation and lightness).

Black and white are of very high contrast therefore they are used as text color and background color respectively.

Warm and Cool Colors

Warm and Cool colors can be used to create depth effect. Warn colors should be used in the texts and cool colors in the background because warm colors are much closer to screen then cool colors.

You can find cool and warm colors from color wheel:

Paletton Color Schema Builder

Now you have enough knowledge on color selection techniques. You can also use Paletton Color Schema Builder online tool to create color schemas for your websites.

Conclusion

I covered all techniques I use to make color schemas for my website look professional and awesome. I will be adding more points in future to update this article. Thanks for reading.