When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.
Text
Colors can be specified according to their names, for example "yellow", "green", or "blue". In many cases, these simple color names will work. But what if you want to specify a more sophisticated color like "cornflowerblue"? A particular browser may not recognize a particular color name. It's more reliable to specify colors with an "RGB triplet".
An RGB triplet specifies a color based upon the amounts of red, green, and blue, on a scale from 0 to 255, required to create the color. For example, to create the color cornflowerblue you need red=100, green=149, and blue=237. We could then specify the color of the text within a span using the rgb function as shown below.
Text
This will work fine with style notation, but what if you want to use straight html. Html doesn't recognize the rgb function. In that case, you can specify color using "hexadecimal" notation. Whereas the decimal numbering system uses the characters 0 through 9 to get 10 values, the hexadecimal numbering system uses the characters 0 through f to get 16 values. (After 9 the characters a, b, c, d, e and f are used, as shown below.)
Decimal Hexidecimal Equivilants
dec hex
0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F
On first appearance, this looks pretty simple but you need two hexadecimal characters to represent all decimal values from 0 to 255. When you increment decimal 9 by 1, you change the 9 to 0 and put 1 in the ten's place. When you increment hexidecimal F by one, you change the F to 0 and put 1 in the "sixteens" place. Sometimes it's not easy to convert between decimal and hexadecimal in your head.
RGB Triplet for Cornflowerblue
color dec hex
red 100 64
green 149 95
blue 237 ED
We could then specify the color of text within a span using the hexadecimal notation as shown below.
Text
Note that when we indicate the use of hexadecimal notation by placing a pound (#) sign in front of the number, and we don't use commas to separate the color components.
If it's not easy to convert between decimal and hexadecimal in your head, then how do you do it? You can use a calculator that has a decimal to hexadecimal coversion function, or you can learn to think in hexadecimal. For example, what's the next number after CE? That would be CF. what's the next number after CF? That would be D0. Which hexadecimal number is higher 99 or B2? B2 would be higher than 99. It gets easier with experience.
Here's Java Script code for a simple decimal to hexidecimal color converter
function convert(decvalue)
{
var num = parseInt(decvalue);
if(num >= 0 && num < 256)
{
var hexnum = num.toString(16);
alert("#" + hexnum);
}
else {alert("Error!");}
}
It's important to use hexadecimal notation to specify colors when you use DHTML with visual effects, because to create a dynamic color change you have to increment or add a value to a color. The vast amount of color specification on webpages is in hexadecimal notation, so it would be wise to become familiar with it.
Copyright(C) Bucaro TecHelp.
Permission is granted for the below article to forward, reprint, distribute, use for ezine, newsletter, website, offer as free bonus or part of a product for sale as long as no changes are made and the byline, copyright, and the resource box below is included.
About The Author
To learn how to maintain your computer and use it more effectively to design a Web site and make money on the Web visit bucarotechelp.com. To subscribe to Bucaro TecHelp Newsletter visit bucarotechelp.com
trusted cleaning company Lake Forest ..See, works every time. Seriously now, for some reason people... Read More
One of the challenges of moving a web site up... Read More
Typos, misspellings, hideous grammar, exclamation overkill and run-on sentences all... Read More
It's been said again and again, when it comes to... Read More
Remember your vision for your company and the brand or... Read More
10 Basic Things Your Website Should Have ...__ all short... Read More
Good websites stand out from the masses of boring, hard... Read More
We can't emphasize enough the importance of including keyword-rich content... Read More
Read the title of this article over a couple of... Read More
In today's world, a web site is virtually mandatory for... Read More
Traffic to a site can be a blessing or a... Read More
Persons engaged in website design, here's a scoop for you!... Read More
This article gives free tips on how to find a... Read More
There are many ways to add fancy bells and whistles... Read More
What the heck is going on lately? Most internet websites... Read More
We've all seen them. Poorly designed web sites that make... Read More
Building a website that is exactly what you want and... Read More
When designing your website, remember to avoid useless and confusing... Read More
If you were like me and you have just started... Read More
Just about every list of the "Top 10 Web Design... Read More
There are many companies who build websites, all of which... Read More
What colors do you have at your website?Can they make... Read More
If you need a web designer, but have no clue... Read More
The trend today to overuse animation in a website's opening... Read More
Before you start worrying about marketing your website on the... Read More
pet-friendly home cleaners Lincolnshire ..Creating your web site can be a tricky process. Choosing... Read More
Your business website tells a lot about your company. A... Read More
You have an idea for a website and you are... Read More
Let's face it. Buying products and services from the Internet... Read More
Congratulations! You've got a brand new site and it's doing... Read More
We've all seen and read product testimonials. They're a very... Read More
Have you ever thought about the real stories behind all... Read More
I have written before about long sales copy on the... Read More
Over the course of the last decade, the Internet has... Read More
What's happening to good web site design? Somehow we creative... Read More
Do your web pages, sales letters or personal presentations include... Read More
In cascading style sheets you can specify how your web... Read More
With so many different configurations internet users have their computers... Read More
For many webmasters the title of my article may seem... Read More
There can be zillions of reasons why your visitors return... Read More
Know what you wantMake sure you know why you... Read More
We would all like to have the best looking website,... Read More
Conventional Wisdom states you should use Sub-Directories to organize your... Read More
Over the years, the internet has grown into a marvelous... Read More
You're almost set. The content of your website, e-book, or... Read More
I always have people asking me if I know of... Read More
Favorite icon appears to the left of your link in... Read More
Choosing the right typeface for your website copy is important,... Read More
The first immutable law of effective navigation: It's gotta be... Read More
The time it takes to load your site can make... Read More
Web Design |