Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/a26f9f83/public_html/articles/includes/config.php on line 159
Hexadecimal Color Notation on the Web > NetSparsh - Viral Content you Love & Share

Hexadecimal Color Notation on the Web

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 http://bucarotechelp.com/search/000800.asp

In The News:

This RSS feed URL is deprecated, please update. New URLs can be found in the footers at https://news.google.com/news

Hospitality Net

How to Improve Your Hotel UX Web Design (4 Things that Are Important to Your Visitors)
Hospitality Net
Designing a website for optimal user experience (UX) is essential to any business - after all, an effortless user experience clears the path to conversion. But the hospitality industry has taken a more specific turn in the digital era - a hotel website ...


Boing Boing

Guidelines for brutalist web design
Boing Boing
"Raw content true to its construction" — no hinky web frameworks, no broken javascript soiling itself at the first whiff of interaction the developer didn't design for, no dark patterns, no performance-crushing superficial cleverness, no contempt for ...


Web Design Trends of 2018
Times Square Chronicles (press release)
Web design is constantly evolving, and there is always something new on the horizon to think of. There are lots of trends we are seeing in 2018, which we have shared with you below. Make sure you keep up with the pace, to stay on top of your competition.


KSU | The Sentinel Newspaper

KSU adds new courses to web design, development program
KSU | The Sentinel Newspaper
Kennesaw State's College of Continuing and Professional Education is adding new courses to its web design and development certificate program over the span of the next year to provide students with more in-depth certificate options. College of ...


Macworld UK

Best web design software for Mac
Macworld UK
Thankfully, there are plenty of options that make designing and running a site quite simple. In this article we offer a selection of the best web-building software for your Mac. Be sure to also take a look at our How to create a website on a Mac ...


TechRadar

Best web development tools of 2018
TechRadar
Traditionally, when we think of web development, we picture some coder typing furiously on a keyboard into the wee hours of the night while slurping coffee, sitting in a dark basement next to the flashing LEDs and whirring hard drives of a stack of ...


Adweek

It's Time for Brands to Go Back to Basics and Entice Consumers With Strong Design and Copy
Adweek
So, how do you increase time on site? A lot of marketers think it's through publishing long-form content. But increasing user engagement is about creating synergy between copywriting and SEO web design. Simply put, your bad copywriting and design harm ...


Yes, Even Freelancers Need Responsive Websites in 2018
Business 2 Community
Many marketing experts began emphasizing the importance of responsive web design back in 2015. They warned that Google was implementing new changes to its marketing algorithm and would begin penalizing sites that failed to use responsive sites.


Practical Ecommerce

22 Free Web Design Tools from Spring 2018
Practical Ecommerce
Add value to your website by utilizing free resources from the design community. Here is a list of new web tools and design elements from spring 2018. There are designer and developer apps, fonts, content tools, and more. All of these are free.


SitePoint

29 Awesome Tools for Web Designers & Developers
SitePoint
This article was created in partnership with Mekanism. Thank you for supporting the partners who make SitePoint possible. We're always on the lookout for the best web tools and services available for designers and developers. Which resources should we ...

Google News

Why Web Pages Appear in the Wrong Location after Uploading to my Website?

If your are a new web designer, you may face... Read More

Web Design Advice And Information

Most of us at times need advice on different aspects... Read More

Other Ways to Look at Things

Many people today are tired of the Microsoft software that... Read More

How a Custom Designed Website Can Help Your Business

Over the years, the internet has grown into a marvelous... Read More

How Not to be Ripped Off by Your Website Designer

As web designer my self, I have had the unfortunate... Read More

How to use Emotional Content to Increase Visitor Response

Did you know that many folks make "buying decisions" when... Read More

How to Hire a Web Designer/Programmer for Your Website

Hire a designer or a programmer for your website is... Read More

Ten Fatal Mistakes That Make Web Sites Stink

Since you'll spend lots of time and money to create... Read More

50 Surefire Web Design Tips

Tips to brand your websiteInclude your logo in all pages.... Read More

Leave Those Links Blue!

Don't mess with those links! When you're designing your site,... Read More

Effective Website Design

In this era of ultra-sophisticated internet marketing and web design,... Read More

Building Your Website to Save You Money

Does your website make you any money? Does it SAVE... Read More

Is Your Site Too Slow? Why Image Optimization Is Critical

Graphics are fun, but if you put in too many... Read More

Affordable Website Design In Manchester

If you have a business, big or small you may... Read More

How To Create A Stunning Drop Capital Effect On Your Web Pages

Drop Capitals are frequently used in many newspapers, books and... Read More

Keep Them Coming Back - Update Your Site

If you are anything like me, your website is a... Read More

How to Double Your Online Sales Without Spending Another Dime on Advertising

Learning how to convert visitors to your web site into... Read More

Creating a Basic Web Design Template

A "template" is simply a design format which you can... Read More

Introduction To CGI Scripts

Using CGI scripts to add automation to your web site... Read More

Website Design Mishaps - How to Avoid Costly Errors That Can Crush Your Chances of Success

Designing your website can be a difficult task especially if... Read More

Ten Steps to a Winning Home Page

There's no doubt about it - the first page your... Read More

Website Background Colors and Graphics: What You Need to Know Before Designing Your Website

Designing your website means you have to be creative, plan... Read More

Your Site Map: Spider Food or Just A Light Snack?

Mechanical spiders have to eat. In fact, they usually have... Read More

Dont Make Your Website User-UNfriendly!

Web Design is a very subjective process. Your idea of... Read More

How To Choose A Website Designer

Now that you have decided that it is time to... Read More