Web Color Basics--tutorial.jcwcn.com

Now let me introduce you to the basics of color also known as colour. Why you ask because most web designers want to know how to add color to their web page or their entire site. Now in HTML and XHTML you have two options for displaying color, which include named colors and hexadecimal codes. And in CSS, you have five options for displaying color, which include the named colors, along with the hexadecimal codes or you can use the functional RGB notation, which consists of two color value types, which are made up of a triplet of integers that are called percentage notation and integer-triplet notation. And last but not least, you can use the shorthand notation method, which was designed for CSS only. You should realize though that not every color can be represented by the shorthand notation method, I know it sucks.

The other options of displaying color that I mentioned earlier for CSS includes the functional RGB notation method and its two color value types as well as the shorthand notation method. Will still work with HTML and XHTML color type attributes, but sometimes the browsers will misinterpret the color values or not display them at all, so its best to use the value types with their recommended technologies. Also, which DOCTYPE you choose for your web page will affect how color is represented in your browser.

Now in CSS, color is more dominate then it is in HTML or XHTML. In CSS when you use the functional RGB notation method, you will have a choice of using two types of number values, which are called integers, which are also known as whole numbers like 2, 14 and so on, integers are also known as reals, which is short for real numbers or fractional numbers. I will explain more about the functional RGB notation method later on in this chapter.

First let me explain the most common method for displaying color, which is the hexadecimal color notation, which is also known as the hex triplets or simply hex. Now hexadecimal stands for a base of 16, which basically means that there are sixteen symbols that range from 0-9 and a-f. So to give you a better understanding of what I mean, the letter a, for example, will represent the number 10 and the letter b will represent the number 11 and so on.

