Color can increase brand recognition by up to 80%.
85% of Shoppers make purchases based on color.
The color red can increase heart rate.
As these facts show, color has power. For a website to have an impact it needs to have the perfect website color scheme. But picking the perfect color scheme for website usage is easier said than done.
The internet is full of confusing tutorials about color theory and numerous color picking tools that can be difficult to navigate. And for people learning HTML choosing and displaying a website color scheme can be tricky.
But it doesn’t have to be this way. Choosing a color scheme can be simple and easy. Here are some tips that make picking a website color scheme in HTML easy.
Picking a Website Color Scheme
One of the most important pars of creating a color scheme is understanding that certain colors look better together than others. So before anyone can understand how to pick and apply a color scheme. They first have to understand some basic Color theory.
For example, complementary colors are colors that are on the opposite end of the color wheel that when paired next to each other look bold. These are colors like yellow and purple, red and green and orange and blue.
There are also analogous colors which are close to each other on the color wheel. These colors don’t “pop” as much as complementary colors. Though they create a more calming effect.
Something that is just as important as knowing how colors look together is understanding how colors affect the audience.
Red is aggressive and energetic. It increases appetite so it is often used in advertising foods.
Pink is seen as romantic and feminine, so it is perfect for marketing to women and girls.
Orange is seen as aggressive. It is great for moving people to action. And for encouraging them to do things like subscribing and buying.
Purple is seen as regal and calming, it is often used in beauty products.
Blue creates a sense of trust and security and is used in banks.
While yellow represents youthfulness and optimism.
Black is seen as masculine sleek and powerful. It is often used to advertise luxury products.
Since picking a color pallet can be confusing there are color pallet generators like Paletton that help pick the perfect color scheme.
Color Names in HTML
Before anyone can apply color to specific HTML elements they must communicate the color to the computer in a language it can understand. This is done by converting color into numerical codes based on things like hue and saturation.
There are four ways of referring to HTML colors: Hexadecimal string notation, Red/Green/Blue functional notation (RGB) functional notation and Hue/Saturation/Luminosity (HSL) functional notation and keywords.
These are six-digit numbers where each digit represents the red, blue and green elements of colors. Every byte represents a digit from 00 to FF. Each color in a hex notation begins with a “#” followed by the HTML color codes.
For example “#FF5733” represents a completely opaque red color while a hex notation like “#000000” is the darkest shade of black.
Hex notation can be extremely difficult to understand luckily there are tools that make picking out hex color codes easy.
RGB Functional Notation
Red/Green/Blue (RGB) functional notation where color is represented by using red green and blue and giving each color a value between 0 and 225.
For example, bright blue can be represented rgb(0,0,225).
HSL Functional Notation
This HTML color code values color based on Hue/Saturation/Luminosity and assigns each element a value. The value of hue goes from 0-360, saturation goes from 0-100%, and Luminosity goes from 0% which is black to 100% which is white.
For example, bright red saturated red is represented by hsl(0, 100%, 50%).
This is the simplest HTML color code to understand because it uses words rather than numbers.
There are keywords for shades like black and white and for colors like (red, blue, and purple).
In HTML keywords are limited because not all colors have keywords. For very unique colors it usually easier to use HTML color codes like Hexadecimal notation.
Where and How Can Color Be Applied
Almost every element in HTML can have color applied to it. But there are very specific HTML elements like text and borders and background colors that are important for a website color scheme.
The first step is to choose the element and the HTML color code. Next, open the HTML document in the text editor and ensure that it has the HTML header. Then to get HTML background colors add a body element between the style tags like this
To change the background color add “background-color” to the body element and a then add an HTML color code. This will add HTML body colors to the color scheme of the website.
When completed the HTML document should apply color to the background of the web page.
The same process can also be applied to other HTML elements like text. By using the tag and adding a color attribute.
Color can also be added to many other elements to create the perfect website color scheme.
How To Do More With HTML
Choosing and applying a website color scheme is often one of the most valuable tools for attracting new users. But there are many other important elements needed for good web design and there are many great ways to learn to code.
For more information about web design and coding including some great tutorials check out our blog.