HTML : Using CSS to assign color

Introduction

Choosing the right Colors is as important as choosing the correct fonts. The right Colors can make your site feel spooky, professional or even whimsical. Colors, like fonts, help your site convey different feels depending upon your choices. But choosing Colors seemingly at random can make your website’s pages appear unrelated to one another and unprofessional. Color is important; ignore it and your site suffers.

Choosing a palette

Colors are specified using RGB, hexadecimal or name values. Much like optimising images, a few years ago a tutorial like this would have opened with a discussion admonishing you to choose web-safe Colors. It used to be that you could only count on users having 256 Colors. Actually, it was worse than that. You could only rely on Netscape and Internet Explorer consistently displaying 216 different Colors. If you wanted your site’s Colors to look the same across browsers, you limited yourself to those Web-safe Colors.

On-line, some people still persist with the myth that you must choose Web-safe Colors. It is a myth. You can count on users having thousands, if not millions, of Colors. No less than 74 per cent of all Web users have 32-bit Color. Less than 1 per cent has 256 Colors. Sixteen bits provide 65,536 Color choices while 32 bits provide 16,777,216 Color choices – plenty of Colors to choose from. Media hype aside, even Brazilian favelas have high-speed Internet access and monitors that can display thousands of Colors.

Although ample Color choice is available, there are two important design considerations when choosing your site’s Colors. First, just because you can use thousands of Colors doesn’t mean you should. Some Colors look good together and some don’t. Second, many users’ monitors aren’t calibrated correctly and so might not display subtle Color differences correctly. You might waste hours choosing a subtle, artistic, Color combination that doesn’t display well for the majority of your site’s users. You should aim for contrast rather than subtle Color differences.

 

 

Specifying a Color in four different ways

You specify an element’s Color one of four different ways. If you pick one of the 216 Web-safe Colors, you can usually specify the Color’s name.

h1{color: cornflowerblue;}

You can also specify a Color using its hexadecimal value. The value is case-sensitive, so be careful to use the correct case.

h1{color: #6495ED}

Or you can specify a Color’s RGB value. RGB stands for red, green, blue, and the number signifies the percentage of red, green and blue in a Color. There are two ways to specify Color using RGB. You can specify the percentage of red, green and blue.

h1 {color: rgb(39%,58%,93%);}

Or you can specify the RGB Color values directly.

h1 {color: rgb(100,149,237);}

Almost nobody specifies a Color using its RGB percentage. However, the name, hexadecimal value or RGB values are all commonly used.

Setting background Color

Any block-level element may have a background Color. CSS makes background Colors possible through the background Color declaration. An element whose background is declared, when displayed in a Web browser has the specified Color as its background Color.

An element’s background Color might appear to be inherited, but it’s not. Think about it, elements with no background Color specified have a transparent background. You are seeing the back element’s background (assuming it had a background Color specified).