Now in order to display a color using hexadecimal notation we will need to use the hash sign (#), which is required, followed by the six digit hexadecimal number that represents the red, green, and blue (RGB) components of the color. What I mean is that the first two digits will represent the color red, and the next two digits will represent the color green, and the last two digits will represent the color blue.

So our color value should follow the following formula as in the following example, #RRGGBB. Now both RR's represent red, and both GG's represent green, and both BB's stand for blue. Also, a good thing to know is that there are no spaces, commas, or other types of spacers that come between the three pairs of numbers and letters. Also, another thing to remember is that 24-bit color is represented in this format.

Now in order to display the number 1 as a hexadecimal value you will have to code it in the following form 01. So if you want to display the number 9 as a hexadecimal value, you will do so as 09 and if you want to display the number 10 as a hexadecimal value, you will do so by coding in 0a and the number 11 as 0b all the way to 15, which will be displayed as 0f. Now when you get to number 16 you will display it as 10 in hexadecimal form and the number 26 will be displayed as 1a in hexadecimal form and so on all the way up to the number 255, which will be displayed as ff in hexadecimal form. Later on in this chapter, I will include a chart showing each number up to 255 next to its hexadecimal equivalent to give you a better understanding of what I'm talking about.

One thing that you should realize is that hexadecimal numbers can range from 00 all the way to ff representing the numbers 0-255. You should also know that each three RGB colors can have values that can range from 0 to 255 with a possibility of 256 values each, which means that there are 16,777,216 possible color combinations.

Now in the example below I will use the tag and its color attribute to show you how to display color. One thing you should remember is that the tag and its color attribute have been deprecated in favor of CSS, which I will explain later on so take this as a history lesson.

Now let me show you how to code in a hexadecimal value.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> I'm a hexadecimal color value </body> </html>

Here is how the above code should be displayed in your browser.

I'm a hexadecimal color value

Now that you know how to code hexadecimal color values, I will now show you how to code in hexadecimal numbers that are made up of three matched pairs of numbers or letters. What I mean is that when a hexadecimal color value has three matched pairs of numbers or letters, for example, #aa0022 you can use the shorthand notation color value, which in this case will be #a02. So basically, all you have to do is use one number or letter from each double value for your shorthand notations color value. One thing you should know is that not every color can be represented by the shorthand notation method. The shorthand notation method was designed for CSS and will only work with CSS style sheets so I will show you how to code it in with CSS using the inline style method. In order to use CSS inline styles we will need to add the style attribute to the tag, we will also need the CSS color property. I will explain more about the style attribute in a future tutorial.

Now let me show you how to code in a shorthand hexadecimal value.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> #c13 is short for the value #cc1133 </body> </html>

Here is how the above code should be displayed in your browser.

#c13 is short for the value #cc1133

Now let me explain to you in more detail about the two color value types that use functional RGB notation that I mentioned earlier, which are called percentage notation and integer-triplet notation. Before I get into the two different kinds of RGB color values let me just say this. Is that each value follows the same format, which starts with the keyword name rgb followed by the left parenthesis ( followed by a comma separated list, which is made up of three integer values or three percentage values followed by the right parenthesis ). As with the hexadecimal notation the first set of numbers will represent red, the second will represent green and the last blue.

First let me explain the percentage notation, which has values that can range from 0%-100%, which represents the numbers or integers or whatever name you prefer to call them from 0-255 in which 0% is equal to the number 0 and 100% is equal to 255.

Now the beauty of using percentages is that you can declare percentages as real numbers also known as fractional numbers, which means that you can give any color a value of 14.8% red, 81.6% green and 85.2% blue, for example. But a user agent also known as a browser that ignores the decimal points, which some do, will normally round the value to the nearest integer, which will change the values that I stated earlier in the example to 15% red, 82% green and 85% blue.

Now in percentage notation when you declare a value out of its range it will be moved to the nearest default ranges edge, which will either be 0% if it is less than or 100%, if it's greater than. An example of this is when you declare a value of 2014%, the value will be moved to 100% and if you declare a value at -900% the value will be moved to 0%.

Now let me show you how to code in the RGB percentage notation value the CSS inline style way using the style attribute with the tag in the example below.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> RGB percentage notation color value </body> </html>

Here is how the above code should be displayed in your browser.

RGB percentage notation color value

Now let me show you what's up with the RGB integer-triplet notation, which instead of using the percentage values of 0%-100% we will be using the integer values, which are also known as whole numbers that will have the range of 0-255. One thing you should know is that only whole numbers are allowed when using the integer-triplet notation.

Now just like in percentage notation in integer-triplet notation when you declare a value out of its range it will be moved to the nearest default ranges edge, which will either be 0 if it is less than or 255 if it's greater than. An example of this is when you declare a value of 800, the value will be moved to 255 and if you declare a value of -9000, the value will be moved to 0.

Just like the RGB percentage notation method the integer-triplet notation method is coded almost the same way except for the values, which are in integer form instead of being in the percentage form, as I will show you in the example below using the CSS inline style technique.

Again, I will be using the tag with the style attribute when demonstrating the RGB integer-triplet notation in the example below.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> RGB integer-triplet notation color value </body> </html>

Here is how the above code should be displayed in your browser.

RGB integer-triplet notation color value

Both percentage notation and integer-triplet notation are allowed to have negative values, for example, -81% or -81, but as with fractional numbers, which are found in the percentage notation. Some browsers might ignore the negative values and will round the value to 0% or 0 depending on which notation value you are using.

Now I'm going to show you how to code in the negative values below using CSS.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> RGB percentage notation with a negative value RGB integer-triplet notation with a negative value </body> </html>

Here is how the above code should be displayed in your browser.

RGB percentage notation with a negative value
RGB integer-triplet notation with a negative value

Also, both percentage notation and integer-triplet notation values are allowed to have white space around their numerical values, which will not affect the way the color will be displayed. I will show you what I mean in the example below.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> color value without white space color value with white space </body> </html>

Here is how the above code should be displayed in your browser.

color value without white space
color value with white space

Now let me explain to you the 17 standard predefined color name values also known as color keywords, which include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. The color names are case-insensitive. The color names where designed for HTML, XHTML and CSS 2.1. There are many more color names for CSS3 but they are not standard for HTML, XHTML and CSS 2.1, but I'll put you up on game about the rest of the colored name values in a future tutorial. Now colored names are not the best way to display color, there are more exact ways to specify colors in CSS, which I have already explained earlier in this tutorial.

Now let me explain in more detail about the color names but more specifically the color gray, which can be spelled with an 'e' as in grey but Internet Explorer (IE) will not recognize the color name grey spelled with an 'e', it will only recognize the color name gray spelled with an 'a' just to let you know.

Now I will show you how to code in a standard predefined color name with the tag and its color attribute.

<html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> This is a standard color name </body> </html>

Here is how the above code should be displayed in your browser.

This is a standard color name

Here is the list of the 17 standard predefined color name values in the table below along with their alternative codes and values.

Color	Percentage	Integer	Hexadecimal	Short Hex	Example
black	rgb(0%,0%,0%)	rgb(0,0,0)	#000000	#000
gray	rgb(50%,50%,50%)	rgb(128,128,128)	#808080
silver	rgb(75%,75%,75%)	rgb(192,192,192)	#c0c0c0
white	rgb(100%,100%,100%)	rgb(255,255,255)	#ffffff	#fff
olive	rgb(50%,50%,0%)	rgb(128,128,0)	#808000
purple	rgb(50%,0%,50%)	rgb(128,0,128)	#800080
fuchsia	rgb(100%,0%,100%)	rgb(255,0,255)	#ff00ff	#f0f
maroon	rgb(50%,0%,0%)	rgb(128,0,0)	#800000
red	rgb(100%,0%,0%)	rgb(255,0,0)	#ff0000	#f00
orange	rgb(100%,65%,0%)	rgb(255,165,0)	#ffa500
yellow	rgb(100%,100%,0%)	rgb(255,255,0)	#ffff00	#ff0
green	rgb(0%,50%,0%)	rgb(0,128,0)	#008000
teal	rgb(0%,50%,50%)	rgb(0,128,128)	#008080
lime	rgb(0%,100%,0%)	rgb(0,255,0)	#00ff00	#0f0
navy	rgb(0%,0%,50%)	rgb(0,0,128)	#000080
blue	rgb(0%,0%,100%)	rgb(0,0,255)	#0000ff	#00f
aqua	rgb(0%,100%,100%)	rgb(0,255,255)	#00ffff	#0ff

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Web Color Basics

relation tutorial

Category

New

Hot