Home
>
Web Design
>
Hexadecimal Color Notation on the Web

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.

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

monthly home cleaning Glenview ...

In The News:

Ahold Delhaize's cybersecurity incident knocked online ordering and digital coupons offline at Stop & Shop, Food Lion, Hannaford and Giant Food stores.

The Fox News AI Newsletter covers the latest artificial intelligence technology advancements, including the challenges and opportunities AI presents now and for the future.

Amazon's About You feature includes personality details from your shopping history, and some shoppers are finding hilariously awkward results.

Identity theft recovery starts with securing bank accounts, freezing credit and enabling two-factor authentication within the first 24 hours.

Apple's $299 HomeView smart display uses facial recognition to personalize screens for up to six household members and show live security camera feeds.

Domonique DuBose spotted red flags when a man on Hinge with 85,000 followers and a blue checkmark claimed to be a San Francisco 49ers player.

Your phone's location data can expose visits to doctors, pharmacies and places of worship. The FTC took action against data brokers selling this data.

Hackers targeted Danfoss refrigerator controls across French supermarkets, forcing chains like Carrefour and Monoprix to discard massive food stocks.

iOS 27 finally lets iPhone Shared Albums store photos and videos at full resolution in iCloud, but new items count toward the owner's storage.

A fake Facebook Marketplace text scam uses your real name as the seller to trick you into replying, and Malwarebytes warns even one response helps.

The Pentagon data breach exposed 2.76 million Social Security numbers and military records, raising long-term identity theft concerns for veterans.

Kodiak AI plans to haul IKEA freight on Texas highways with no one in the cab, raising urgent cybersecurity and safety questions for drivers.

Apple Intelligence in iOS 27 adds Extend and Reframe tools to Photos, letting iPhones generate new background areas beyond your original borders.

Microsoft's X account was hijacked to promote a crypto pump-and-dump scheme, exposing its more than 13 million followers to a scam campaign.

Scammers can combine your name, phone number and address with data breach details to attempt SIM swaps, phishing and even identity theft schemes.

ChatGPT Work, Meta Muse and Gemini Spark can monitor flight prices, sort your email inbox and track important deadlines, but savvy users start small.

iPhone, Samsung Galaxy and Google Pixel each hide a built-in tool that turns a video frame into a separate photo without any screenshot needed.

Operation KillSwitch dismantled KillSec's ransomware infrastructure, but investigators say a 16-year-old allegedly ran the entire cybercrime operation.

The Fox News Artificial Intelligence newsletter covers where voters will decide on AI data center ballot measures and Jeff Bezos' tech vision.

Apple's Impersonation Risk Detection in iOS 27 can flag suspicious activity inside apps, but the setting is off by default and must be enabled.

Federal Election Commission records can expose your name, address, employer and donation history once contributions exceed the $200 threshold.

Cybersecurity expert Morgan Wright says human skepticism remains the strongest defense against AI-driven phishing scams and voice cloning fraud schemes.

iPhone, Google Pixel and Samsung Galaxy each handle security updates differently, and one screen saying "up to date" may not tell the whole story.

Deborah Del Mastro heard what sounded like her daughter's terrified voice on the phone, launching a five-hour virtual kidnapping scam ordeal.

Hotel TV privacy risks go beyond forgotten passwords when you sign into Netflix or other streaming apps on shared devices you don't control.

Hexadecimal Color Notation on the Web

Web Design